Dynamische Grafiken mit SVG und XSL erstellen

Die Darstellung von Grafiken mit XML kann mühselig sein, wenn man ältere Grafikformate wie GIF und JPEG verwendet. Mit SVG (Scalable Vector Graphics) wird die Sache deutlich leichter.

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.

Themenseiten: Anwendungsentwicklung, Software

Fanden Sie diesen Artikel nützlich?
Content Loading ...
Whitepaper

Artikel empfehlen:

Neueste Kommentare 

1 Kommentar zu Dynamische Grafiken mit SVG und XSL erstellen

Kommentar hinzufügen
  • Am 20. Mai 2013 um 11:48 von tg

    Auch wenn der Artikel 10 Jahre alt ist:
    Gerade mit dem Aufkommen von 3D Druckern und ähnlichem sind xml Transformationen, die nicht in einem html-Dokument enden sehr interessant.
    Aber wo sind die Listings geblieben? So verkommt der Artikel nur zum Appetitanreisser.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *