SVG-Format: So binden Sie die Grafikdateien in Ihre Website ein

1998 lagen dem World Wide Web Consortium (W3C) gleich zwei potenzielle Kandidaten für den Standard einer Auszeichnungssprache für zweidimensionale Vektorgrafiken auf XML-Basis vor: Während u. a. Microsoft und Macromedia (heute Adobe Systems) die Vector Markup Language (VML) ins Rennen schickten, traten IBM, Adobe und weitere mit der Precision Graphics Markup Language (PGML) an. Das W3C entschied sich jedoch, keine der beiden Sprachen als Standard zu verabschieden und diese stattdessen zusammenzuführen. Am 4. September 2001 veröffentlichte man das Ergebnis in einer Recommendation (dt. „Empfehlung“) unter dem Namen Scalable Vector Graphics (SVG) 1.0 Specification. Mit seiner Vorgehensweise konnte das W3C nicht alle Beteiligten zufriedenstellen, und so setzte Microsoft in seinen Anwendungen wie dem Internet Explorer (bis Version 9) lange Zeit trotzdem auf die eigene Sprache VML, was dem Erfolg des SVG-Formats jedoch keinerlei Abbruch getan hat.

Bereits 2001, als das W3C Scalable Vector Graphics zur empfohlenen Spezifikation für die Beschreibung zweidimensionaler Vektorgrafiken machte, galt die XML-Sprache als optimale Lösung zur Darstellung solcher Grafiken, sogar in animierter Form. Da die damaligen Browser allerdings noch nicht für das neue SVG-Format bereit waren bzw. – im Falle des Internet Explorers – es lange Zeit verweigerten, waren externe Plug-ins wie der Adobe SVG Viewer oder das Batik SVG Toolkit von Apache zwingend erforderlich, um die in XML geschriebenen Grafiken lesen und darstellen zu können. Alternativ musste man als Webmaster für PNG-Grafiken als Fallback-Lösung sorgen.

Seit Webbrowser HTML5 beherrschen, sind derartige Maßnahmen nicht mehr nötig: Der in HTML5 integrierte Parser macht es möglich, SVG-Elemente direkt in den HTML-Code einzubauen, ohne den XML-Namensraum anzugeben, der dem interpretierenden Browser für gewöhnlich den Kontext der eingebundenen Elemente verrät. Damit entfällt auch die Notwendigkeit eines spezifischen Parsers, wie ihn erwähnte Plug-ins enthalten.

Anders als Raster-/Pixelgrafiken zeichnen sich Grafiken im SVG-Format generell dadurch aus, dass sie die einzelnen grafischen Objekte eines Bildes aus mathematischer Sicht beschreiben und nicht in ein Pixelraster einordnen. Aus diesem Grund lassen sich mithilfe von Scalable Vector Graphics insbesondere geometrische Formen, Icons, technische Zeichnungen, Schriften, Icons und Logos ohne Qualitätsverlust skalieren, wobei sie nicht den für Rastergrafiken typischen Treppen- oder Alias-Effekt zeigen, bei dem einzelne Pixel zum Vorschein treten. In unserem Ratgeber zum Thema erfahren Sie alles über Unterschiede zwischen Pixel- und Vektorgrafiken.

Spätestens seit der Weiterentwicklung der Internetbrowser kommt SVG in HTML-Dokumenten immer häufiger zum Einsatz, woran auch das Responsive Webdesign einen großen Anteil hat: Die Vektorgrafiken punkten beim Design geräte- und displayübergreifender Webprojekte vor allem mit ihrer erstklassigen Skalierungsfähigkeit. Das ist jedoch längst nicht der einzige Beweggrund, SVG bei der grafischen Gestaltung der eigenen Website zu verwenden, wie die folgende Auflistung eindrucksvoll unter Beweis stellt:

• geringe Dateigröße: SVG-Grafiken zeichnen sich – von sehr komplizierten Gebilden einmal abgesehen – durch eine sehr geringe Dateigröße aus, die auch bei einer Vergrößerung der Grafik bestehen bleibt. Unabhängig von den Geräten, die auf die Bilddateien zugreifen, ist eine stabile und schnelle Performance des Servers also gewährt. Die daraus resultierende geringe Ladezeit der Bilder wirkt sich wiederum auf das Suchmaschinenranking aus.

• Open Source: Das W3C hat SVG als freien Standard kreiert, weshalb Sie die Auszeichnungssprache ohne Einschränkungen nutzen können – plattformübergreifend und in Kombination mit anderen XML-Sprachen.

