Bei Scalable Vector Graphics handelt es sich um ein XML-Format, das vom W3C für die Darstellung vektororientierter, zweidimensionaler Grafiken eingeführt wurde. Vektorgrafiken beschreiben im Gegensatz zu Rastergrafiken nicht die einzelnen Farbwerte aller Bildpunkte, sondern Linien, Polygone, Kurven und Text als Funktionen. Dadurch ist eine beliebige, verlustfreie Vergrößerung oder auch Animation möglich. Das meistverbreitete Vektor-Grafikformat im Internet ist derzeit Flash von der Firma Macromedia. SVG bietet nun als offener Standard ähnliche oder sogar darüber hinaus gehende Funktionen und damit eine ernst zu nehmende Alternative.

SVG ist XML

Was unterscheidet SVG von Flash? Obwohl SVG- und Flash-Dateien in ihrer Darstellung recht ähnlich sind, differieren sie wesentlich im Format. Als XML-Anwendung eröffnet SVG völlig neue Möglichkeiten, beispielsweise standardisierte Transformationen mit XSL Transformations (XSLT). Genauso wie beliebige XML-Daten über einfache XSL-Transformationen in SVG-Grafiken umgesetzt werden können, kann auch die SVG-Grafik selbst von XML-fähigen Anwendungen weiterverarbeitet werden. Wie jede andere XML-Datei bieten auch SVG-Grafiken gegenüber binären Formaten den Vorteil, dass jede Information mit einem beliebigen Text-Editor eingesehen und verändert werden kann.

SVG ist interaktiv

Durch Server- oder Client-seitiges Scripting mit Hilfe von Javascript können interaktive Grafiken sehr einfach realisiert werden. Einen besonderen Vorteil bietet hierbei die Tatsache, dass mit Javascript über die standardisierte Programmier-Schnittstelle Document Object Model (DOM) auf alle Elemente der SVG-Grafik zugegriffen werden kann. Web-Entwickler finden sich hier schnell zurecht. Um Netzressourcen optimal zu nutzen, können SVG-Dateien auch in komprimierter Form verteilt werden, wobei der Web-Browser automatisch die Dekomprimierung übernimmt.

Dynamische Business-Grafiken

Alle genannten Vorteile lassen den Einsatz von SVG nicht nur für attraktive Web-Oberflächen sinnvoll erscheinen, dem bisherigen Haupteinsatzbereich von Flash, sondern vor allem für den anwendungsorientierten Einsatz in Business-Lösungen. Die Basisdaten liegen in modernen E-Business-Applikationen häufig bereits in XML-Form vor oder können einfach zu XML-Dateien konvertiert werden. Mit Hilfe von SVG lassen sich diese Daten direkt visualisieren, ohne dass aufwändige Konvertierungen und Schnittstellen-Definitionen erforderlich sind. Dabei ist etwa die mathematisch korrekte Darstellung von Werten in Diagrammen ein großer Pluspunkt, den alternative Techniken oft nicht bieten können.

Als besonders attraktiv erweisen sich auch im Business-Bereich die uneingeschränkten und verlustfreien Zoom- und Navigations-Möglichkeiten. So taugt SVG als interaktives, vektororientiertes Grafikformat beispielsweise für die Visualisierung von komplexen Geschäftsprozessen, wo eine einzige SVG-Grafik sowohl einen Gesamtüberblick als auch eine individuelle Detailansicht bieten kann.

