SVG: Scalable Vector Graphics

SVG ist ein textbasiertes Datenformat für Vektorgrafiken. Der Vorteil von Vektorgrafiken gegenüber Rastergrafiken besteht vor allem in der beliebigen verlustfreien Skalierbarkeit. Das heißt, eine Vektorgrafik kann beliebig vergrößert werden, ohne dass die Grafik an Konturschärfe verliert oder grobe Pixel sichtbar werden. Dies wird erreicht, indem das Bild nicht Bildpunkt für Bildpunkt aufgelöst, sondern auf seine geometrischen Inhalte abstrahiert wird. Für ein Rechteck werden beispielsweise lediglich dessen Position, Kantenlänge, Kontur- und Füllfarbe benötigt, um es zu beschreiben. Auf diese Weise kann der Speicherbedarf einer Vektorgrafik sehr gering gehalten werden. Auf der anderen Seite ist der Rechenaufwand für die Darstellung einer Vektorgrafik unter Umständen wesentlich höher als bei einer Rastergrafik. Auch ist nicht jede Art von Bild für die Darstellung als Vektorgrafik geeignet. Während man Fotos oder gescannte Gemälde sicherlich besser als Rastergrafik speichert, können Logos, Diagramme, Landkarten oder Comics durchaus gut als Vektorgrafik dargestellt werden, da sie häufig überwiegend aus Flächen und Linien bestehen.

SVG ist nun eine Auszeichnungssprache, mit der Vektorgrafiken beschrieben werden können. Diese Sprache erinnert in ihrem Aufbau stark an HTML. Dies ist wenig verwunderlich, da sowohl SVG als auch HTML quasi »Dialekte« des zugrunde liegenden SGML sind. Da der Inhalt einer SVG-Datei ausschließlich aus Text besteht, ist es auch möglich, SVGrafiken dynamisch mittels PHP zu erzeugen.

Neben der manuellen Erstellung, die in diesem Tutorial behandelt wird, können SVGrafiken auch mit eigenständigen Editoren wie beispielsweise Inkscape erstellt werden. Die Standard-Konformität des SVG-Quelltextes kann z. B. mit dem W3C-Validator überprüft werden.

Das Grundgerüst einer SVG-Datei sieht folgendermaßen aus:

Quelltext auswählen
1
2
3
4
5
6
7
8
9
10
11
<?xml version='1.0' encoding='UTF-8' standalone='no'?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
<svg xmlns='http://www.w3.org/2000/svg'
     xmlns:xlink='http://www.w3.org/1999/xlink'
     xmlns:ev='http://www.w3.org/2001/xml-events'
     version='1.1' baseProfile='full'
     width='800px' height='600px'>
 
<!-- Hier kommen die Angaben zur Grafik -->
 
</svg>

Vor allem die Werte für die Breite und Höhe der Grafik (width und height) wird man natürlich anpassen müssen. Die Angabe baseProfile bezieht sich auf die möglichen Ausgabeprofile.

• Maße können unter anderem in Pixeln oder Millimeter angegeben werden.
• Das Koordinatensystem hat seinen Ursprung oben/links.
• Objekte dürfen die Bilddimensionen überragen.
• Koordinaten geben das Zentrum einer Linie an.
• Objekte können mit CSS formatiert werden.
• Der Hintergrund von SVGrafiken ist standardmäßig transparent.
• Objekte überlagern sich standardmäßig in der Reihenfolge ihres Auftretens.
• Internet Explorer unterstützt SVG erst ab Version 9.