• verschiedenartig animierbar: SVG-Elemente können auf verschiedene Weisen animiert werden. Dafür kann die W3C-eigene Sprache SMIL (Synchronized Multimedia Integration Language) verwendet werden, deren Weiterentwicklung aber mittlerweile eingestellt ist. Zudem ist SMIL niemals in den Internet Explorer und Edge implementiert worden und soll eventuell auch in künftigen Chrome-Versionen nicht mehr unterstützt werden. Üblicher ist daher die Animation mit JavaScript, wenn Sie SVG-Elemente beispielsweise auf Events wie Nutzerklicks oder Mausbewegungen reagieren lassen wollen. Eine dritte (eingeschränkte) Option stellen die CSS-Eigenschaften „animation“ und „motion-path“ dar, die aber ebenfalls eine eher schwache Browserunterstützung vorzuweisen haben.

• mit CSS formatierbar: Grafiken im SVG-Format können mit der Stylesheet-Sprache CSS manipuliert werden. So lassen sich alle Präsentationsattribute wie Farben, Filter, Schriftart und -größe u. v. m. in einer separaten CSS-Datei oder direkt im SVG anpassen, um das Aussehen der Grafik zu verändern.

• hohe Kompatibilität: Dass sich die Funktionen der unterschiedlichen Parser stark voneinander unterscheiden, hat nur wenig Einfluss auf das Rendering der Grafiken, denn das SVG-Format ist sowohl abwärts- als auch aufwärtskompatibel. Im Ergebnis stellt jeder Browser das entsprechende Bild nach den eigenen Möglichkeiten dar und ignoriert unbekannte XML-Elemente, ohne dass es zu ernsthaften Komplikationen kommt.

• barrierefrei: SVG-Grafiken sind textbasiert und damit maschinenlesbar für Vorlese-Anwendungen (Screenreader) und alle Geräte, die den Quellcode verstehen und wiedergeben können.

• im Quelltext einsehbar: Ist die SVG-Grafik direkt im HTML-Dokument ausgezeichnet, kann man sie problemlos im Programmeditor anpassen und beispielsweise ohne Umwege die Farbe oder Größe ändern.

Die aufgelisteten Vorzüge zeigen, dass Sie als fortschrittlicher Webmaster nur schwer darauf verzichten können, SVGs einzubinden. Die zahlreichen Komplikationen mit verschiedenen Browsern, die jahrelang entscheidende Argumente gegen den Einsatz lieferten, gehören mittlerweile der Vergangenheit an; das Grafikformat scheint also einzig Vorteile für Usability, SEO, Zugänglichkeit usw. zu bedeuten. Doch wie so oft ist auch beim SVG-Format nicht alles Gold, was glänzt. Ein entscheidender Nachteil, der mit Vektorgrafiken einhergeht, ist beispielsweise die eingeschränkte Auswahl an Programmen. Während Sie bei Pixelgrafiken quasi frei aus den verfügbaren, gewöhnlichen Bildbearbeitungsprogrammen wählen können, benötigen Sie für das Erstellen, Speichern und Konvertieren von SVG-Dateien spezifische Tools wie Adobe Illustrator oder Inkscape. In der Konsequenz ist der Einstieg in die Arbeit mit SVG-Grafiken auch komplizierter und zeitintensiver. Ferner lassen sich folgende zwei Nachteile der Grafiksprache anführen:

• hohe Ressourcenanforderungen an den Client: HTML5 hat das Problem notwendiger Plug-ins gelöst, damit aber auch den Rendering-Prozess auf die Browserebene verschoben. Der vermeintliche Vorteil schneller Ladezeiten, die aus der Entlastung des Servers und der geringen Dateigröße resultieren, kann somit schnell ins Gegenteil umschlagen. Verfügt der Computer des Besuchers nicht über die benötigte Rechenleistung, können komplexe Vektorgrafiken im SVG-Format schnell zu einer verzögerten Darstellung der Webpräsenz führen. Um dem Problem entgegenzusteuern, sollte man den SVG-Code optimieren, indem man überflüssige Elemente entfernt.

• begrenzte Anwendungsmöglichkeiten: Wegen der zugrundeliegenden Technologie ist SVG das Maß aller Dinge, wenn es um die Gestaltung und Skalierung von einfachen Grafiken, Logos, Schriftzügen etc. geht. Komplexe Darstellungen, die auch im Nachhinein verändert werden können, lassen sich hingegen nur mithilfe eines kompliziert strukturierten Aufbaus mit klar getrennten Flächen realisieren. Spätestens bei fotorealistischen Grafiken stößt das SVG-Format aufgrund des begrenzten Detailreichtums (Tiefen, Schattierungen, Lichteffekte etc.) an seine Grenzen.

