Webgrafik mit SVG – Scalable Vector Graphics

Tutorials
Tutorials

von Fries Websolutions

Fast keine Website kommt heutzutage ohne Grafiken aus, aber durch die geringe Bandbreite der Internetanbindungen, kommt es bei der Verwendung vieler grafischer Elemente, dann doch zu erhöhten Transferzeiten. Aber Abhilfe soll das Format SVG schaffen.

Wie es der Name schon sagt ist “SVG” ein Vectorgrafikformat, das heißt die Informationen zur Darstellung der Grafik werden als Textinformationen “aufbewahrt” und eine einfache Linie definiert sich über unseren Startpunkt (x,y) und den Endpunkt (x,y). Für die weiteren Beschreibung des Aussehens kommen noch Angaben wie: Farbe und Dicke der Linie dazu.

Als Beschreibungssprache dient XML, daraus ergibt sich zwingend, dass wir uns an die Konventionen von XML zu halten haben und alle “Tags” sind zu beenden, Attribute gehören in doppelte Anführungszeichen und die Groß-/ und Kleinschreibung ist strikt einzuhalten. Eine typische SVG-Datei ist zum Beispiel so aufgebaut:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/PR-SVG-20010904/DTD/svg10.dtd">
<svg>
.... hier stehen die Objektbeschreibungen
</svg>

Grundlegende Elemente
Beschrieben werden Elemente wie Linie, Rechteck, Kreis, Ellipse, Polygone, Text und so fort. Eine Linie wird, so erzeugt:

<line x1="160" y1="100" x2="210" y2="100" stroke-width="2" stroke="black" />

Diese Linie beginnt 160px von links, 100px von oben und hat eine Länge von 50px sowie eine Dicke von 2px in der Farbe Schwarz. Die Maßeinheit “Pixel” die ergibt sich, weil keine anderen Angaben gemacht wurden. Möglich sind Angaben wie in(Inch), pt(Points), pc(Pica), cm, und mm. Zu beachten ist, dass der Tag innerhalb der Anweisung geschlossen wurde. Kreise und Rechtecke lassen sich genauso einfach erzeugen:

Kreis

<circle cx="185" cy="70" r="10" fill="red" />

Mitte des Kreises ist 185px von links, 70px von oben und der Radius beträgt 10px die Füllfarbe ist rot.

Rechteck

<rect x="160" y="2" width="50" height="50" fill="white" stroke="blue" stroke-width="2" />

Beschreibt ein weisse Quadrat mit blauem Rahmen.

Weitere Möglichkeiten und Vorteile von SVG
Bis jetzt haben wir noch keinen großen Vorteil von SVG beschrieben, bis auf die Möglichkeit, dass die Objekte mit Text beschrieben werden können, was den Suchmaschinen die Möglichkeit der Indizierung, dieser Angaben ermöglicht.

Aber ein Vorteil von SVG ist die geringe Dateigröße, zum Vergleich zu Bitmaps und bei komplexen Darstellungen wird das besonders deutlich, denn mit SVG werden auch Animationen und das freie Zoomen ohne Qualitätsverlust möglich.

Ein Quelltext, aber nur mit einem Plugin für SVG zu betrachten, der sieht so aus:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/PR-SVG-20010904/DTD/svg10.dtd">
<svg>
<rect x="1" y="1" width="88" height="57" fill="red" stroke="none" />
<polygon fill="red" stroke="black" stroke-width="2" points="43,1 1,50 86,50 " />
<circle cx="35" cy="30" r="3" fill="black"/>
<circle cx="52" cy="30" r="3" fill="black"/>
<line x1="20" y1="20" x2="4" y2="7" stroke-width="2" stroke="black" />
<line x1="25" y1="16" x2="8" y2="2" stroke-width="2" stroke="black" />
<line x1="66" y1="20" x2="82" y2="7" stroke-width="2" stroke="black" />
<line x1="60" y1="14" x2="78" y2="2" stroke-width="2" stroke="black" />
<line x1="35" y1="45" x2="52" y2="45" stroke-width="2" stroke="black" />
</svg>

Nach grafischen Elemente wollen wir noch kurz auf die Möglichkeiten der Textdarstellung eingehen, denn Analog zur Darstellung von grafischen Objekten, wird auch Text dargestellt und die Positionierung erfolgt wieder über die (x,y)-Koordinaten, danach folgt die Angabe des Textes und abschließend der End-Tag.

Beispiel

<text x="10" y="10">SVG macht</text>
<text x="10" y="30">Spass!</text>

Wir schreiben den Text, 2-Zeilig untereinander. Natürlich lassen sich alle Möglichkeiten von SVG auch auf Text anzuwenden, Schriftarten, Schriftgrößen, Schrittweiten, Farben können auch an den Text, sogar an Pfaden, entlang fließen. Die SVG-Dateien können auch in HTML-Seiten eingebunden werden und das geht so:

<embed src="svgdatei.svg" width="100" height="100" type="image/svg+xml">

Noch eine Möglichkeiten von SVG wollen wir hier kurz erwähnen, Möglichkeiten mit Farbverläufe, Muster, Transparenzeffekte, Filter sowie Animationen. Nur mit einem Plugin für SVG zu betrachten, wir erzeugen ein Quadrat, welches in Form und Farbe verändert wird.

<rect x="300" y="2" width="100" height="100" fill="yellow">
<animate attributeName="width" to="150" dur="3s" fill="freeze" />
<animate attributeName="fill" from="yellow" to="blue" dur="3s" />
</rect>

SVG in der Praxis
Zum Betrachten von SVG ist ein Plugin von Adobe notwendig, nur der Referenz-Browser Amaya des W3C, der kommt ohne zusätzliche Software mit der Darstellung aus.Weiterführende Links zu SVG
SVG Seiten beim W3
SVG-Spezifikation beim W3
SVG-Spezifikation teilübersetzt von Stefan Schumacher
SVG Seiten bei Adobe
Ein in Java geschriebener SVG-Browser

67 Comments

  1. Heya! I know this is kind of off-topic but I needed to ask.

    Does operating a well-established blog like yours
    require a lot of work? I’m brand new to writing a blog but I
    do write in my diary every day. I’d like to start a blog so I
    can easily share my personal experience and views online.
    Please let me know if you have any kind of recommendations or tips for brand new
    aspiring blog owners. Appreciate it!

  2. Its such as you read my mind! You appear to know so much approximately this, like you wrote the ebook in it or something.
    I think that you could do with a few % to pressure the
    message house a little bit, however other than that, that is wonderful blog.
    An excellent read. I will definitely be back.

  3. You really make it appear really easy toigether witfh your presentation however I find this topic to bee actually one thing that I believe
    I would never understand. It seems ttoo complicated
    and very broad for me. I am looking ahead to your next put up,
    I’ll try to get the cling of it!

    Here is my page :: prezzo kamagra gel

  4. Its like you read my mind! You appear to know so much about this, like you wrote the book in it or something.
    Ithink that you can do witfh some pics to drive the message
    home a bit, but instead of that, this is great blog.

    A fantastic read. I’ll certainly be back.

    Here iss my page – kamagraespana.quest

Leave a Reply

Your email address will not be published.