Dynamische Grafiken mit SVG und XSL erstellen

Da SVG eine XML Syntax-Spezifikation ist, kann man mit ein wenig XSL eigene dynamische SVG-Grafiken erstellen.

Die SVG-Vorlage

Das Verfahren basiert auf dem Erstellen einer SVG-Vorlage, deren Inhalte anschließend verändert werden, um eine neue SVG-Grafik zu erhalten. Anfangs benötigt man eine Ausgangsgrafik, mit der man arbeiten kann. Man kann eine Reihe von Tools verwenden, zum Beispiel WebDraw von JASC, um das Ausgangsobjekt zu erstellen. Ebenso kann man auch jeden beliebigen Texteditor verwenden, denn alle SVG-Grafiken sind nichts anderes als XML.

Listing A zeigt einen einfachen SVG-Button, den wir als Basisvorlage für unsere Anwendung verwenden. Lädt man die Datei in einen SVG-Browser, erscheint ein simpler blauer Button, der mit „Button“ beschriftet ist. Beim Anklicken gelangt man auf die Builder.com-Homepage.

XML-Datenquelle

Zu Beginn konvertiert man diese SVG-Datei in eine SVG-Vorlage. Vereinfacht dargestellt teilt die Vorlage die Grafik in zwei Teile auf: Der statische Teil ist die XSL-Vorlage, der dynamische Teil ein XML-Dokument, das für die Umwandlung verwendet wird. Es gibt zwei Komponenten in dieser Grafik, die sich dynamisch verändern sollen: URL und Buttontext. Ein neues XML-Dokument enthält den dynamischen Quelltext (Listing B).

Wie man sieht, zeigt der neue Button den Text Google und einen Link zur bekannten Suchmaschine. Im nächsten Schritt wird die SVG-Grafik in eine XSL-Vorlage umgewandelt. Im Grunde werden Link und Buttontext dynamisch gemacht, indem man diese Daten aus dem XML-Dokument übernimmt.
Listing C zeigt die XSL-Vorlage.

Die XSL-Vorlage hat das Original SVG-Dokument aufgepeppt und dynamischer gemacht. Es handelt sich dabei um eine einfache Umwandlung, die nur eine Vorlage mit einem einzigen Element benutzt. Während der Bearbeitung wird der Link im Quelldokument mit dem /button/url Element gefüllt und der Buttontext hat den Wert des /button/text Elements.