Wenn Sie auf Ihrer Website also komplett auf Vektorgrafiken im SVG-Format setzen wollen, müssen Sie entweder auf sehr komplexe Grafiken verzichten oder diese mühsam erstellen bzw. nachbauen. Planen Sie die Vektorgrafiken daher gezielt dort ein, wo die Technik ihre Stärken hat. Für die Darstellung von komplexeren Grafiken, Bildern und Fotos nutzen Sie einfach weiterhin die bekannten Rastergrafik-Formate.

Da SVG-Inhalte in XML ausgezeichnet werden, unterliegen sie auch den strukturellen und syntaktischen Merkmalen wie jedes andere XML-Dokument: Der Code ist hierarchisch (baumförmig) angeordnet und enthält Elemente und Attribute. Elemente kennzeichnet man mithilfe von Tag-Paaren, die aus einem Start- (<Tag-Name>) und einem End-Tag (</ Tag-Name>) bestehen, oder durch sogenannte Empty-Element-Tags (<Tag-Name />). Attribute enthalten Zusatzinformationen über Elemente und stehen als Schlüsselwort-Werte-Paar innerhalb eines Start- oder Empty-Element-Tags (<Tag-Name Attribut-Name="Attribut-Wert">). Zusätzlich können Anweisungen und Kommentare eingefügt werden. Jedes SVG-XML-Dokument muss genau ein Element auf der obersten Ebene (<svg>) führen, unterhalb derer wiederum beliebig viele weitere Elemente verschachtelt werden können. Optional kann man die Dokumententyp-Definition und XML-Deklaration dazu nutzen, um u. a. Typ, Version und Zeichenkodierung des zugrundeliegenden Dokuments zu definieren.

Um eine solche Grafik im SVG-Format nun in ein Webprojekt einzubinden, benötigen Sie wie erwähnt mittlerweile keine zusätzlichen Plug-ins mehr. Stattdessen können Sie die Vektorgrafiken einfach direkt in das HTML-Dokument einbinden, wobei Ihnen verschiedene Möglichkeiten zur Verfügung stehen:

Das HTML-Element img ist der absolute Standard, um Grafikdateien in eine Website einzubinden. Als Standalone-Element hat es keinen Elementinhalt und kein End-Tag. In HTML fällt darüber hinaus auch der abschließende Schrägstrich (/) weg. Diese Einbindungsart bietet die bekannteste Syntax, weshalb WordPress sie beispielsweise auch automatisch für SVG-Grafiken anwendet. Ist das img-Tag per CSS-Anweisung für ein responsives Design ausgezeichnet, passt sich die Vektorgrafik automatisch an die unterschiedlichen Displaygrößen an, ohne dass weitere Einstellungen notwendig sind. Allerdings haben Sie bei dieser Implementierungsmethode nicht die Möglichkeit, die SVG-Grafik mit einem Link oder einer JavaScript-Anwendung zu verknüpfen. Die passende Codezeile, um SVG mit dem image-Tag einzubinden, sieht in etwa folgendermaßen aus:

Mit dem object-Tag können Sie aktive Inhalte in Ihr Webprojekt einbinden. Neben Java-Applets, Flash-Movies und Excel-Tabellen zählen dazu auch Grafiken im SVG-Format. Anders als beim image-Element haben Sie bei dieser Implementierungsmethode die Möglichkeit, eine Fallback-Lösung einzubinden. Dabei kann es sich um eine Textnachricht oder eine Pixelgrafik handeln, die dem Besucher Ihrer Website angezeigt wird, falls der Browser die SVG-Datei nicht laden kann. Ferner können Sie Formen im Quelltext der Grafikdatei mit Links versehen und Animationen mit JavaScript erstellen. Die object-Methode erfährt allerdings nur selten Unterstützung durch die gängigen Content-Management-Systeme, was ihren Einsatz teilweise etwas kompliziert gestaltet. Der Code für die Einbindung von SVGs mit object-Tag inklusive Fallback-Grafik gestaltet sich wie in dem folgenden Beispiel:

