SVG - Die Zukunft von Grafiken auf Webseiten

SVG? Was ist das?

Bild

Bild

Scalable Vector Graphics (SVG) ist ein auf XML basierte und vom W3C empfohlene Spezifikation, um zweidimensionale Vektorgrafiken im World Wide Web darzustellen.

Vektorgrafiken sind, vereinfacht ausgedrückt, Beschreibungen von zweidimensionalen Objekten wie Kreisen, Rechtecken und Pfaden. Ein Dreieck kann z.B. über die Koordinaten der drei Eckpunkte definiert werden. Bei den stärker verbreiterteren Rastergrafiken (z.B. Fotos, Bilder) werden je nach Auflösung Bildpunkte (Pixel) gespeichert.
Der Große Vorteil von Vektorgrafiken gegenüber Rastergrafiken wird mit folgender Grafik deutlich:

Werden Rastergrafiken über ihre eigentliche Auflösung vergrößert, müssen Zwischenpunkte für neue Pixel berechnet werden. Dieses Verfahren nennt man Interpolation. Je nach Interpolationsmethode ergeben sich entweder große Pixel mit harten Kanten, oder das Bild wird matschig und unscharf. Ganz im Gegenteil zur Vektorgrafik: Sie wird je nach benötigter Größe berechnet und kann daher ohne weiteres vergrößert werden.

Wann benötigt man SVG?

Hätte jemand diese Frage vor mehr als zwei Jahren gestellt, hätte die Antwort wahrscheinlich ‚kaum bis gar nicht‘ gelautet. Bis zu diesem Zeitpunkt hatten Webseiten und alle Elemente darin fixe Größen und damit Auflösungen. Und weil nahezu alle Bildschirme die selbe Pixeldichte hatten, konnte man auch getrost davon ausgehen, dass die eigene Webseite auf 99,99% aller verfügbaren Bildschirme qualitativ hochwertig und scharf angezeigt wurde.
Seit dem sich Responsive Webdesign etabliert hat, werden jedoch ganz neue Anforderungen an Webseiten und deren Inhalte gestellt: Alle Objekte müssen sich flüssig an Bildschirmgrößen vom kleinsten Smartphone bis zum größten Widescreen-Monitor anpassen. Elemente auf der Seite müssen problemlos schrumpfen aber auch größer werden können.
Neben verschiedenen Größen von Displays haben sich in den letzten Jahren vor allem bei mobilen Devices hochauflösende Displays verbreitet. Das stellt noch größere Anforderungen an die Assets einer Seite. Grafiken, die auf einem handelsüblichen Computer-Monitor scharf aussehen, sehen auf hochauflösenden Smartphone- und Tabletdisplays matschig und unscharf aus.
Unter diesen Bedingungen kann SVG glänzen.

Die Herausforderungen von SVG

Alle Vorteile kommen natürlich mit einem gewissen Preis. Wer Grafiken in Zukunft in SVG statt in GIF/PNG/JPG auf seiner Webseite einbinden will, muss einiges beachten:
Alle grafischen Elemente (z.B. Icons, Pfeile usw.) müssen als Vektoren vorliegen. Auch der Workflow des Exports kann sich je nach eingesetzter Software verkomplizieren – Adobe Photoshop unterstützt das Speichern in SVG z.B. nicht.
Daneben ist natürlich auch zu beachten, dass möglichst alle Assets auch wirklich als Vektoren vorliegen. Hat der Kunde das eigene Logo nicht in einem Vektorformat zur Verfügung, können zwar die restlichen Assets als Vektoren gespeichert werden, dennoch bleibt das schlechte Gefühl, ein zentrales Element der Webseite nicht auflösungsunabhängig implementieren zu können.

Die Nachteile von SVG

Wie immer gibt es kleinere Schattenseiten. Neben den nötigen Adaptierungen des Workflows im Bereich Design muss natürlich auch einiges beim Development beachtet werden.
Gewohnte Workflows mit automatischer Image-Sprite erzeugung (durch z.B. SASS + Compass) funktionieren mit SVGs (noch) nicht.
Neben der Einbindung die größte Herausforderung ist aber natürlich wie immer der Browsersupport. Generell wird SVG in vielen Browsern unterstützt, Probleme machen nur der Internet Explorer 8 und darunter sowie Android 2.3 und darunter. Daher kommt man nicht herum, für diese Browser alternative PNG-Versionen der Bilder zur Verfügung zu stellen.
Weitere Vorteile von SVG
Neben generellen Vorteilen von Vektorgrafiken gegenüber Rastergrafiken hat SVG noch einige besonders nette Features zu bieten.
So kann SVG z.B. inline in CSS eingebunden werden:

 .class {
     background-image: url(“data:image/svg+xml;utf8, ... ”);
 }

Das macht zwar die .css-Datei größer, spart bei vielen einzelnen Datein aber auch enorm viele HTTP-Requests.
Auch Animationen einzelner Objekte im SVG ist möglich. So kann bei einer SVG-Grafik, die z.b. einen Kreis und ein Rechteck beeinhaltet, der Kreis unabhängig vom Rechteck bewegt werden.

Das Fazit

SVG ist keine neue Technologie und wurde bereits 2001 vom W3C standardisiert. Gerade in den letzten Jahren hat sich allerdings gezeigt, wie wichtig SVG für die Zukunft von Webseiten sein wird. Über kurz oder lang werden alle Displays unterschiedlichste Pixeldichten aufweisen und die Anforderung, dass Grafiken auf allen Webseiten perfekt aussehen, wird ganz normal sein.
Mit zunehmender Popularität wird sich mit Sicherheit auch viel aktive Entwicklung auf SVG konzentrieren, was vor allem die bisher von Rastergrafik bekannten Workflows auf SVG ausweitet.
Eines ist sicher: Der Vektorgrafik gehört die Zukunft.