SVG-Diagramme mit XSLT generieren
Dynamische Daten

Thomas Meinike,
DeveloperIT-ProjekteSoftware

SVG ohne Plug-ins

SVG-Diagramme mit XSLT generieren

Die im vergangenen Jahr erschienenen Browser Opera 8.0/8.5 und Firefox 1.5 stellen SVG-Dokumente ohne zusätzliche Plug-ins dar. SVG steht für Scalable Vector Graphics, ein 2001 vom W3C etabliertes 2D-Vektorgrafikformat auf der Basis von XML. Der Nachfolger dieser mit 1.0 bezeichneten Fassung erschien 2003 als Version 1.1. Dabei wurde die vollständige Spezifikation um die funktional abgerüsteten Module Tiny und Basic ergänzt, welche für mobile Anwendungen auf Handys beziehungsweise PDAs ausgelegt sind.

Als XML-Derivat kann SVG relativ einfach aus einer XML-Datenquelle erzeugt werden. Der hier beschriebene Weg greift auf die Technik XSLT zur Transformation der Daten nach SVG mit Hilfe eines XSL-Stylesheets zurück.

Browserstatus

SVG-Diagramme mit XSLT generieren

Opera 8.x stellt nur mit SVG-Tiny ausgezeichnete Dokumente dar, während die bereits in der Entwicklung befindliche Version 9.0 das Basic-Modul abdecken soll. Firefox 1.5 unterstützt ebenfalls SVG, allerdings noch nicht vollständig und auch keines der genannten Module als Ganzes.

Firefox stellt zumindest die grundlegenden Zeichenobjekte wie Linie, Kreis, Pfad und Polygon dar und kann diese auch mit den nötigen Formatierungen wie Füll- und Rahmenfarben ausstatten. Text lässt sich ebenfalls ausgeben. Während Firefox auch mit CSS-Definitionen umgehen kann, muss Opera hier noch passen, weil SVG-Tiny 1.1 keine Stylesheets kennt. Alternativ können gleichnamige Präsentationsattribute verwendet werden (fill, stroke et cetera).

Weitere Browser wie Safari und Konqueror sind ebenfalls mit SVG-Fähigkeiten ausgestattet. Ansonsten existiert mit dem in Version 3.03 vorliegenden Adobe SVG Viewer (ASV) ein Plug-in, das vor allem mit dem Internet Explorer harmoniert und die bisher umfassendste Implementierung bietet. Nachfolgend werden jedoch nur solche Techniken verwendet, die zumindest Opera 8.x und Firefox 1.5 bekannt sind.

Die Beispielanwendung

SVG-Diagramme mit XSLT generieren

Daten lassen sich gut in Diagrammform visualisieren. Zum Einsatz kommen hier Balken mit einem 3D-Effekt, wie man sie von den an Wahlabenden im Fernsehen ausgestrahlten Hochrechnungen kennt. Allerdings sollen im Beispiel keine Prozentpunkte von Parteien ins Bild gerückt werden, sondern die Statistik der Browserzugriffe auf die Internet-Professionell-Website innerhalb eines Monats. Zur Demonstration dienen die Datensätze von Dezember 2005 und Januar 2006. Die Rohdaten sind in einer Tabelle angegeben. Betrachtet werden die sechs häufigsten Browser von MSIE (circa 55 Prozent mit leicht abnehmender Tendenz) bis Konqueror (circa 0,5 Prozent). Firefox und Mozilla sind Verwandte und gehen als Summe in die Betrachtungen ein.

Neben den Browser-Namen und ihren prozentualen Anteilen werden noch RGB-Farbwerte für die Darstellung benötigt. Letztere sollen in hexadezimaler Kodierung vorliegen.

Eigenes XML-Format

SVG-Diagramme mit XSLT generieren

Zur strukturierten Speicherung als daten.xml dient ein eigenes XML-Format mit dieser Dokumenttypdeklaration (daten.dtd):








Das Element daten fungiert als Wurzelelement und kann beliebig viele satz-Elemente aufnehmen, die die einzelnen Datensätze bilden. Jedes satz-Element besteht aus den einfach vorkommenden Kind-Elementen wert, text und farbe in dieser Reihenfolge. Beim daten-Element sind noch zwei optionale Attribute angesiedelt, die einen beschreibenden Text (infotext) sowie eine Web-Adresse (infourl) zur enthalten können. Daraus ergibt sich dieses Grundgerüst mit einem vollständigen Datensatz:







38.64
FF + Moz
#F60



Neben der DTD ist auf der Heft-CD auch ein XML-Schema vorhanden. Beide eignen sich zur Validierung der Daten bei der Eingabe über einen XML-Editor. Mit einem Schema lassen sich präzisere Angaben zu Datentypen wie xs:decimal, xs:string oder zum Aufbau eines gültigen URI machen. Dazu dient der Typ xs:anyURI (siehe daten.xsd). Mit dem Editor XML Spy können XML-Strukturen ausgehend von einem solchen Schema ansprechend dargestellt werden. Bei der praktischen Entwicklung von Anwendungen leistet dieser Editor gute Dienste, wobei zum Nachvollziehen des Beispiels die kostenlose Home-Version 2005 oder 2006 völlig ausreicht.

Aufbau der Grafik

SVG-Diagramme mit XSLT generieren

Zur Realisierung der Balkengrafik werden im Wesentlichen Mehrfachlinien für das Koordinatensystem (Element polyline) und Polygone für die 3D-Balken (Element polygon) eingesetzt. Hinzu kommen text-Elemente für Beschreibungen (zum Teil verlinkt) und g-Elemente für die Gruppierung der Polygone. Eine 3D-Ansicht kann durch geschickte Wahl der Perspektive auch mit einem 2D-Format erzielt werden. Im vorliegenden Fall wird die Balkenoptik durch drei aneinander gesetzte Polygone erreicht. Der räumliche Eindruck wird durch die unterschiedliche Farbgebung unterstützt. Pro Balken wird nur ein Farbwert festgelegt, wobei die drei gruppierten Polygone unterschiedliche Werte für die Deckkraft erhalten (Opazität, das Gegenstück zur Transparenz). Im Beispiel sind es die opacity-Werte 0.8 (oben), 0.6 (vorn) und 0.4 (seitlich).

Die SVG-Grundstruktur mit einem Balkenset verdeutlicht dieses Codefragment:





Daten als 3D-Balkengrafik



FF + Moz



Im Wurzelelement svg sind noch weitere Angaben vermerkt, die speziell zur Skalierung der Grafik im Ausgabebereich dienen: das Attribut viewBox zur Definition eines Bezugsrechtecks für die gesamte Grafik und die auf 100 Prozent gesetzten Attributwerte von width und height.

Transformationsvorlage

SVG-Diagramme mit XSLT generieren

Die Umformung der XML-Datensätze basiert auf einem XSL-Stylesheet. Die Animationen werden gesteuert über die Abfrage der satz-Position und fortlaufend vergebene IDs für die zeitliche Reihenfolge, in der die Balken erscheinen. Die Polygonflächen werden zunächst nicht dargestellt (visibility=”hidden”) und zeitversetzt wieder sichtbar gemacht (visibility=”visible”). Leider kann Firefox 1.5 noch nicht mit Animationen umgehen und somit die ausgeblendeten Balken nicht anzeigen. Hier schafft ein Workaround in Form der Javascript-Bibliothek Smilscript von der Firma Vectoreal Abhilfe: