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.

Page: 1 2

ZDNet.de Redaktion

Recent Posts

Umfrage: Angestellte in Deutschland unterschätzen NIS-2-Richtlinie

Fast zwei Drittel halten jedoch eine Umsetzung aller Vorgaben von NIS 2 bis Jahresende für…

18 Minuten ago

Kostenloser Dekryptor für ShrinkLocker

Mit dem Dekryptor von Bitdefender können Opfer von Attacken mit der Shrinklocker-Ransomware Dateien wiederherstellen.

14 Stunden ago

Malwarebytes warnt vor Betrugsmaschen beim Weihnachtseinkauf

In der Vorweihnachtszeit ist vor allem Malvertising auf dem Vormarsch. Cyberkriminelle locken Nutzer über schädliche…

14 Stunden ago

Bedrohungsindex: Deutliche Zunahme von Infostealern im Oktober

Dazu trägt unter der Infostealer Lumma-Stealer bei. Hierzulande dominiert der Infostealer Formbook die Malware-Landschaft.

1 Tag ago

Chrome 131 schließt zwölf Sicherheitslücken

Eine schwerwiegende Anfälligkeit hebelt die Sicherheitsfunktion Seitenisolierung auf. Betroffen sind Chrome für Windows, macOS und…

1 Tag ago

DeepL Voice mit KI für Sprach- übersetzungen

DeepL Voice ermöglicht Live‑Übersetzung von Meetings und Gesprächen in 13 Sprachen.

1 Tag ago