Bilder im Format Scalable Vector Graphics (SVG) brauchen weniger Speicherplatz und lassen sich ohne Qualitätsverlust skalieren. Selbst Animationen und Programmcode mit Javascript sind möglich, was den Standard fürs Web und den Desktop interessant macht.
Im grafischen Web dominieren die Rasterformate Gif, Jpeg und PNG. Mit dem SVG-Format (Scalable Vector Graphics) sollen Vektorgrafiken auch dort Einzug halten. Das Vektorformat basiert auf XML, einer Beschreibungssprache, die auch andere Webformate erfolgreich nutzen. Der Standard wird vom World Wide Web Consortium (W3C)[1] verwaltet und ist zurzeit bei Version 1.1 angelangt. Version 1.2 liegt als Draft vor.
Vektor- oder Rastergrafik
Die kleinste Einheit von Rastergrafiken ist das so genannte Pixel (Picture Element, Bildpunkt). Ein Bild von 400 mal 300 Punkten besteht im Normalfall aus 120000 solcher Pixel, abgesehen von speziellen Methoden zur Kompression wie Run-Length-Encoding. Die Dateigröße ist im Wesentlichen unabhängig vom Bildinhalt. Diese Art der Bildbeschreibung ist nützlich für fotorealistische Darstellungen, aber weniger geeignet für einfache Grafiken, die nur geometrische Objekte enthalten (Kreise, Dreiecke und so weiter).
Solche Grafiken lassen sich platzsparender speichern, wenn man nur die Koordinaten jener Punkte erfasst, die einzelne Geometrien beschreiben. Dadurch werden Bilddateien kleiner und sind im Internet schneller zu übertragen. Das Anwendungsprogramm muss das Bild für die Anzeige erst berechnen (rastern), da nur eine Beschreibung vorliegt. Mit aktuellen Computern ist dies aber kein Problem mehr.
Das Abspeichern der Kurvenzüge einer Grafik bringt einen weiteren Vorteil: Bei einem Vektorformat kann der Benutzer einzelne Objekte direkt bearbeiten. Mit Hilfe einer Koordinate, die dem Betrachter zum Beispiel durch eine Maus mitgeteilt wird, lässt sich berechnen, welches Objekt an diesem Punkt liegt. Soll ein Objekt verschoben werden, sind nur seine Koordinaten zu transformieren. Einzelne Elemente einer Rastergrafik verändern ist viel aufwändiger.
Im Bereich des Computer Aided Design (CAD) werden aus diesem Grund fast nur Vektorformate genutzt. Wenn der Benutzer in eine Bitmap-Datei zoomt, vergrößert das entsprechende Programm nur die Pixel, mehr Details gibt es nicht zu sehen. Vektorgrafiken bleiben dagegen beim Vergrößern scharf, da Linienzüge für jede Zoomstufe neu gerastert werden, siehe Abbildung 1. Daher die Bezeichnung Scalable (skalierbare) Vector Graphics.
Abbildung 1: Vergrößert man den gefüllten Kreis im Pixelformat, erscheinen die Bildpunkte größer (links). Bei der Vektor-Variante bleibt der Rand scharf.
Erste Schritte
Eine SVG-Datei hat die Endung ».svg« oder, wenn sie mit Gzip gepackt ist, ».svgz«. Die meisten SVG-Browser unterstützen solche gepackten Dateien. Das Koordinatensystem hat seinen Nullpunkt (Ursprung) in der oberen linken Ecke der Zeichenfläche, die x-Achse verläuft horizontal (rechts positiv), die y-Achse von oben nach unten. Listing 1 zeigt als einfaches Beispiel ein SVG-Dokument. Wer sich schon einmal mit einem XML-Format beschäftigt hat, wird sich gleich zurechtfinden.
|
Listing 1: Einfaches |
|---|
01 <?xml version="1.0" encoding="iso-8859-1"?> 02 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" 03 "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" > 04 <!-- Ein Kommentar --> 05 <svg width="10cm" height="10cm" viewBox="0 0 250 150" > 06 <title>Mein erstes SVG Dokument</title> 07 <desc>Eine einfache SVG Grafik, die als Vorlage dienen kann.</desc> 08 <g> 09 <circle cx="50" cy="50" r="30" style="fill:rgb(255,0,0)"/> 10 <rect x="100" y="25" width="50" height="50" style="fill:blue"/> 11 12 Scalable Vector Graphics 13 14 </g> 15 </svg> |
Ein SVG-Dokument ist immer im XML-Format abgefasst, wobei die erste Zeile XML-Version und -Zeichensatz angibt. Die zweite Zeile spezifiziert mit dem »!DOCTYPE«-Tag den Dokumententyp SVG. Dann folgt der so genannte Public Identifier »PUBLIC “-//W3C//DTD SVG 1.0/EN”«. Der System-Identifier in Zeile 3 ist der Name einer SVG-DTD-Datei, die zulässige Elemente und Attribute bestimmt. Die DTD wird übrigens vom jeweiligen SVG-Browser bereitgestellt und normalerweise nicht von dieser Internetadresse geladen.
Struktur durch XML
Nach einem XML-Kommentar beginnt in Zeile 4 von Listing 1 die Beschreibung der Grafik mit einem »svg«-Tag. Mögliche Attribute sind die Abmessungen und die Betrachtungsfläche (Viewport). Die Tags »title« und »desc« geben der Grafik einen Titel und eine Beschreibung, die ein SVG-Browser anzeigt, siehe Tabelle 1. Der KDE-Browser Konqueror stellt zum Beispiel den Titel in der Titelzeile dar und die Beschreibung in der Statuszeile.
