SELFHTML Weblog - Ergänzung zur Dokumentation Übersicht

Seit 15 Jahren gilt SVG als das nächste große Ding im Webdesign. In einer Serie soll kurz vorgestellt werden, warum so große Hoffnungen in SVG gesetzt wurden und wie Sie SVG in Ihren Projekten einsetzen können.

SVG ist die Abkürzung für skalierbare Vektorgrafiken (Scalable Vector Graphics), die vom W3C 2001 als Alternative zu proprietären Entwürfen entwickelt wurde. Grundlegende Schwäche der Vergangenheit, die den schnellen Durchbruch verhinderte, war die mangelnde Browserunterstützung, die den Einsatz von externen Plugins notwendig machte. Mittlerweile kann SVG aber in allen Browsern (IE9+) problemlos eingesetzt werden.

Einbindung

SVG-Grafiken können entweder inline innerhalb eines svg-Elements an jeder Stelle einer HTML5-Webseite eingebunden oder auch als eigene Grafikdatei durch ein img- oder object-Element referenziert werden.

<svg width="300" height="200" viewBox="0 0 3 2">
  ...
</svg>

Durch die direkte Einbindung ist die SVG-Grafik Teil des Dokuments und kann mit CSS gestaltet werden. IDs innerhalb der Grafik können als interne Anker genutzt werden; aus der Grafik kann ebenfalls auf andere Anker verlinkt werden.

<img src="Self-Logo.svg" alt="self-Logo">
<object data="Self-Logo.svg" type="image/svg+xml">
<!-- Fallback -->
Ihr Browser kann leider kein SVG darstellen.
Diese Grafik zeigt das Self-Logo.
</object>

Während die Einbindung mit dem img-Element möglich ist, bietet die Einbindung als Multimedia-Objekt die Möglichkeit, bei :hover oder :focus CSS-Eigenschaften zu verändern.

Vorteile

Verlustfreie Vergrößerung

SVG bietet als XML-Dialekt ein Set von Elementen, um geometrische Grundformen, Polygone und unregelmäßige Pfade mit Linien und Kurven zu zeichnen und dann mit Farben, Verläufen und frei definierbaren Mustern zu füllen. Diese Vektorgrafiken können im Unterschied zu Rastergrafiken beliebig skaliert werden und bleiben dabei immer gestochen scharf, was sie für responsives Webdesign prädestiniert.

<svg width="300" height="200" viewBox="0 0 3 2">
  <desc>Flagge Frankreichs</desc>
  <rect x="0" y="0" width="1" height="2" fill="#0055A4" />
  <rect x="1" y="0" width="1" height="2" fill="white" />
  <rect x="2" y="0" width="1" height="2" fill="#EF4531" />
</svg>

Diese Grafik ist eigentlich nur 2 Pixel hoch und 3 Pixel breit, wird durch die viewBox aber auf die gewünschte Größe skaliert - ohne jeden Qualitätsverlust!

Gestaltung durch CSS

Die Präsentationsattribute können bequem mit CSS festgelegt werden. Wie in diesem Beispiel werden Icons aus verschiedenen Grundformen gebildet und mit CSS gestaltet.

<a href="" xlink:href="">
  <desc>Icon für Home-Button</desc>
    <rect class="background" x="1" y="1" width="59" height="59" />
    <rect x="10" y="35" width="40" height="24" fill="#ccc" />
    <rect x="40" y="15" width="5" height="15" fill="black"/>
    <path d="M8,35 l22,-20 l22,20 z" fill="#c32e04" />
    <rect x="15" y="45" width="8" height="14" class="window" />
    <rect x="35" y="45" width="8" height="8" class="window" />
</a>

Animation und Hover-Effekte

Mit SVG sind auch Hovereffekte und kleine Animationen möglich. Während der SVG-eigene Standard SMIL (mehr darüber in Teil 3) vom IE und bald auch Chrome nicht unterstützt wird, sind aber in allen modernen Browsern CSS-Animationen möglich:

a > .background {
  fill: none;
}
a:hover > .background,
a:focus > .background {
fill: #fffbf0;
stroke: #e7c157;
stroke-width:1;
}

Bei :hover oder :focus verändert sich der Hintergrund, sodass schnell klar ist, welcher Link im Fokus ist. Um dies zu erreichen, wird der Grafik ein Rechteck mit der Klasse .background in den gewünschten Dimensionen untergelegt. Normalerweise ist es transparent - bei :hover und :focus erhält es eine gelbe Füllung, die als Hintergrund für das Icon wirkt.

Zugänglichkeit

Allein, dass die Grundformen sprechende Namen haben ist ein Vorteil gegenüber Rastergrafiken. Darüber hinaus können Sie aber den Code durch Angabe von zugänglichen Metaddaten innerhalb von title- und desc-Elementen (description - engl. für Beschreibung) für Menschen mit Seheinschränkungen zugänglich machen.

<svg>
  <title>aussagekäftiger Titel</title>
  <defs>
    <desc>Definitionsabschnitt mit Verläufen und Mustern</desc>
    ... 

Einsatzbereiche

Die Skalierbarkeit und die Möglichkeit der Gestaltung durch CSS sind perfekt für den Einsatz als responsive Icons, die Sie mit CSS farbig gestalten gestalten können.

Auch wenn Image-Replacement ein wenig aus der Mode gekommen ist, können Sie Ihre Überschriften durch SVG-Texte mit extravaganten Muster- und Filtereffekten ersetzen - die Texte sind natürlich weiterhin kopierbar und von Suchmaschinen indizierbar.

Die Verbindung von Vektorgrafiken und Text bei SVG-Grafiken eignet sich besonders für Infografiken und Datenvisualisierungen, für die es mit d3.js (Data Driven documents) und Raphael bereits mächtige Frameworks gibt.

Weiterhin ist die Einbindung von Rastergrafiken möglich, die dann mit Masken, Beschneidungen und Filter vielfach verändert werden können. Eine weitere Einsatzmöglichkeit bietet sich hier bei responsiven Imagemaps, bei denen die Rastergrafiken mit verweis-sensitiven SVG-Formen unterlegt werden, die dann auf andere Seiten verlinken.

Im Selfhtml-Wiki finden Sie eine umfangreiche SVG-Dokumentation mit vielen Tutorials aus Anwendung und Praxis, sowie für den schnellen Überblick aktuelle Referenz-Tabellen für alle Elemente und Attribute.

Der nächste Teil der Serie setzt sich mit den Neuerungen von SVG 2, das vom W3C nächstes Jahr endgültig verabschiedet werden soll, auseinander. Weitere Teile behandeln Animationen in SVG, Infografiken und Datenvisualisierungen.