SVG ist eine XML-Sprache, vergleichbar mit XHTML, die zum zeichnen von Grafiken benutzt werden kann (wie die Grafik auf der rechten Seite). Die Bilder können entweder mit den benötigten Linien und Formen, oder durch Veränderungen an bereits bestehende Rasterbildern erstellt werden. Eine Kombinationen aus beiden Möglichkeiten ist auch möglich. Das Bild und deren Komponenten können auch umgewandelt, zusammengestellt oder gefiltert werden, um das Aussehen komplett zu verändern.
SVG erschien im Jahre 1999 nachdem mehrere Formate zum W3C eingeschickt wurden und gescheitert sind, um ratifiziert zu werden. Während die Spezifikationen im Laufe der Zeit erweitert wurden, sind die Browserimplementationen nur langsam fortgeschritten, und so gibt es nur wenige SVG-Inhalte, die heutzutage im Web genutzt werden (2009). Die Implementationen werden nur langsam weiterentwickelt, während HTML:Canvas oder Adobe Flash sehr schnell weiterentwickelt werden und dadurch schon sehr ausgereift sind. SVG bietet Vorteile gegenüber beiden Technologien: Eine DOM Schnittstelle ist verfügbar und es wird keine Drittanbieter-Erweiterung für den Browser benötigt, um die Inhalte darzustellen. Ob man SVG verwendet oder nicht, hängt häufig davon ab, wofür es verwendet werden soll.
Vor dem Beginn
Es gibt eine Reihe von Grafikprogramme, wie zum Beispiel Inkscape, welche kostenlos sind und SVG als natives Dateiformat benutzen. Dieses Tutorial hält sich jedoch an einen Texteditor ihrer Wahl, um SVG Dateien zu erstellen. Die Idee ist, SVG als solches zu verstehen und das geht am Besten, in dem man selbst Hand anlegt, um ein bisschen Markup zu schreiben. Nicht alle SVG Viewer sind gleich und daher ist die Wahrscheinlichkeit groß, dass etwas, was für eine bestimmte Anwendung geschrieben wurde, nicht exakt gleich in einem anderem Programm aussieht. Das liegt einfach an der unterschiedlichen Unterstützung der SVG Spezifikation oder anderen Technologien, die ebenfalls verwendet werden (wie JavaScript oder CSS).
SVG wird nicht in allen modernen Browsern vollständig unterstützt (obwohl es nach und nach kommt). Eine ziemlich vollständige Liste von SVG Viewern findet sich im SVG Wiki. Firefox unterstützt einige SVG Inhalte seit Version 1.5 und mit jedem Release kommt ein Stück dazu. Mit diesem Tutorial kann das MDC vielleicht einigen Entwicklern helfen, auf dem neustem Stand, im Vergleich der Gecko Implementation mit anderen Implementationen, zu bleiben.
Bevor man anfängt sich mit SVG auseinander zu setzen, sollte ein grundlegendes Verständnis von XML oder anderen Auszeichnungssprachen wie HTML vorhanden sein. Falls Sie nicht so ganz mit XML vertraut sein sollten, sind hier ein paar Richtlinien an die man sich halten sollte:
- SVG Elemente und Attribute sollten alle so geschrieben werden, wie sie hier gezeigt werden, da XML case-sensitiv ist. (im Gegensatz zu HTML)
- Atrributwerte müssen in SVG in Anführungszeichen gesetzt werden, auch wenn sie Zahlen sind.
SVG ist eine große Spezifikation. Dieses Tutorial versucht die Grundlagen zu behandeln. Wenn Sie erstmal mit den Grundlagen vertraut sind, sollten Sie in der Lage sein die Elementreferenz und die Schnittstellenreferenz zu verwenden, um alles Weitere zu finden.