SVG - Scalable Vector Graphics

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