SVG-Format: So binden Sie die Gra­fik­da­tei­en in Ihre Website ein

1998 lagen dem World Wide Web Con­sor­ti­um (W3C) gleich zwei po­ten­zi­el­le Kan­di­da­ten für den Standard einer Aus­zeich­nungs­spra­che für zwei­di­men­sio­na­le Vek­tor­gra­fi­ken auf XML-Basis vor: Während u. a. Microsoft und Macro­me­dia (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 ver­ab­schie­den und diese statt­des­sen zu­sam­men­zu­füh­ren. Am 4. September 2001 ver­öf­fent­lich­te man das Ergebnis in einer Re­com­men­da­ti­on (dt. „Emp­feh­lung“) unter dem Namen Scalable Vector Graphics (SVG) 1.0 Spe­ci­fi­ca­ti­on. Mit seiner Vor­ge­hens­wei­se konnte das W3C nicht alle Be­tei­lig­ten zu­frie­den­stel­len, und so setzte Microsoft in seinen An­wen­dun­gen 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 emp­foh­le­nen Spe­zi­fi­ka­ti­on für die Be­schrei­bung zwei­di­men­sio­na­ler Vek­tor­gra­fi­ken machte, galt die XML-Sprache als optimale Lösung zur Dar­stel­lung solcher Grafiken, sogar in ani­mier­ter Form. Da die damaligen Browser al­ler­dings noch nicht für das neue SVG-Format bereit waren bzw. – im Falle des Internet Explorers – es lange Zeit ver­wei­ger­ten, waren externe Plug-ins wie der Adobe SVG Viewer oder das Batik SVG Toolkit von Apache zwingend er­for­der­lich, um die in XML ge­schrie­be­nen Grafiken lesen und dar­stel­len zu können. Al­ter­na­tiv musste man als Webmaster für PNG-Grafiken als Fallback-Lösung sorgen.

Seit Web­brow­ser HTML5 be­herr­schen, sind derartige Maßnahmen nicht mehr nötig: Der in HTML5 in­te­grier­te Parser macht es möglich, SVG-Elemente direkt in den HTML-Code ein­zu­bau­en, ohne den XML-Na­mens­raum anzugeben, der dem in­ter­pre­tie­ren­den Browser für ge­wöhn­lich den Kontext der ein­ge­bun­de­nen Elemente verrät. Damit entfällt auch die Not­wen­dig­keit eines spe­zi­fi­schen Parsers, wie ihn erwähnte Plug-ins enthalten.

Anders als Raster-/Pi­xel­gra­fi­ken zeichnen sich Grafiken im SVG-Format generell dadurch aus, dass sie die einzelnen gra­fi­schen Objekte eines Bildes aus ma­the­ma­ti­scher Sicht be­schrei­ben und nicht in ein Pi­xel­ras­ter einordnen. Aus diesem Grund lassen sich mithilfe von Scalable Vector Graphics ins­be­son­de­re geo­me­tri­sche Formen, Icons, tech­ni­sche Zeich­nun­gen, Schriften, Icons und Logos ohne Qua­li­täts­ver­lust skalieren, wobei sie nicht den für Ras­ter­gra­fi­ken typischen Treppen- oder Alias-Effekt zeigen, bei dem einzelne Pixel zum Vorschein treten. In unserem Ratgeber zum Thema erfahren Sie alles über Un­ter­schie­de zwischen Pixel- und Vek­tor­gra­fi­ken.

Spä­tes­tens seit der Wei­ter­ent­wick­lung der In­ter­net­brow­ser kommt SVG in HTML-Do­ku­men­ten immer häufiger zum Einsatz, woran auch das Re­spon­si­ve Webdesign einen großen Anteil hat: Die Vek­tor­gra­fi­ken punkten beim Design geräte- und dis­play­über­grei­fen­der Web­pro­jek­te vor allem mit ihrer erst­klas­si­gen Ska­lie­rungs­fä­hig­keit. Das ist jedoch längst nicht der einzige Be­weg­grund, SVG bei der gra­fi­schen Ge­stal­tung der eigenen Website zu verwenden, wie die folgende Auf­lis­tung ein­drucks­voll unter Beweis stellt:

• geringe Da­tei­grö­ße: SVG-Grafiken zeichnen sich – von sehr kom­pli­zier­ten Gebilden einmal abgesehen – durch eine sehr geringe Da­tei­grö­ße aus, die auch bei einer Ver­grö­ße­rung der Grafik bestehen bleibt. Un­ab­hän­gig von den Geräten, die auf die Bild­da­tei­en zugreifen, ist eine stabile und schnelle Per­for­mance des Servers also gewährt. Die daraus re­sul­tie­ren­de geringe Ladezeit der Bilder wirkt sich wiederum auf das Such­ma­schi­nen­ran­king aus.

• Open Source: Das W3C hat SVG als freien Standard kreiert, weshalb Sie die Aus­zeich­nungs­spra­che ohne Ein­schrän­kun­gen nutzen können – platt­form­über­grei­fend und in Kom­bi­na­ti­on mit anderen XML-Sprachen.

• ver­schie­den­ar­tig ani­mier­bar: SVG-Elemente können auf ver­schie­de­ne Weisen animiert werden. Dafür kann die W3C-eigene Sprache SMIL (Syn­chro­ni­zed Mul­ti­me­dia In­te­gra­ti­on Language) verwendet werden, deren Wei­ter­ent­wick­lung aber mitt­ler­wei­le ein­ge­stellt ist. Zudem ist SMIL niemals in den Internet Explorer und Edge im­ple­men­tiert worden und soll eventuell auch in künftigen Chrome-Versionen nicht mehr un­ter­stützt werden. Üblicher ist daher die Animation mit Ja­va­Script, wenn Sie SVG-Elemente bei­spiels­wei­se auf Events wie Nut­zer­klicks oder Maus­be­we­gun­gen reagieren lassen wollen. Eine dritte (ein­ge­schränk­te) Option stellen die CSS-Ei­gen­schaf­ten „animation“ und „motion-path“ dar, die aber ebenfalls eine eher schwache Brow­ser­un­ter­stüt­zung vor­zu­wei­sen haben.

• mit CSS for­ma­tier­bar: Grafiken im SVG-Format können mit der Style­sheet-Sprache CSS ma­ni­pu­liert werden. So lassen sich alle Prä­sen­ta­ti­ons­at­tri­bu­te wie Farben, Filter, Schrift­art 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 Kom­pa­ti­bi­li­tät: Dass sich die Funk­tio­nen der un­ter­schied­li­chen Parser stark von­ein­an­der un­ter­schei­den, hat nur wenig Einfluss auf das Rendering der Grafiken, denn das SVG-Format ist sowohl abwärts- als auch auf­wärts­kom­pa­ti­bel. Im Ergebnis stellt jeder Browser das ent­spre­chen­de Bild nach den eigenen Mög­lich­kei­ten dar und ignoriert un­be­kann­te XML-Elemente, ohne dass es zu ernst­haf­ten Kom­pli­ka­tio­nen kommt.

• bar­rie­re­frei: SVG-Grafiken sind text­ba­siert und damit ma­schi­nen­les­bar für Vorlese-An­wen­dun­gen (Screen­rea­der) und alle Geräte, die den Quellcode verstehen und wie­der­ge­ben können.

• im Quelltext einsehbar: Ist die SVG-Grafik direkt im HTML-Dokument aus­ge­zeich­net, kann man sie pro­blem­los im Pro­gramm­edi­tor anpassen und bei­spiels­wei­se ohne Umwege die Farbe oder Größe ändern.

Die auf­ge­lis­te­ten Vorzüge zeigen, dass Sie als fort­schritt­li­cher Webmaster nur schwer darauf ver­zich­ten können, SVGs ein­zu­bin­den. Die zahl­rei­chen Kom­pli­ka­tio­nen mit ver­schie­de­nen Browsern, die jahrelang ent­schei­den­de Argumente gegen den Einsatz lieferten, gehören mitt­ler­wei­le der Ver­gan­gen­heit an; das Gra­fik­for­mat scheint also einzig Vorteile für Usability, SEO, Zu­gäng­lich­keit usw. zu bedeuten. Doch wie so oft ist auch beim SVG-Format nicht alles Gold, was glänzt. Ein ent­schei­den­der Nachteil, der mit Vek­tor­gra­fi­ken ein­her­geht, ist bei­spiels­wei­se die ein­ge­schränk­te Auswahl an Pro­gram­men. Während Sie bei Pi­xel­gra­fi­ken quasi frei aus den ver­füg­ba­ren, ge­wöhn­li­chen Bild­be­ar­bei­tungs­pro­gram­men wählen können, benötigen Sie für das Erstellen, Speichern und Kon­ver­tie­ren von SVG-Dateien spe­zi­fi­sche Tools wie Adobe Il­lus­tra­tor oder Inkscape. In der Kon­se­quenz ist der Einstieg in die Arbeit mit SVG-Grafiken auch kom­pli­zier­ter und zeit­in­ten­si­ver. Ferner lassen sich folgende zwei Nachteile der Gra­fik­spra­che anführen:

• hohe Res­sour­cen­an­for­de­run­gen an den Client: HTML5 hat das Problem not­wen­di­ger Plug-ins gelöst, damit aber auch den Rendering-Prozess auf die Brow­ser­ebe­ne ver­scho­ben. Der ver­meint­li­che Vorteil schneller La­de­zei­ten, die aus der Ent­las­tung des Servers und der geringen Da­tei­grö­ße re­sul­tie­ren, kann somit schnell ins Gegenteil um­schla­gen. Verfügt der Computer des Besuchers nicht über die benötigte Re­chen­leis­tung, können komplexe Vek­tor­gra­fi­ken im SVG-Format schnell zu einer ver­zö­ger­ten Dar­stel­lung der Web­prä­senz führen. Um dem Problem ent­ge­gen­zu­steu­ern, sollte man den SVG-Code op­ti­mie­ren, indem man über­flüs­si­ge Elemente entfernt.

• begrenzte An­wen­dungs­mög­lich­kei­ten: Wegen der zu­grun­de­lie­gen­den Tech­no­lo­gie ist SVG das Maß aller Dinge, wenn es um die Ge­stal­tung und Ska­lie­rung von einfachen Grafiken, Logos, Schrift­zü­gen etc. geht. Komplexe Dar­stel­lun­gen, die auch im Nach­hin­ein verändert werden können, lassen sich hingegen nur mithilfe eines kom­pli­ziert struk­tu­rier­ten Aufbaus mit klar ge­trenn­ten Flächen rea­li­sie­ren. Spä­tes­tens bei fo­to­rea­lis­ti­schen Grafiken stößt das SVG-Format aufgrund des be­grenz­ten De­tail­reich­tums (Tiefen, Schat­tie­run­gen, Licht­ef­fek­te etc.) an seine Grenzen.

Wenn Sie auf Ihrer Website also komplett auf Vek­tor­gra­fi­ken im SVG-Format setzen wollen, müssen Sie entweder auf sehr komplexe Grafiken ver­zich­ten oder diese mühsam erstellen bzw. nachbauen. Planen Sie die Vek­tor­gra­fi­ken daher gezielt dort ein, wo die Technik ihre Stärken hat. Für die Dar­stel­lung von kom­ple­xe­ren Grafiken, Bildern und Fotos nutzen Sie einfach weiterhin die bekannten Ras­ter­gra­fik-Formate.

Da SVG-Inhalte in XML aus­ge­zeich­net werden, un­ter­lie­gen sie auch den struk­tu­rel­len und syn­tak­ti­schen Merkmalen wie jedes andere XML-Dokument: Der Code ist hier­ar­chisch (baum­för­mig) an­ge­ord­net und enthält Elemente und Attribute. Elemente kenn­zeich­net man mithilfe von Tag-Paaren, die aus einem Start- (<Tag-Name>) und einem End-Tag (</ Tag-Name>) bestehen, oder durch so­ge­nann­te Empty-Element-Tags (<Tag-Name />). Attribute enthalten Zu­satz­in­for­ma­tio­nen über Elemente und stehen als Schlüs­sel­wort-Werte-Paar innerhalb eines Start- oder Empty-Element-Tags (<Tag-Name Attribut-Name="Attribut-Wert">). Zu­sätz­lich können An­wei­sun­gen und Kom­men­ta­re 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 ver­schach­telt werden können. Optional kann man die Do­ku­men­ten­typ-De­fi­ni­ti­on und XML-De­kla­ra­ti­on dazu nutzen, um u. a. Typ, Version und Zei­chen­ko­die­rung des zu­grun­de­lie­gen­den Dokuments zu de­fi­nie­ren.

Um eine solche Grafik im SVG-Format nun in ein Web­pro­jekt ein­zu­bin­den, benötigen Sie wie erwähnt mitt­ler­wei­le keine zu­sätz­li­chen Plug-ins mehr. Statt­des­sen können Sie die Vek­tor­gra­fi­ken einfach direkt in das HTML-Dokument einbinden, wobei Ihnen ver­schie­de­ne Mög­lich­kei­ten zur Verfügung stehen:

Das HTML-Element img ist der absolute Standard, um Gra­fik­da­tei­en in eine Website ein­zu­bin­den. Als Stan­da­lo­ne-Element hat es keinen Ele­ment­in­halt und kein End-Tag. In HTML fällt darüber hinaus auch der ab­schlie­ßen­de Schräg­strich (/) weg. Diese Ein­bin­dungs­art bietet die be­kann­tes­te Syntax, weshalb WordPress sie bei­spiels­wei­se auch au­to­ma­tisch für SVG-Grafiken anwendet. Ist das img-Tag per CSS-Anweisung für ein re­spon­si­ves Design aus­ge­zeich­net, passt sich die Vek­tor­gra­fik au­to­ma­tisch an die un­ter­schied­li­chen Dis­play­grö­ßen an, ohne dass weitere Ein­stel­lun­gen notwendig sind. Al­ler­dings haben Sie bei dieser Im­ple­men­tie­rungs­me­tho­de nicht die Mög­lich­keit, die SVG-Grafik mit einem Link oder einer Ja­va­Script-Anwendung zu ver­knüp­fen. Die passende Codezeile, um SVG mit dem image-Tag ein­zu­bin­den, sieht in etwa fol­gen­der­ma­ßen aus:

Mit dem object-Tag können Sie aktive Inhalte in Ihr Web­pro­jekt 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 Im­ple­men­tie­rungs­me­tho­de die Mög­lich­keit, eine Fallback-Lösung ein­zu­bin­den. Dabei kann es sich um eine Text­nach­richt oder eine Pi­xel­gra­fik 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 Gra­fik­da­tei mit Links versehen und Ani­ma­tio­nen mit Ja­va­Script erstellen. Die object-Methode erfährt al­ler­dings nur selten Un­ter­stüt­zung durch die gängigen Content-Ma­nage­ment-Systeme, was ihren Einsatz teilweise etwas kom­pli­ziert gestaltet. Der Code für die Ein­bin­dung 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 mitt­ler­wei­le von jedem Browser un­ter­stützt. Webmaster nutzen diese Elemente in erster Linie, um externe Inhalte anderer Websites wie YouTube-Videos oder Google Maps ein­zu­bin­den. Ebenso gut können Sie aber auch Dateien im SVG-Format mit dem iframe-Element auf Ihrer Website prä­sen­tie­ren. Wie object-Elemente er­mög­li­chen iFrames die Ver­knüp­fung der Vek­tor­gra­fik mit Ja­va­Script und Ver­lin­kun­gen sowie die De­fi­ni­ti­on eines Aus­weich­bil­des bzw. -textes, falls die SVG-Grafik nicht geladen werden kann. Darüber hinaus sind sie do­main­über­grei­fend ein­setz­bar. Auch wenn gängige Content-Ma­nage­ment-Systeme die Technik un­ter­stüt­zen, ist jedoch vor allem die Er­stel­lung eines re­spon­si­ven In­line­frames mit einem großen Aufwand verbunden. Das folgende Beispiel zeigt den ge­ne­rel­len Aufbau eines SVG-iFrames, das bei Kom­pa­ti­bi­li­täts­pro­ble­men eine al­ter­na­ti­ve PNG-Grafik ausspielt:

Sie können eine SVG-Grafik genauso wie eine Pi­xel­gra­fik auch per CSS als Hin­ter­grund­bild einbinden. Dabei pro­fi­tie­ren Sie von der ver­lust­frei­en Ska­lier­bar­keit, die mit dem SVG-Format verbunden ist: Der SVG-Hin­ter­grund passt sich au­to­ma­tisch an den Viewport, also den ver­füg­ba­ren An­zei­ge­be­reich des je­wei­li­gen Geräts, an – bei gleich­blei­ben­der Qualität. Haben Sie eine Vek­tor­gra­fik, die Sie als Hin­ter­grund­bild nutzen wollen, erstellen Sie einfach einen ent­spre­chen­den 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 vor­be­hal­te­ne HTML5-Element <svg>. Durch dieses „Inline“-SVG entfällt der La­de­pro­zess einer externen Datei, während die Vorteile der Ver­än­der­bar­keit durch CSS und Ja­va­Script bestehen bleiben. Ferner können Sie auch diese ein­ge­bun­de­nen Grafiken mit Ver­lin­kun­gen versehen. Die Methode birgt jedoch auch einen deut­li­chen Nachteil gegenüber der Ein­bin­dung einer externen Datei: Wenn Sie sehr komplexe SVGs einbinden, verliert Ihr HTML-Dokument aufgrund der zu­sätz­li­chen Code­zei­len deutlich an Über­sicht­lich­keit. Sie können diese zwar best­mög­lich kürzen, sollten im Zwei­fels­fall aber bei sehr aufwendig ge­stal­te­ten Grafiken lieber auf eine Variante mit externer SVG-Datei zu­rück­grei­fen. Auch für Grafiken, die mehrmals innerhalb einer einzelnen Seite vorkommen, eignet sich diese Technik weniger gut.

Im folgenden Beispiel haben wir ex­em­pla­risch eine kleine SVG-Variante der ita­lie­ni­schen Na­tio­nal­flag­ge in ein HTML-Grund­ge­rüst ein­ge­bun­den:

Viele Jahre lang galt das SVG-Format zwar als elegante und wir­kungs­vol­le Al­ter­na­ti­ve zu den in der Web­ent­wick­lung ver­brei­te­ten Pi­xel­gra­fik-Formaten wie PNG, JPEG oder GIF, war jedoch auch mit einem er­heb­li­chen Mehr­auf­wand verbunden. Dieser war in erster Linie auf die fehlende Un­ter­stüt­zung einiger gängiger Browser – allen voran Mi­cro­softs Internet Explorer – zu­rück­zu­füh­ren. Heute ist eine SVG-Datei in den meisten Fällen so schnell ein­ge­bun­den wie jede andere Bilddatei auch. Für viele visuelle Elemente eines Web­pro­jekts stellen die Vek­tor­gra­fi­ken eine ex­zel­len­te Wahl dar: So über­zeu­gen sie u. a. als re­spon­si­ve und bar­rie­re­freie Icons, Buttons, Logos und Schrift­zü­ge, die man zu jedem Zeitpunkt pro­blem­los anpassen kann.

Während die Arbeit mit fertigen Grafiken im SVG-Format auch dank der zahl­rei­chen Ein­bin­dungs­va­ri­an­ten und ent­spre­chen­den Funk­tio­nen gängiger Content-Ma­nage­ment-Systeme heute also selbst für un­er­fah­re­ne Web­ent­wick­ler zu meistern ist, erfordert die Ge­stal­tung 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 ver­lust­frei ska­lie­ren­den Grafiken her­aus­zu­ho­len. Mit gesundem Ehrgeiz und der richtigen Idee werden Sie dennoch innerhalb kürzester Zeit von den Vorteilen der nütz­li­chen Aus­zeich­nungs­spra­che pro­fi­tie­ren können.