SVG Grundlage

Mit HTML 5 werden außerdem diverse weitere Technologien verbessert. Neben CSS 3 und ECMA 5 (Javascript) scheint das schon fast abgeschriebene skalierbare Vektorformat SVG wieder Einzug in die Browser zui halten. Derzeit unterstützen leider noch nicht alle Browser alle SVG Features, aber es ist abzusehen, dass Flash weitere Konkurrenz bekommt.

SVG Grundlage

Für SVG Grafiken existieren viele grafische Editoren (umsonst und sehr umfangreich: www.inkscape.org), da das Format jedoch auf XML basiert, kann man einfache Grafiken auch mit einem Texteditor erstellen.

Die folgende Grafik soll als Beispiel dienen. Man sieht schön die Stärke des Formats, auch beim Vergrößern ist das Bild gestochen scharf. (Hinweis: sollte die Meldung erscheinen, dass der verwendete Browser keine SVG Grafiken unterstützt, so kann ich nur zu einem Browser Update raten)

Hier ist der Quelltext der Grafik-Datei, kopiert man dies in eine Textdatei und speichert diese mit der Dateiendung svg ab, erhält man das obige Bild eines Dokumenten Icons:

<?xml version="1.0" encoding="utf-8"?>
<svg  xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 viewBox="0 0 20 30" stroke-width="1">
<defs>
 <radialGradient id="grad1" gradientUnits="userSpaceOnUse" cx="0%" cy="0%" r="200%">
 <stop stop-color="#FFFFFF" offset="0"/>
 <stop stop-color="#CCCCCC" offset="1"/>
 </radialGradient>
</defs>
<g>
 <path d="m1,1,12,0,6,9,0,20,-18,0z" fill="url(#grad1)" stroke="#CCCCCC"/>
 <path d="m4,7 h8 m-8,3 h8 m-8,6 h12 m-12,3 h12 m-12,3 h12 m-12,3 h12" fill="#FFFFFF" stroke="#999999"/>
</g>
</svg>

Wie man sieht, ist der Aufbau sehr simpel. Im <svg ...>-Tag ist vor allem die Angabe der viewBox notwendig, ansonsten funktioniert das verlustfreie skalieren der Grafik nämlich nicht. Die Werte stehen dabei für den sichtbaren Bereich der SVG Datei. SVG Dateien haben nämlich ansonsten keine Angabe über ihre Eigene Größe. Danach wird im <defs>-Tag ein einfacher radialer Farbverlauf definiert.

Der <g>-Tab legt eine Gruppierung fest. In der Gruppierung sind zwei Pfade definiert. Der erste zeichnet die Umrandung des Dokumenten-Icons. Am besten denkt man bei einem Pfad, an eine Linie, die mit einem Stift gezogen wird. Die Bewegung des Stifts wird durch die Zahlenkolonne beschrieben. In der ersten Zahlenkolomme markiert "m1,1" den Startpunkt. Die folgenden Werte beschreiben die Bewegung des Zeichenstift. Die "12,0" bedeuten beispielsweise 12 Schritte nach rechts und 0 nach unten. Mit dem abschließenden "z" wird der Pfad geschlossen. Im Attribut "fill" wird der oben festgelegte Farbverlauf verwendet.

Der zweite Pfad funktioniert ähnlich und zeichnet die Linien. "h8" beschreibt eine Linie 8 Einheiten nach rechts. Mit den weiteren m-Angaben wird der Zeichenstift ohne zu Zeichnen an den Anfang der nächsten Zeile gerückt. Alternativ kann man natürlich auf für jede Linie einen eignen Pfad anlegen.

Grafik in HTML einbetten

Neben dem <img>-Tag kann man SVG Bilder mit <object>-Tag einbauen. Letztere Methode bietet zudem den Vorteil, dass man Alternativen einbetten kann, falls SVG vom Browser nicht unterstützt werden.

<object id="svg1" data="test.svg" type="image/svg+xml" width="90" height="140">
 <img src="/alternativ.gif" />
</object>

Fazit

SVG ist ein einfaches, aber leistungsstarkes Grafikformat. SVG unterstützt zudem Animationen und per JavaScript kann man auf die DOM Elemente der SVG Datei zugreifen. Dies bietet viele interessante Einsatzmöglichkeiten. Zudem kann man die Erzeugung sehr einfach mit serverseitigen Programmiersprachen wie PHP automatisieren.