Scalable Vector Graphics

Mehr als Logos und Icons

Vektorgrafiken werden immer häufiger im Web eingesetzt. Allerdings beschränkt sich das oft noch darauf, Logos oder Icons einzubauen. Dabei verfügen SVG über eine ganze Reihe nützlicher Funktionen, die Webworker noch lange nicht ausgereizt haben. Zum Beispiel bietet uns Text in SVG Möglichkeiten, die uns über reines CSS nicht zur Verfügung stehen.

Dank SVG gibt es einen Webstandard, mit dem wir Logos, Illustrationen und Infografiken als echte Vektorgrafiken im Web abbilden können. Der Vorteil ist natürlich, dass sich die Grafiken verlustfrei skalieren lassen. Als grundlegende Formen stehen uns zur Verfügung:

rect

für ein Rechteck,

circle

für einen Kreis,

ellipse

für eine Ellipse,

line

zieht eine Linie zwischen zwei Punkten,

polyline

zieht eine Linie von Punkt zu Punkt zu Punkt…,

polygon

ist ähnlich zu polyline, nur werden hier der erste und der letzte Punkt miteinander verbunden,

path

für eine beliebige Form.

Text in SVG

Neben diesen Formen ist es auch möglich, über das text-Element reinen Text zu setzen. Um diesen Text zu stylen, habt ihr mehrere Möglichkeiten. Dabei müsst ihr beachten, dass sich die Eigenschaften von den üblichen CSS-Text-Eigenschaften teilweise etwas unterscheiden. Statt color setzt ihr eine Textfarbe etwa über fill.

Das SVG lässt sich nun als echte Überschrift beispielsweise in eine h1 packen. Der Text kann ganz normal markiert und kopiert werden.

Das Beispiel oben ist in dieser Form natürlich sinnfrei. Nützlich wird das Konstrukt erst, wenn andere Fähigkeiten von SVG ins Spiel kommen. Zum Beispiel könnt ihr den Text mit einer Outline versehen.

Neben der durchgezogenen Linie bieten SVG weitere Optionen für die Outline. Mit stroke-dasharray legt ihr etwa Muster fest. Die Eigenschaft erwartet immer paarweise zwei Werte, die für gesetzte Pixel und Lücken stehen. Ein stroke-dasharray: 20 4 10 4 sorgt etwa für 20 Pixel Linie, 4 Pixel Lücke, 10 Pixel Linie, 4 Pixel Lücke.

Das funktioniert ebenfalls in allen modernen Browsern, allerdings nervt die Darstellung im Opera etwas. Solange sich die Outline eines Buchstabens mit einer einzigen Linie darstellen lässt, ist alles in Ordnung (etwa bei einem W). Sobald aber zwei getrennte Linien gezogen werden müssen (z.B. bei einem o) verbindet Opera diese beiden Linien, was zu einem falsch gesetzten Strich führt.

Gehen wir einen Schritt weiter und versuchen es mit einer CSS-Animation. Zum Beispiel können wir das stroke-dasharray per @keyframes von 0 500 auf 500 0 verändern. Als Ergebnis werden die Buchstaben des Textes gleichzeitig gemalt. Am Ende bleibt der Text einen Moment stehen (weil die 500 etwas über die benötigte Länge hinaus gehen). Die Animation funktioniert direkt allerdings nur im Firefox. Mit Browser-Prefixes auch in Chrome. Im IE, Safari und Opera sehen Besucher die durchgezogene Linie ohne Animation.

Neben stroke-dasharray gibt es auch stroke-dashoffset, das festlegt, an welcher Stelle mit dem dasharray begonnen werden soll. So könnten wir etwa mit der Lücke anfangen. Wenn die beiden Werte aufeinander abgestimmt werden, lässt sich auch der stroke-dashoffset animieren, so dass sich die Linien der Outline gleichmäßig bewegen. Auch hier ist die Animation auf Firefox und (mit Prefix) Chrome beschränkt. Die anderen Browser zeigen die statische Outline.

In Kombination mit einem textPath folgt Text einem beliebigen Pfad. Das wiederum funktioniert in allen modernen Browsern.

Links in SVG

Neben Text ist es auch erlaubt, übliche Links in SVG-Dateien einzusetzen. Allerdings müsst ihr das Attribut href hier durch xlink:href ersetzen. Das Schöne daran: Die Links verhalten sich wie gewöhnliche Links außerhalb eines SVG. Sie können also mit Pseudoklassen wie :hover, :focus und :target angesprochen werden und bekommen auch den Fokus, wenn ein Nutzer durch die Website tabbt.

