Skalierbare Vektorgrafiken (SVG)

Wie bereits im Textabschnitt über Canvas beschrieben, war die Intention des HTML-basierten Webs die standardisierte Auslieferung von Daten, die anschließend vom lokalen Rechner (Browser) interpretiert werden sollte. Das SVG-Format (Scalable Vector Graphics) wurde zu genau dem gleichen Zweck entwickelt - einfachen ASCII-Text in grafische Formen umzusetzen. Seit 1999 arbeiten verschiedene Fachgremien an dem Format - nun biegen sie auf die Zielgerade ein. Nachdem auch Microsoft mit dem IE9 SVG unterstützt, sind endlich alle wichtigen Browser dabei.

Das SVG-Format soll die gleiche Art von Präzision in die Beschreibung von grafischen Elementen bringen, wie es PostScript für Druckvorlagen sicherstellt. Statt Objekte durch die Spezifikation einzelner Pixel zu beschreiben, ist das Ganze aus Linien und Formen gemacht, die mithilfe von Tags definiert sind. So stellt folgendes Beispiel einen Kreis mit einem Radius von 40 Pixeln dar:

<circle cx="100" cy="50" r="40" stroke="black"stroke-width="2" fill="red">

Weil der Browser die Objekte der Bildschirmauflösung anpasst und der Anwender je nach Bedarf vergrößern und verkleinern kann, ist das Ergebnis immer gleich gut. Filme und Spiele, denen animierte Schemata zugrunde liegen, sind dank der Vektortechnik platzsparend und schnell - mit Gzip-Kompression wird der Quellcode noch einmal um bis zu 80 Prozent eingedampft.

SVGB und SVGT

Also SVG gut, alles gut? Bedeutet Microsofts SVG-Einstieg eine einheitliche Vektorsprache? Natürlich nicht. Handy-Hersteller sorgen sich um den hohen Rechenaufwand, der für die Darstellung von SVG-Objekten nötig ist - damit steigt auch der Stromverbrauch der Geräte. Die Unternehmen führten deshalb zwei Subsets ein: SVGB (SVG Basic) und SVGT (SVG Tiny) - beide lassen einige Features außen vor, die für mobile Displays kaum Nutzen bringen: Objektmaße anders zu konfigurieren als über Pixel (über Picas oder Millimeter) beispielsweise. SVGT kann zudem Flächen nur einfarbig füllen.

Es geht auch animiert

Etliche Entwickler experimentieren auch mit einem flexibleren Vektor-Standard. So wurde das <animate>-Tag geboren, das einen Pfad beschreibt, an dem sich Objekte entlang bewegen. Nachdem eine Grafik aus dem Code erstellt worden ist, rechnet die SVG-Engine eine neue Position aus und zeichnet die Grafik an dieser Stelle erneut. Derzeit wird <animate> von allen Gecko- und WebKit-Browsern unterstützt - Internet Explorer 9 kann es hingegen nicht.

Nach dem Willen einiger anderer sollen besondere SVG-Effekte wie Farbfilter und Begrenzungen jedes beliebige Stück HTML eingepflegt werden können. So hat das Mozilla-Team den HTML5-Entwicklern einen Entwurf für Vektoreneffekte für das HTML-Subset CSS (Cascading Style Sheets) vorgelegt. Der Firefox setzt diesen Vorschlag bereits gut um - andere Browser sind hingegen noch sehr fehleranfällig in diesem Punkt. Das ist aber auch kein Wunder, haben die Firefox-Macher doch sowohl den Code als auch die Spezifikationen für die SVG-Einbindung gleichzeitig entworfen.

Ein dritter Bereich, in dem sich die Browser noch sehr unterscheiden, ist die Integration von SVG-basierten Schriften. Anders als PostScript lässt es die Standardversion von SVG nicht zu, dass jeder beliebige Strich in ein Bildzeichen respektive einen Teil eines Buchstabens umgesetzt wird. Nur die WebKit-Browser können das bereits von Haus aus, weil sie die Grundlagen von SVG-Fonts unterstützen; IE und Gecko müssen erst noch angepasst werden.

Obwohl Vektorengrafiken "gestochen scharf" sind, haben es einige Anwender lieber etwas - künstlerisch anspruchsvoll - verschwommener. Blur-Filter, die dies ermöglichen, werden von Chrome, Opera und Firefox angeboten.

Kann Ihr Browser SVG?

Mit diesem schnellen SVG-Test prüfen Sie Ihren Browser, ob er in der Lage ist, eingebettete SVG-Tags zu verarbeiten. Eine gelungene Zusammenstellung von SVG-Beispielen und Browser-Tests von Andre Winter zeigt die verschiedenen Möglichkeiten, die aktuell noch in der Experimentierphase sind.

Lesen Sie in folgender Tabelle, welche aktuellen Browser welche der beschriebenen SVG-Formate in HTML5 unterstützen: