SVG (Scalable Vector Graphics) ist ein Format um Vektorgrafiken im Browser darzustellen. Das bedeutet die Formen und Farben werden nicht als feste Pixelwerte erzeugt sondern nach einer Beschreibung berechnet. Da die Werte der Grafiken direkt im Quellcode zugänglich sind haben Frontend-Entwickler und Software-Entwickler tolle Möglichkeiten diese dynamisch zu erzeugen oder z.B. mit JavaScript zu animieren.
Ein formschönes und graues 100 x 100 Pixel Rechteck auf einer 300 x 300 Fläche sieht als SVG-Code z.B. so aus:
<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="300px" height="300px">
<rect x="25px" y="25px" width="100px" height="100px" fill="grey" />
</svg>
In SVG exportierte Grafiken sind somit von geringer Datengröße, perfekt skalierbar und decken eine ganze Reihe von Anwendungen ab und natürlich sind weitaus komplexere Formen wie Rechtecke möglich. Außerdem kann man auf diverse Filter und Effekte zugreifen.
Wie so oft könnte alles schön sein, wenn der Internet Explorer <9 nicht wäre. Zum Glück bietet Modernizr uns die Möglichkeit der Feature-Detection für SVG und mit dieser lässt sich arbeiten. Das Vorgehen ist im Artikel SVG mit PNG-Falback auf Kulturbanause.de sehr gut beschrieben worden.