Scalable Vector Graphics richtig nutzen

In diesem Artikel erfahren Sie, wie Sie Vektordateien mit Hilfe von Scalable Vector Graphics professionell in Ihre Webseiten einarbeiten.

Seit Microsoft verkündete, SVG nativ ab dem Internet Explorer 9 zu unterstützen, gibt es kaum noch eine Ausrede für SVG-Muffel. Und doch zögert ein Großteil der Webentwickler bis heute, das Multitalent zu nutzen. Dabei ist es der einzige offene Webstandard für frei skalierbare und verlustfreie Vektordarstellung. Das auf XML basierende Dateiformat ist seit 2001 die vom W3C empfohlene Spezifikation für zweidimensionale Vektoren im Web.

Ablösung für Flash

Wo Flash noch vor Jahren trumpfte, kann es heute einpacken. Als Apple zu Beginn der Smartphone-Ära bekannt gab, dass für das iPhone keine Flashunterstützung vorgesehen ist, wendete sich das Blatt. Da Adobe die Entwicklung des Flash Players für Smartphones eingestellt hat, gibt es nur noch wenige Gründe, mit dem proprietären Flash zu arbeiten. Statt Flash setzen Webworker immer mehr auf Webstandards: HTML5, CSS3, JavaScript und damit auch HTML5-Video- und Audioplayer. Dazu kommen das pixelbasierte Canvas - und eben SVG für vektorbasierte Grafiken.

Die Vermutung liegt nahe, dass viele Webworker die Mühen scheuen, sich mit SVG auseinanderzusetzen, wenn sie bisher mit Formaten wie JPG und PNG keinen nennenswerten Nachteil hatten. Doch vergessen sie dabei oft, dass sie nicht von Hand

in die XML-Struktur eingreifen müssen. Es gibt viele Editoren, die ihnen bei der Erstellung der Vektordateien behilflich sind. Adobe Illustrator und das Open-Source-Pendant Inkscape sind hier Vorreiter. Den generierten Code können Sie direkt aus den Programmen entnehmen und in HTML einfügen.

Auch die Dateigrößen der SVGs sind absolut konkurrenzfähig. Die Verhältnisse hängen von der Vorlage und der Größe der Darstellung ab. Mehr und komplexere Formen machen auch das SVG größer.

SVG bietet keinen Ersatz für das Rasterbild an sich. Dafür ist es auch nicht gedacht. Für ein echtes Foto ist ein pixelbasiertes Format die richtige Wahl. Wenn es sich aber um Logos, Diagramme, Buttons oder ähnliche grafische Elemente handelt, ist eine Vektorgrafik das bessere Format. Zwar bieten Pseudografiken via CSS eine Alternative, allerdings stößt deren Einsatz auch schnell an Grenzen.

SVG-Dateien einbinden

Betten Sie das <svg> direkt in Ihre HTML-Struktur ein, verbessern Sie die Performance. Sie vermeiden hierdurch einen zusätzlichen Server Request, da die Grafik direkt beim Aufruf des Dokumentes mitgesendet und im Client berechnet wird. Wer aufgrund der entstehenden Unübersichtlichkeit der HTML-Struktur kein Fan von Inline-SVGs ist, kann die SVGs auf dem Server komprimiert hinterlegen, um die Performance zu verbessern. Beim Aufruf wird die Datei wie gehabt an den Client geliefert, der sie lokal entpackt und darstellt.

Das vom W3C empfohlene Format SVG Tiny wurde speziell für die Anwendung bei mobilen Endgeräten entwickelt. Das Format unterstützt allerdings bislang nur wenige Manipulationsmöglichkeiten. Verläufe, Transparenzen und Filtereffekte fallen beispielsweise ganz weg. SVG Tiny wird von vielen Browsern akzeptiert. Nur der Internet Explorer tanzt hier aus der Reihe, was besonders Nutzer des MS Surface betrifft.

Glücklicherweise können Sie hier aber durchaus auf die gzip-Komprimierung zurückgreifen. Komprimieren Sie .svg zu .svgz, dann können im Vergleich noch ein paar Bytes gespart werden. Externe SVGs können, neben iFrames und <embed>, mit <object> oder <image> eingebunden werden. Das Einbinden als Multimedia Object gewährt dem Vektorformat die Möglichkeit der Animation durch Javascript Manipulations, wohingegen das img-Tag lediglich für die Darstellung der Grafik geeignet ist. Natürlich lässt sich ein SVG auch im CSS als Hintergrund festlegen.

Anders als ein starres Pixelbild lassen sich Vektorgrafiken an die Größe des Viewports bzw. Elternelements verlustfrei anpassen. Wie Sie eine SVG letztendlich einbinden, bleibt Ihnen überlassen. In einigen Fällen kann es sich lohnen, die Vektorgrafik als <image> einzubinden. Dieses wird nämlich im Gegensatz zum <object> standardmäßig gecacht.

SVGs dynamisieren

Sobald die einzelnen Formen aber mit <object> eingebunden werden, können Sie mithilfe von JavaScript-Bibliotheken und CSS weiter bearbeitet werden. Hier eröffnet sich Ihnen ein weites Feld an Interaktivität und Transformationen. Eine angenehme Hilfe bietet in dem Fall die Bibliothek "data-driven documents", kurz D3.js. Sie ermöglicht das Dynamisieren und Interagieren von Daten mithilfe von HTML, CSS und SVGs. Das Framework lässt Sie vorhandene Daten visuell darstellen und ermöglicht das Erstellen und die Steuerung von grafischen Formen.

Suchmaschinenoptimierung

Seit Mitte 2010 indexiert Google SVGs. Ob Sie dabei in einer separaten Datei vorliegen oder direkt im Quellcode eingebettet sind, spielt keine Rolle. Es kann sich sogar für die Suchmaschinenoptimierung anbieten, auf die textbasierte Vektorgrafik zu setzen, denn anders als bei der Verwendung von Rasterbildern können Sie Keywords in die XML-Struktur einarbeiten. Sie sind nicht länger gezwungen, sich auf das Title- oder die Beschreibung im alt-Attribut zu verlassen. Die Suchmaschinenoptimierung ist also schon lange keine Ausrede mehr, sich beizeiten ein wenig in die Webvektoren einzuarbeiten.

Barrierefreiheit

Im Gegensatz zu Flash bietet SVG die Möglichkeit eines nahezu barrierefreien Zugangs für sehbehinderte Besucher. Das SVG kann neben dem <title>-Tag auch mit einem <desc>-Tag beschrieben werden. Das gilt sowohl für das Gesamtbild als auch für jede einzelne Form, aus der die SVG besteht. Die Description kann beliebig lang sein und wird neben den <text>-, <tspan>- und <textPath>-Elementen vom Screenreader erfasst und wiedergegeben. Im Detail gibt es aber auch noch Verbesserungsmöglichkeiten bei der Accessibility.

Fazit

Es lohnt sich, einen Blick auf die vielfältigen Möglichkeiten von SVGs zu werfen. Die Entwicklung zu skalierbaren und benutzerfreundlichen Internetseiten sollte jeden Webdesigner dazu ermuntern, grafische Verbesserungen an den eigenen Werken in Betracht zu ziehen. Durch ihre geringe Dateigröße lassen sich die Vektorgrafiken performant und schlank in die Webseite integrieren und verhelfen so zu leicht editierbaren Elementen. Für das SVG-Format geht es nun jedenfalls in die zweite Runde. Ob Sie dabei sind, entscheiden natürlich Sie selbst.