Die Visualisierung einer Balanced Scorecard soll dies beispielhaft verdeutlichen. In der entsprechenden Web-basierenden Software der Firma Siteforce liegen alle relevanten Unternehmenszahlen in einer XML-Datei vor. Als Format dient eine vom Balanced Scorecard Collaborative (http://www.bscol.com) vorgeschlagene Document Type Definition (DTD). Mit Hilfe einer XSL-Transformation wird diese XML-Datei dynamisch in SVG-Grafiken und -Diagramme umgewandelt. Die XSLT-Scripts erzeugen in der SVG-Datei zudem Client-seitiges Javascript für Interaktivität, so dass beim Bewegen des Mauszeigers über bestimmte Bestandteile der Grafik dazugehörige, detailliertere Informationen angezeigt werden. SVG bietet in einer solchen Anwendung die Möglichkeit, Hunderte von Parametern, Werten und Ergebnissen in einer Grafik zu visualisieren, ohne dass die Übersicht für den Endanwender verloren geht. Mit der Maus kann jeder Punkt einer Chart-Kurve angesteuert werden, um kontextsensitiv in einer kleinen Textebene die jeweiligen Zahlenwerte zu erhalten.

Sowohl gezoomte Ansichten als auch die Gesamtansicht können zudem in hoher Qualität ausgedruckt werden. Eine solche Anwendung ist auf einer Server-Umgebung mit Open-Source-Software wie "Apache Tomcat" lauffähig und kann Client-seitig aus jedem Browser mit entsprechendem Plug-in gesteuert werden.

SVG für Benutzeroberflächen

SVG kann aber nicht nur genutzt werden, um vom Server bereitgestellte Information anzuzeigen, sondern auch, um Daten zu sammeln und gebündelt zum Server zu übertragen. Durch die Einbettung von Javascript in die SVG-Grafik kann man auf einfache Weise eine komfortable Benutzer-Schnittstelle entwerfen, die mit den bisher gebräuchlichen Web-Technologien nur sehr schwierig zu erzeugen wäre.

Als Beispiel sei die Verwaltung von Sicherheitseinstellungen über ein SVG-Interface genannt. Die Konfiguration kann selbst bei komplexen Sicherheitsarchitekturen durch einfaches Drag and Drop erfolgen. Durch die Integration eines Datensatzes in die SVG-Datei ist es möglich, diese Informationen zu ändern und die Grafik auf dem Client sofort neu aufzubauen. Die modifizierte Security-Konfiguration wird dann auf den Server übertragen. (ws)

*Die Autoren sind Mitarbeiter der Münchner Siteforce AG.

Was ist neu in SVG 1.1?

Die Version 1.1 von Scalable Vector Graphics (SVG) bringt im Vergleich zum Vorgänger 1.0 keine neuen Features. Der wesentliche Fortschritt der aktuellen Ausführung besteht in ihrem modularen Aufbau. Nach dem Vorbild von XHTML teilte die SVG-Arbeitsgruppe ihre Document Type Definition (DTD) in mehrere Bestandteile auf. Dieser modulare Ansatz bietet nun die Möglichkeit, auf Basis so genannter Profile ausgesuchte Komponenten zu einer Teilmenge des Gesamtstandards zu kombinieren. Genau dieses Verfahren nutzte das W3C, um SVG-Varianten für mobile Geräte zu definieren. Derzeit liegen mit "SVG Basic" und "SVG Tiny" zwei solcher "Mobile SVG Profiles" vor. Ersteres ist für die Verwendung in PDAs gedacht, Zweiteres für die in ihren grafischen Möglichkeiten noch stärker eingeschränkten Handys.

Feature-Vergleich

SVG / Flash

XML, textbasierendes Format / Binäres Format

Offener Standard des W3C / Proprietäres Format

Indizierbar für Volltextsuche / Nicht indizierbar aufgrund des binären Formats

Als Grafik-Austauschformat konzipiert / Als Animationsformat konzipiert

Dynamische Erzeugung von SVG-Dateien mit herkömmlichen CGI-Skripten, JSP-, ASP-, PHP-Seiten, Servlets etc. / Höherer Aufwand für die Erzeugung dynamischer Flash-Grafiken: Bis jetzt war der kostenpflichtige Flash-Generator dafür nötig. Macromedia hat nun die Weiterentwicklung des "Flash Generator" eingestellt und setzt auf Macromedia Flash MX, das auch XML-Dateien verarbeiten kann.

Kurze Einarbeitungszeit für Web-Entwickler, da vorhandene XML- und Text-Editoren sowie Grafikprogramme eingesetzt werden können / Längere Einarbeitungszeit durch Flash-spezifische Entwicklungsumgebung

Größeres Plug-in, noch nicht weit verbreitet / Weit verbreitetes Plug-in. Die Plug-in-Download-Datei ist deutlich kleiner.

Multimediale Elemente durch Einbindung von SMIL. Die Darstellung dieser Elemente (Sound,Streaming Media. Video etc.) bleibt anderen Plug-ins überlassen. / Integration von Multimedia-Elementen,

Hochauflösendes Drucken über SVG-Plug-in / Standardmäßig kein Drucken möglich

Client-seitiges Scripting über Javascript, zudem Server-seitiges Scripting möglich / Client-seitiges Scripting über proprietäre Script-Sprache