Das lässt sich ideal in Infografiken verwenden. Mit richtig genutzten Links ist die Infografik für Tastaturnutzer besser bedienbar. Und durch den Einsatz von :target ist es möglich, Deep Links auf bestimmte Informationen innerhalb der Infografik zu setzen. Ein nettes Extra: In der Deutschlandkarte sind die Länder als Pfade innerhalb eines Links eingebunden. Die Linkfläche orientiert sich nun am tatsächlichen Pfad, nicht etwa an einem Rechteck um den Pfad herum.

Bei der Infografik sind einige Dinge zu beachten:

Innerhalb eines SVG können Elemente nicht mit z-index nach vorne geholt werden. Es gilt die Reihenfolge, in der die Elemente in dem SVG stehen. Deshalb müssen erst die 16 Länder gezeichnet werden, danach folgen die 16 Infokästen. Um :target zu nutzen, steckt der Umriss des Landes bereits in einem Link mit der id des Landes (#berlin). Die Infos zu einem Land sind in einem g-Element gruppiert, das die Klasse des Landes trägt (.berlin). Dann können wir die Klasse über den general sibling combinator ~ ansprechen.

Bewegt ein Nutzer die Maus über einen Land, erscheint der Infokasten. Bewegt er die Maus nun über den Kasten, verliert das Land den :hover-Status und der Infokasten verschwindet. Das führt zu einem lästigen Flackern des Infokastens. Abhilfe schafft der Tipp von Sascha Postner zu Pointer-Events.

Bei solchen interaktiven SVG kommt es darauf an, wie diese jeweils ins HTML-Dokument eingebunden sind. Über das img-Element wird das SVG zwar angezeigt, ist aber nicht interaktiv. Als object-Element oder in einem iframe funktionieren die Zustände der Pseudoklassen, doch die URL ändert sich nicht, was aber sinnvoll sein kann, wenn ihr Nutzern den Deep Link zugänglich machen möchtet. Für dieses Beispiel ist es also am besten, das SVG direkt in die HTML-Datei zu schreiben.

HTML in SVG

Die SVG-Beispiele oben mit reinem Text lassen sich noch in andere HTML-Elemente einsetzen, damit der Text eine semantische Bedeutung bekommt. Was aber, wenn das SVG mehrere Texte enthält, die semantisch unterschiedlich ausgezeichnet werden müssten? Zum Beispiel für erklärende Texte innerhalb einer Infografik? Für diesen Fall gibt es das foreignObject-Element, das HTML innerhalb eines SVG erlaubt.

Das klappt in allen modernen Browsern, allerdings nicht im Internet Explorer. Hier habt ihr zwei Möglichkeiten. Zum einen könnt ihr das switch-Element benutzen, um verschiedene Inhalte auszugeben. Zum anderen besteht natürlich auch hier die Möglichkeit, Conditional Comments einsetzen, wenn es nur darum geht, dem IE andere Inhalte zu liefern.

Kleine Korrektur nach dem Kommentar von Florence: Für die IE9+ könnt ihr das switch-Element einsetzen, um verschiedene Inhalte auszugeben. Statt des Attributs requiredExtensions müsst ihr allerdings das Attribut requiredFeatures nutzen. Für den IE8 wird auch hier ein Conditional Comment die beste Lösung sein.

SVG bieten noch viele anderen Eigenschaften, die sich an der einen oder anderen Stelle lohnen können. Zum Beispiel Animationen mit SMIL oder via snap.svg, Muster, Gradienten, Masken und Filter. Die Optionen sind zahlreich und sicher auch nicht ausgereizt. Leider nützen euch bei den Details die allgemeinen Infos auf Can I use nicht mehr viel, und es gilt, die benötigten Funktionen selbst in den Browsern zu testen. Zum Einarbeiten in SVG gibt es ein paar gute Anlaufstellen:

• Der »Pocket Guide to Writing SVG« von Joni Trythall gibt einen guten ersten Einblick. Das Büchlein könnt ihr mittlerweile kostenlos bekommen.
• Das SVG Tutorial von Jakob Jenkov enthält einige Aspekte, die im Pocket Guide fehlen.
• Generell alle Artikel von Sara Soueidan zum Thema SVG.
• Wer den Effekt des langsamen Zeichnens mag, kann zum Beispiel vivus.js dafür einsetzen.
• Und ein schönes Beispiel, was mit SVG (und viel Arbeit) möglich ist. Das digitale Pop-Up-Buch zum Beercamp 2012 von nclud.