Inline-Frames, besser bekannt unter dem Kurznamen iFrames, sind seit HTML4 verfügbar und werden mittlerweile von jedem Browser unterstützt. Webmaster nutzen diese Elemente in erster Linie, um externe Inhalte anderer Websites wie YouTube-Videos oder Google Maps einzubinden. Ebenso gut können Sie aber auch Dateien im SVG-Format mit dem iframe-Element auf Ihrer Website präsentieren. Wie object-Elemente ermöglichen iFrames die Verknüpfung der Vektorgrafik mit JavaScript und Verlinkungen sowie die Definition eines Ausweichbildes bzw. -textes, falls die SVG-Grafik nicht geladen werden kann. Darüber hinaus sind sie domainübergreifend einsetzbar. Auch wenn gängige Content-Management-Systeme die Technik unterstützen, ist jedoch vor allem die Erstellung eines responsiven Inlineframes mit einem großen Aufwand verbunden. Das folgende Beispiel zeigt den generellen Aufbau eines SVG-iFrames, das bei Kompatibilitätsproblemen eine alternative PNG-Grafik ausspielt:

Sie können eine SVG-Grafik genauso wie eine Pixelgrafik auch per CSS als Hintergrundbild einbinden. Dabei profitieren Sie von der verlustfreien Skalierbarkeit, die mit dem SVG-Format verbunden ist: Der SVG-Hintergrund passt sich automatisch an den Viewport, also den verfügbaren Anzeigebereich des jeweiligen Geräts, an – bei gleichbleibender Qualität. Haben Sie eine Vektorgrafik, die Sie als Hintergrundbild nutzen wollen, erstellen Sie einfach einen entsprechenden div-Container:

Anstatt HTML-Elemente zu verwenden, die auf den externen Ablageort der SVG-Datei verweisen, können Sie die Grafik auch direkt in den HTML-Code einbauen. Dazu benötigen Sie das eigens für SVG-Grafiken vorbehaltene HTML5-Element <svg>. Durch dieses „Inline“-SVG entfällt der Ladeprozess einer externen Datei, während die Vorteile der Veränderbarkeit durch CSS und JavaScript bestehen bleiben. Ferner können Sie auch diese eingebundenen Grafiken mit Verlinkungen versehen. Die Methode birgt jedoch auch einen deutlichen Nachteil gegenüber der Einbindung einer externen Datei: Wenn Sie sehr komplexe SVGs einbinden, verliert Ihr HTML-Dokument aufgrund der zusätzlichen Codezeilen deutlich an Übersichtlichkeit. Sie können diese zwar bestmöglich kürzen, sollten im Zweifelsfall aber bei sehr aufwendig gestalteten Grafiken lieber auf eine Variante mit externer SVG-Datei zurückgreifen. Auch für Grafiken, die mehrmals innerhalb einer einzelnen Seite vorkommen, eignet sich diese Technik weniger gut.

Im folgenden Beispiel haben wir exemplarisch eine kleine SVG-Variante der italienischen Nationalflagge in ein HTML-Grundgerüst eingebunden:

Viele Jahre lang galt das SVG-Format zwar als elegante und wirkungsvolle Alternative zu den in der Webentwicklung verbreiteten Pixelgrafik-Formaten wie PNG, JPEG oder GIF, war jedoch auch mit einem erheblichen Mehraufwand verbunden. Dieser war in erster Linie auf die fehlende Unterstützung einiger gängiger Browser – allen voran Microsofts Internet Explorer – zurückzuführen. Heute ist eine SVG-Datei in den meisten Fällen so schnell eingebunden wie jede andere Bilddatei auch. Für viele visuelle Elemente eines Webprojekts stellen die Vektorgrafiken eine exzellente Wahl dar: So überzeugen sie u. a. als responsive und barrierefreie Icons, Buttons, Logos und Schriftzüge, die man zu jedem Zeitpunkt problemlos anpassen kann.

Während die Arbeit mit fertigen Grafiken im SVG-Format auch dank der zahlreichen Einbindungsvarianten und entsprechenden Funktionen gängiger Content-Management-Systeme heute also selbst für unerfahrene Webentwickler zu meistern ist, erfordert die Gestaltung der Vektor-Formen auch weiterhin eine Menge Know-how. Sie benötigen nicht nur die richtigen Tools, sondern auch Erfahrung im Umgang mit Vektoren, um das Maximum aus den verlustfrei skalierenden Grafiken herauszuholen. Mit gesundem Ehrgeiz und der richtigen Idee werden Sie dennoch innerhalb kürzester Zeit von den Vorteilen der nützlichen Auszeichnungssprache profitieren können.