SVG ist die Abkürzung für Scalable Vector Graphics und eine Möglichkeit, zweidimensionale Grafiken in XML zu beschreiben. Vektorgrafiken haben die Eigenschaft, dass sie unendlich skalierbar sind, da das Bild nicht mit Pixeln arbeitet, sondern je nach Größe neu berechnet wird.
Das World Wide Web Consortium (W3C) empfiehlt das SVG-Format zur Darstellung von zweidimensionalen Vektorgrafiken im Web. Folglich hat eine Datei dieses Formats die Endung „.svg“.
Der Grund, warum dieses Format empfohlen wird, liegt darin, dass Vektorgrafiken im SVG-Format auf Basis von XML von allen gängigen Webbrowsern darstellt werden können. Dabei kann eine SVG-Vektorgrafik unterschiedliche Inhalte haben. Möglich sind Grafiken aus Geraden und Kurven, Bildern und Text. Diese Objekte lassen sich transformieren oder gruppieren, zum Feature-Set gehört auch die mögliche Verschachtelung von Alpha-Masken, Filter-Effekten, Template-Objekten und Beschneidungspfaden.
Wie funktioniert’s?
Dateien im SVG-Format können relativ einfach mithilfe der Codes <embed>, <object> und <iframe> im HTML-Code einer Seite untergebracht werden. Dennoch gibt es Unterschiede zwischen den Einbindungsmöglichkeiten, jede Form hat eigene Vor- und Nachteile. Allerdings werden alle drei Möglichkeiten von den gängigen Browsern unterstützt, sodass man sich um die Browser-Kompatibilität heute keine Sorgen mehr machen muss. Die Einbindung mit mithilfe des <embed>-Codes sieht dann zum Beispiel so aus:
<embed src="beispielvektor.svg" type=image/svg+xml" />
Diese Option der Einbettung ist in HTML4 und XHTML veraltet, aber dennoch für HTML5 geeignet.
Die Einbindung mit <object> ist hingegen aktueller Standard in HTML4, HTML5 und XHTML, Scripting ist bei dieser Einbettungsmethode allerdings nicht erlaubt. Der Code sieht dann wie folgt aus:
<object data="beispielvektor.svg" type="image/svg+xml"></object>
Weiterhin lassen sich SVG-Dateien via iframe einbinden. Hierbei wird allerdings ein Rand erzeugt, dessen Style unspezifisch ist. Gleichzeitig wird der iframe nicht in XHTML und HTML4 unterstützt. Der Code sieht folgendermaßen aus:
<iframe src="beispielvektor.svg"></iframe>
Zusätzlich lässt sich eine Vektorgrafik im SVG-Format auch direkt in den HTML-Code einbinden, die von den gängigen Browsern (Firefox, Google Chrome, Opera, Safari, Internet Explorer) ausgelesen werden kann. Der Code fällt dann allerdings ein bisschen größer aus und kann wie folgt formuliert werden:
<html> <body> <svg xmlns="http://www.beispielseite.de/vektoren/vektorbeispiel/svg" version="2.1"> <circle cx="50" cy="50" r="30" stroke="black" stroke-width="4" fill="black" /> </svg> </body> </html>
Damit die Einbindung im HTML-Code einwandfrei funktioniert, ist es wie immer wichtig, dass jeder geöffnete Befehl auch wieder mit </…> geschlossen wird.