SVG-Objektgrafik mit XSL

Dynamische Erzeugung von Objektgrafik

SVG (Scalable Vector Graphics) ist eine 'Programmiersprache' zur Herstellung von Objektgrafik. Alle modernen Browser beherrschen SVG. Ältere Browser brauchen dazu ein Zusatz-Programm (Plugin).	XSL ist eine 'Programmiersprache' zur dynamischen Herstellung verschiedener Produkte aus XML-Daten. Alle gängigen Browser beherrschen XSL.
Die Kombination beider Technologien ermöglicht es, dynamische Objektgrafik aus XML-Daten herzustellen. Im Gegensatz zu anderen Methoden wird diese Arbeit am Client-PC ausgeführt.	Sowohl SVG als auch XSL sind Mitglieder der XML-Familie und daher Offene Standards, nicht lizenzpflichtig, und mit allen anderen Mitgliedern der XML-Familie kompatibel.

XSL	Extended Stylesheet Language
Einfache Grafik	Minimal-Objektgrafik mit XSL-Programm
XY-Grafik	Durch XML-Daten gesteuerte XY-Grafik - Rechnen mit XSL Variablen
Säulen-Grafik	Durch Daten gesteuerte Säulengrafik - Schleifenzähler mit XSL
XHTML+SVG	Dynamische Erzeugung einer XHTML-Webseite mit Inline SVG
Einbettung	von SVG-Objektgrafik in Webseiten

Einfache SVG Objektgrafik mit XSL
● Diese Grafik wurde mit XML und XSL hergestellt. ● Vom Webserver haben sie die XML-Daten und das XSL-Programm erhalten (nächste Absätze). ● Daraus wurde auf ihrem PC die Grafik hergestellt.
Alle modernen Browser zeigen die Grafik an. Optional können sie einen Ersatz in den Demo-Rahmen laden: Original: SVG mit XSL erzeugt SVG-Objektgrafik aus Datei GIF-Pixelgrafik	Einbettung der SVG-Objektgrafik in einen Innenrahmen dieser Webseite: <iframe src="demo_s10.xml"></iframe> Der Rahmen wurde für Demo-Zwecke recht auffällig formatiert. Auf Wunsch lassen sich Rahmen auch praktisch unsichtbar machen. ► Sie können die Grafik auch in ein eigenes Browser-Fenster laden.
XML-Daten Die XML-Datei enthält in diesem Fall nur + die obligatorische XML-Deklaration, + die Anforderung des XSL-Programms und + zur maximalen Vereinfachung ein leeres Daten-Element. ► Mangels Steuer-Daten erzeugt das angeforderte XSL-Programm immer die gleiche Objektgrafik. ► Bei Rechtsklick auf die XML+XSL-Grafik wird der XML-Quelltext angezeigt.	XML-Daten in Datei demo_s10.xml <?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet href="demo_s10.xsl" type="text/xsl" ?> <daten></daten>
XSL-Programm Dieses Script-Programm erzeugt die SVG-Objektgrafik. ► Wie in jeder anderen XML-Datei steht am Beginn die XML-Deklaration. ► Danach folgt das <xsl>-Element. Hier wird der verwendete xmlns Namespace (Befehlsumfang) bekanntgegeben. ► Mit <xsl:output> wird bekanntgegeben, welches Produkt (hier eine SVG-Objektgrafik) erzeugt wird. Diese Angabe entspricht ungefähr dem HTTP-Header, welcher die Daten-Type für einen Browser ankündigt. Nun folgt das eigentliche XSL-Script-Programm: ► Jedes XSL-Programm enthält ein template (Block aus Anweisungen und Daten) mit dem Filter match="/" Damit wird das Wurzel-(root)-Element des Ausgabe-Produkts erstellt. ► Dieses XSL-Programm enthält nur ein einziges template. Darin befinden sich zur Vereinfachung keine XSL-Befehle sondern ausschließlich Daten (blau). Aus diesen Daten wird das Produkt (SVG-Grafik) hergestellt. ► Zur leichteren Orientierung sind die in der Grafik sichtbaren Elemente hervorgehoben.	XSL-Programm in Datei demo_s10.xsl <?xml version="1.0" encoding="utf-8" ?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:svg="http://www.w3.org/2000/svg" > <xsl:output method="xml" indent="yes" media-type="image/svg+xml"/> <xsl:template match="/"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="50" cy="50" r="20" fill="red"/> <rect x="15" y="15" width="30" height="30" fill="blue"/> <g transform="translate(60,30)"> <polygon id="dreieck" points="-20,11 20,11 0,-23" fill="#0F0" /> </g> <g font-family="Verdana, sans-serif"> <text font-size="18" x="60" y="30">SVG</text> <text font-size="10" x="100" y="50"> Grafik aus XML-Daten + XSL-Programm </text> </g> </svg> </xsl:template> </xsl:stylesheet>
SVG-Programm Dieses Programm wird theoretisch durch XSL erzeugt. ▼ Es wird jedoch weder als Text angezeigt noch als Datei gespeichert. ▲ Für Demo-Zwecke wurde die SVG-Datei zusätzlich erzeugt, sie kann wahlweise in den Anzeige-Rahmen geladen werden. Bei Rechtsklick in die SVG-Datei-Grafik wird der SVG-Quelltext angezeigt. ▲ Tipp: Erzeugen sie vor der Entwicklung eines XSL-Programms eine SVG-Grafik als Muster.	SVG-Programm in Datei demo_s10.svg <?xml version="1.0" encoding="utf-8" ?> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="50" cy="50" r="20" fill="red"/> <rect x="15" y="15" width="30" height="30" fill="blue"/> <g transform="translate(60,30)"> <polygon id="dreieck" points="-20,11 20,11 0,-23" fill="#0F0" /> </g> <g font-family="Verdana, sans-serif"> <text font-size="18" x="60" y="30">SVG</text> <text font-size="10" x="100" y="50"> Grafik aus Datei demo_s10.svg </text> </g> </svg>

XY-Grafik durch XML-Daten gesteuert - Rechnen mit XSL-Variablen
In diesem Beispiel wird das Aussehen der SVG-Objektgrafik durch XML-Daten gesteuert. Lage, Größe und Farbe der Punkte wird aus den XML-Daten entnommen. Alle modernen Browser zeigen die Grafik an. Optional können sie einen Ersatz anzeigen: Original: SVG mit XSL erzeugt SVG-Objektgrafik aus Datei GIF-Pixelgrafik ► Sie können die Grafik auch in ein eigenes Browser-Fenster laden.
XML-Daten Die Daten enthalten 5 Datenpunkte. ► Jeder enthaltene Datenpunkt wird in die Grafik aufgenommen. ► Die Daten bestimmen Position, Größe und Farbe jedes Punktes in der Grafik. 'Eingebaute' Komplikationen: ► Die Reihenfolge der Daten ist gleichgültig. (Sie wurde bei Punkt 2 und 3 geändert). ► Die Daten enthalten den Durchmesser <d>, für die Grafik wird jedoch der Radius benötigt. Dabei wird Rechnen mit XSL-Variablen demonstriert. ► Datensätze können Attribute (nr) enthalten. Man kann sie bei der Verarbeitung mit XSL berücksichtigen, hier werden sie allerdings ignoriert. ► Mit Rechtsklick in die erzeugte Grafik wird der Quelltext der XML-Daten angezeigt, nicht jedoch ein (gar nicht vorhandener) SVG-Quelltext.	XML-Daten in Datei demo_s20.xml <?xml version="1.0" encoding="ISO-8859-1"?> <?xml-stylesheet version="1.0" href="demo_s20.xsl" type="text/xsl"?> <daten> <punkt nr="1"> <x>160</x><y>120</y><d>30</d><col>#F00</col> </punkt> <punkt nr="2"> <y>80</y><x>60</x><d>30</d><col>#00F</col> </punkt> <punkt nr="3"> <d>20</d><col>#F00</col><x>90</x><y>20</y> </punkt> <punkt nr="4"> <x>50</x><y>160</y><d>20</d><col>#F00</col> </punkt> <punkt nr="5"> <x>200</x><y>50</y><d>20</d><col>#00F</col> </punkt> </daten>
XSL-Programm Das XSL-Programm wird gegenüber einer einfachen (statischen) Grafik etwas erweitert: ► Das Programm enthält je einen Daten-unabhängigen Teil am Anfang und Ende, dazwischen eine <xsl:for-each> Schleife. ► Die Schleife wird für jeden <punkt> der Daten einmal durchlaufen, dabei wird je ein Grafik-<circle> erzeugt. Attribute Die Attribute des <circle> Elements werden einzeln mit <xsl:attribute> gesetzt. [Mittelpunkt (cx,cy) und Radius r] ► Die X-Koordinate wird direkt aus den Daten übernommen. Der Inhalt des Daten-Elements "x" wird an das Attribut "cx" von <circle> zugewiesen. ► Auch die Farbe wird direkt übernommen, von "col" der Daten an "fill" der Grafik. Rechnungen ► Der Radius (Grafik) wird aus dem Durchmesser (Daten) berechnet. Dazu wird der Wert von Daten-Element "d" an die XSL-Variable $dm übergeben. Danach wird daraus die XSL-Variable $r berechnet. Zuletzt wird diese an das Attribut "r" der Grafik übergeben. ► Die Y-Koordinate muss umgekehrt werden, da die Y-Achse der Grafik von oben nach unten gezählt wird. Daher wird der Wert von Daten-Element "y" an die XSL-Variable $yq übergeben. Danach wird eine weitere XSL-Variable $y berechnet. Zuletzt wird diese an das Attribut "cy" der Grafik zugewiesen. Vereinfachung ► Hier wird nur der relevante Teil des Programms gezeigt. Achsen und Beschriftung sind zur Vereinfachung weggelassen.	XSL-Programm in Datei demo_s20.xsl <?xml version="1.0" encoding="utf-8" ?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:svg="http://www.w3.org/2000/svg" > <xsl:output method="xml" indent="yes" media-type="image/svg+xml"/> <xsl:template match="/"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <g transform="translate(50,15)"> <xsl:for-each select="daten/punkt"> <!-- Durchmesser -> Radius --> <xsl:variable name="dm"> <xsl:value-of select="d"/> </xsl:variable> <xsl:variable name="r"> <xsl:value-of select="$dm div 2"/> </xsl:variable> <!-- Y-Umkehrung --> <xsl:variable name="yq"> <xsl:value-of select="y"/> </xsl:variable> <xsl:variable name="y"> <xsl:value-of select="200-$yq"/> </xsl:variable> <!-- Daten-Punkte --> <circle> <xsl:attribute name="cx"> <xsl:value-of select="x" /> </xsl:attribute> <xsl:attribute name="cy"> <xsl:value-of select="$y" /> </xsl:attribute> <xsl:attribute name="r"> <xsl:value-of select="$r" /> </xsl:attribute> <xsl:attribute name="fill"> <xsl:value-of select="col" /> </xsl:attribute> </circle> </xsl:for-each> </g> </svg> </xsl:template> </xsl:stylesheet>
SVG-Programm Dieses Programm wird theoretisch durch XSL erzeugt. Für Demo-Zwecke wurde die SVG-Datei zusätzlich erzeugt. Sie ist übersichtlicher und erleichtert das Verständnis für das XSL-Programm. ► Der gezeigte Quelltext ist zur Vereinfachung gekürzt: Achsen und Beschriftung sind nicht angeführt. ► Wenn sie Interesse an den Details haben, dann laden sie die SVG-Datei in den Demo-Rahmen und zeigen mit Rechtsklick in die Grafik den Quelltext an.	SVG-Programm in Datei demo_s20.svg <?xml version="1.0" encoding="utf-8" ?> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <g transform="translate(50,15)"> <circle cx="160" cy="80" r="15" fill="#F00" /> <circle cx="60" cy="120" r="15" fill="#00F" /> <circle cx="90" cy="180" r="10" fill="#F00" /> <circle cx="50" cy="40" r="10" fill="#F00" /> <circle cx="200" cy="150" r="10" fill="#00F" /> </g> </svg>

Säulen-Grafik mit XSL-Schleifenzähler

Vergleich zweier XSL-Produkte aus den gleichen Daten. Alle modernen Browser zeigen die Grafik rechts an. Optional können sie einen Ersatz anzeigen: Original: SVG mit XSL erzeugt SVG-Objektgrafik aus Datei GIF-Pixelgrafik Die Tabelle ist aus den gleichen Daten mit einem anderen XSL-Programm demo_s31.xsl erzeugt. Ein ähnliches Programm wird auf der XSL-Seite demonstriert. ► Sie können Tabelle oder Grafik auch in ein eigenes Browser-Fenster laden. ► Mit Rechtsklick in ein XSL-Produkt (Tabelle, Grafik, ...) erhalten sie immer den Quelltext der XML-Daten..	XML-Daten in Datei demo_s32.xml <?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet href="demo_s32.xsl" type="text/xsl" ?> <daten> <zeile> <name>Anna</name><wert>56</wert> </zeile> <zeile> <name>Rudi</name><wert>78</wert> </zeile> <zeile> <name>Doris</name><wert>67</wert> </zeile> </daten>
XSL-Programm Für die Erzeugung von Säulen- oder Balken-Grafik braucht man eine Schleifen-Zähler: ► Die Daten werden - so wie bei der XY-Grafik - in einer <xsl:for-each> Schleife verarbeitet. Jede Daten-Säule muss dabei um eine konstante Schrittweite versetzt werden. Zur Berechnung der Position wird daher ein Schleifen-Zähler benötigt. ► Die XSL-Funktion position liefert den aktuellen Schleifen-Durchgang, beginnend mit 1. Die Daten werden an die XSL-Variable $iz übergeben. ► Aus der Zähler-Variablen $iz wird die X-Position der Säule berechnet und in der XSL-Variablen $x gespeichert. (Für horizontale Balken müsste man die Y-Position berechnen). ► Jeder Datensatz wird durch eine <g> Gruppe von Grafik-Elementen dargestellt, bestehend aus Text und Säule. Die Gruppe wird gemeinsam positioiniert. Dazu wird das häufig verwendete Grafik-Attribut transform="translate(x,y)" benötigt. Der Attribut-Wert wird mit XSL-Funktion concat zusammengesetzt. ► Beim Zeichnen der Säule <rect> (Rechteck) wird der anzuzeigende Wert "wert" an das Grafik-Attribut "height" übergeben. In der Grafik ist die Y-Achse umgekehrt, deshalb wird der Daten-"wert" mit Minus-Operator an das Grafik-Attribut "y" übergeben. Bei dieser Gelegenheit könnte auch jede andere Skalierung der Daten (Umrechnung Wert - Pixel) erfolgen. ► SVG bietet auch die Möglichkeit, mit User-Koordinaten zu arbeiten, z.B. mit km statt mit Pixeln. Vereinfachung ► Hier wird nur der relevante Teil des Programms gezeigt. Achsen und Beschriftung sind zur Vereinfachung weggelassen. Ergänzung ► Für höhere Ansprüche wird Breite und Abstand der Säulen an die Anzahl der Datensätze angepasst. Dazu verwenden sie eine globale XSL-Variable, welcher mit XSL-Funktion count die Gesamt-Anzahl zugewiesen wird.	XSL-Programm in Datei demo_s32.xsl <?xml version="1.0" encoding="utf-8" ?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:output method="xml" indent="yes" media-type="image/svg+xml"/> <xsl:template match="/"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" style="width:100px; height:150px;"> <g transform="translate(60,120)"> <xsl:for-each select="daten/zeile"> <xsl:variable name="iz"> <xsl:value-of select="position()"/> </xsl:variable> <xsl:variable name="x"> <xsl:value-of select="$iz * 60 - 30"/> </xsl:variable> <g> <xsl:attribute name="transform"> <xsl:value-of select="concat('translate(',$x,',0)')" /> </xsl:attribute> <text y="15"> <xsl:value-of select="name" /> </text> <rect x="-10" width="20" fill="#66F"> <xsl:attribute name="y"> <xsl:value-of select="-wert" /> </xsl:attribute> <xsl:attribute name="height"> <xsl:value-of select="wert" /> </xsl:attribute> </rect> </g> </xsl:for-each> </g> </svg> </xsl:template> </xsl:stylesheet>
SVG-Programm Dieses Programm wird theoretisch durch XSL erzeugt. Für Demo-Zwecke wurde die SVG-Datei zusätzlich erzeugt. Sie ist übersichtlicher und erleichtert das Verständnis für das XSL-Programm. ► Der gezeigte Quelltext ist zur Vereinfachung gekürzt: Achsen und Beschriftung sind nicht angeführt. ► Man kann die 3 Datensätze gut erkennen. Jeder ist in eine <g> Gruppe eingeschlossen, die gemeinsam mit Attribut transform positioniert wird. Innerhalb der Gruppe können deshalb relative Koordinaten verwendet werden. Die relative Text-Position ist z.B. in jedem Datensatz gleich x="0" und y="15" ► Alle Datensätze gemeinsam sind ebenfalls in eine <g> Gruppe eingeschlossen. Damit wird die gesamte erzeugte Grafik (im Live-Beispiel auch die Achsen) positioniert. Das ermöglicht die Verwendung relativer Koordinaten innerhalb aller Grafik-Elemente: Sie werden gemeinsam gegen den Grafik-Ursprung (linke oben Ecke der SVG-Grafik) verschoben. ► Wenn sie Interesse an den Details haben, dann laden sie die SVG-Datei in den Demo-Rahmen und zeigen mit Rechtsklick in die Grafik den SVG-Quelltext an.	SVG-Programm in Datei demo_s32.svg <?xml version="1.0" encoding="utf-8" ?> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <g transform="translate(60,120)"> <g transform="translate(30,0)"> <text y="15">Anna</text> <rect x="-10" y="-56" width="20" height="56" fill="#66F"> </rect> </g> <g transform="translate(90,0)"> <text y="15">Rudi</text> <rect x="-10" y="-78" width="20" height="78" fill="#66F"> </rect> </g> <g transform="translate(150,0)"> <text y="15">Doris</text> <rect x="-10" y="-67" width="20" height="67" fill="#66F"> </rect> </g> </g> </svg>

XHTML mit Inline SVG - erzeugt mit XSL
▲ Das größte Potential hat Inline-SVG Dabei wird SVG-Code direkt in den HTML-Code einer XHTML-Seite eingebettet. ► Im Beispiel werden zur Vereinfachung keine XML-Daten verwendet, daher wird immer die gleiche Webseite und Grafik erzeugt. ▲ Alle gängigen Browser zeigen die HTML-Bestandteile der Webseite an. ► Die SVG-Grafik wird allerdings nur von Browsern der Gecko-Familie angezeigt: Sie sind derzeit als einzige in der Lage, eingebettenen (Inline) SVG-Code in einem XSL-Datenstrom richtig zu verarbeiten. ► Auch Scripting (Interaktiver Zugriff auf die Grafik) funktioniert derzeit nur mit diesen Browsern. ► Zur besseren Unterscheidung ist die SVG-Grafik gelb unterlegt. ► Sie können die XHTML-Webseite auch in ein eigenes Browser-Fenster laden, und zwar als ► demo_s40.xml - mit XSL Live erzeugt ► demo_s42.xhtml - als Datei Der Opera-Browser zeigt dabei deutliche Unterschiede.
XSL-Programm ► Das aufgerufene XML-Dokument enthält zur Vereinfachung keine Daten. Daher wird immer die gleiche XHTML-Webseite und Grafik erzeugt. ► Der verwendete xlmns Namespace (Befehls-Umfang) enthält xsl, xhtml und svg ► Die Ausgabe-Methode für eine Webseite wird mit "html" angegeben. ► Das XSL-Programm ist auf ein Minimum beschränkt. Es enthält nur ein einziges template, darin befinden sich keine weiteren XSL-Anweisungen, sonbern nur Daten (blau). ► Aus diesen Daten wird das Produkt (XHTML-Webseite) hergestellt. ► In den Quelltext der XHTML-Webseite ist ein SVG-Element eingebettet. ♦ Details zu CSS und SVG-Objektgrafik	Datei demo_s40.xsl (vereinfacht) <?xml version="1.0" encoding="utf-8" ?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:svg="http://www.w3.org/2000/svg" > <xsl:output method="html" /> <xsl:template match="/"> <html xmlns="http://www.w3.org/1999/xhtml"> <head></head> <body> <div>Diese Webseite wurde mit XSL erzeugt</div> Beginn mit XHTML<br /> Einbettung einer SVG-Objektgrafik: <div style="background-color:#FF0;"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="50" cy="50" r="20" fill="red"/> <rect x="15" y="15" width="30" height="30" fill="blue"/> <g transform="translate(60,30)"> <polygon id="dreieck" points="-20,11 20,11 0,-23" fill="#0F0" /> </g> <text font-size="18" x="60" y="30">SVG</text> </svg> </div> Zuletzt wieder XHTML </body> </html> </xsl:template> </xsl:stylesheet>
XHTML ist eine 'Programmiersprache' zur Herstellung von Webseiten. Sie unterscheidet sich nur minimal vom klassischen HTML, ist jedoch Mitglied der XML-Familie. ▲ Inline-SVG Alle XML-Mitglieder sind miteinander kompatibel. Daher kann eine XHTML.Webseite Objekte anderer XML-Mitglieder enthalten, und zwar direkt in den Quelltext eingebettet. ▲ Scripting Alle XML-Objrekte werden in den Objektbaum der XHTML-Webseite integriert, gehören daher dem gleichen document an. ▲ Daher ist mit Javascript voller Zugriff auf alle Elemente möglich. Mit Elementen der Webseite (Formulare, Links, Buttons, ..) kann daher jedes Element der Grafik verändert werden. Vereinfachung: Das CSS <style> Element und das Javascript <script> Element sind ohne Inhalt eingefügt. Wenn sie Interesse an den Details haben, laden sie die Seite demo_s42.xhtml Mit Rechtsklick wird der volle XHTML-Quelltext angezeigt.	XHTML-Quelltext Datei demo_s40.xml <?xml version="1.0" encoding="utf-8" ?> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css" media="screen"></style> <script type="text/ecmascript"></script> </head> <body> <div class="hdr">Diese Webseite wurde mit XSL erzeugt</div> Beginn mit XHTML<br /> Einbettung einer SVG-Objektgrafik: <div style="background-color:#FF0; height:80px; width:100%;"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="50" cy="50" r="20" fill="red"/> <rect x="15" y="15" width="30" height="30" fill="blue"/> <g transform="translate(60,30)"> <polygon points="-20,11 20,11 0,-23" fill="#0F0" /> </g> <text font-size="18" x="60" y="30">SVG</text> </svg> </div> Zuletzt wieder XHTML </body> </html>
▼ Dateiname Leider zeigen alle gängigen Browser eine lästige Abhängigkeit von den Datei-Namen. Zum Test können sie die gleiche Datei mit unterschiedlichen Namen in einem eigenen Browser-Fenster öffnen: ► demo_s42.xml ► demo_s42.xhtml ► demo_s42.html ► demo_s42.htm	• Moderne Browser (Firefox, Mozilla, Netscape, Opera, ..) arbeiten mit .xml oder .xhtml korrekt, zeigen jedoch für .htm nur eine gewöhnliche Webseite. • Opera verarbeitet auch die Inline-Grafik richtig - Das funktioniert derzeit noch nicht, dann der gleiche Code mit XSL erzeugt wurde. • M$IE versteht derzeit weder .xml noch .xhtml und zeigt für .htm nur eine gewöhnliche Webseite.

Einbettung von dynamischer Grafik in Webseiten
Zur Einbettung von SVG-Grafik in Webseiten sind verschiedene Methoden möglich. ♠ EntwicklerInnen müssen leider einen Kompromiss zwischen der sinnvollen Anwendung moderner Informatik-Methoden und der Rücksicht auf die veraltete Technik des IT-Marktführers finden. ♠ Nachdem auf ein Monopol-Unternehmen kein Innovationsdruck wirkt, kann es noch lange dauern, bis eine neue Version des völlig veralteten M$IE-Browsers herauskommt. ♠ Auch ein mächtiges Unternehmen kann (derzeit) die technische Entwicklung zwar behindern, aber nicht aufhalten. ♠ Allerdings arbeitet eine mächtige Lobby daran, das zu ändern, z.B. mit neuen Patent-Gesetzen . .	♠ Eine aufwändige, aber immerhin mögliche Lösung ist die Browser-Weiche: ♠ Mit Javascript lässt sich feststellen, ob ein M$IE-Browser verwendet wird. In diesem Fall wird die Objektgrafik durch Pixel-Grafik ersetzt (nur GIF, da M$IE auch mit PNG Probleme hat). Ein Hinweis sollte M$-Fans allerdings daran erinnern, dass mit jedem modernen Browser eine Objektgrafik verwendet wird. ♠ Mit Javascript + VBScript lässt sich testen, ob mit dem M$IE Browser ein Adobe SVG Plugin verwendet wird. Allerdings erfordert dieser Test Lese-Zugriff auf die Registry-Datenbank und wird daher von allen gängigen Sicherheits-Einrichtungen unterbunden. ♠ Die technisch besten Browser-Weichen lassen sich mit Server-Programmen (Perl, PHP) realisieren. Allerdings zahlt man einen hohen Preis, je nachdem wieviel SVG-Funktionalität man mit anderen Methoden nachbildet. Außerdem steigt die Belastung des Webservers, je nach Methode sogar um Größenordnungen. ♠ Monopole sind teuer - für KonsumentInnen und für EntwicklerInnen.
Inline-<svg> Diese Methode hat das größte Zukunfts-Potential: SVG-Code ist direkt im HTML-Code enthalten. ► Allerdings funktioniert die Methode nur mit XHTML-Webseiten. EIn Grund mehr, von HTML auf XHTML umzusteigen. ▲ Die SVG-Grafik kann mit CSS-<style> formatiert und mit Javascript-<script> programmiert und animiert werden. ▲ Nur bei Inline-Einbettung sind die Grafik-Objekte in den Objekt-Baum der Webseite integriert. ▲ Zusätzlich lassen sich externe *.svg Dateien auch als <inline>, <object> und sogar <embed /> in XHTML-Webseiten einbetten. ▲ Die mehrfache Einbettung der gleichen Objektgrafik ist kein Problem - Ebenso wie der gleiche Text mehrfach auf einer Webseite vorkommen darf. ► Wenn eine Objektgrafik umfangreichen Code erfordert, dann ist es jedoch besser, sie als eigene Datei auszulagern. Sie wird auch bei mehrfacher Verwendung nur einmal vom Webserver angefordert und danach bei jeder Verwendung aus dem Browser-Cache geladen.	Grundgerüst einer XHTML-Webseite mit Inline-SVG Grafik. <?xml version="1.0" encoding="utf-8" ?> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css" media="screen"></style> <script type="text/ecmascript"></style> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> </svg> </body> </html>
<iframe> behandelt den geladenen Inhalt so wie eine eigene Webseite. ▲ Funktioniert mit allen Browsern und auch mit XHTML, ist daher Zukunfts-sicher. Derzeit beste Methode für die Einbettung externer Dateien. Auf dieser Seite ist jedes Beispiel in einen <iframe> eingebettet - sichtbar und deutlich abgegrenzt. ▲ Beste Methode zur Einbettung von SVG-Grafik mit umfangreichem Code, auch in XHTML. + Die Methode ist übersichtlicher, der HTML-Code bleibt kompakt. + Eine eigene Grafik-Datei wird bei mehrfacher Verwendung (auf der gleichen oder auf anderen Webseiten) rascher aus dem Browser-Cache geladen. ▲ Einzige Methode, die es erlaubt, die externe Datei (mit Javascript oder HTML-Formular) im Rahmen auszutauschen. ♦ Details zu Innenrahmen.	HTML-Innenrahmen zur Einbettung externer Dateien <iframe name="if1" id="if1" src="demo.svg" style="height:200px; width:100%;"> </iframe> ▲ Ein iframe lässt sich mit zusätzlichen Attributen 'verstecken': frameborder="0" scrolling="no" ▲ Geben sie immer die Attribute name und id (mit gleichen Namen für beide Attribute, aber eindeutig nur für diesen Innenrahmen) zu verwenden.
<object> Standard-Methode zur Einbettung externer Dateien in HTML. Sollte eigentlich auch die beste Methode zur Einbettung von *.svg Dateien sein. ▲ Funktioniert mit allen modernen Browsern und auch mit XHTML. ► Hat mit M$IE + Adobe SVG Plugin (Version 3.0) am besten funktioniert, wurde seither jedoch (je nach Version) wieder eingeschränkt. ► Je nach Version von Browser & PlugIn wurden Probleme berichtet, wenn die gleiche SVG-Grafik-Datei auf einer Webseite mehrfach als <object> eingebettet ist. ▼ Der Inhalt kann nach dem Laden der Webseite nicht mehr ausgetauscht werden.	HTML-Objekt zur Einbettung externer Dateien <object data="demo.svg" type="image/svg+xml" style="height:200px; width:100%;"> Ihr Browser kann das SVG-Objekt nicht anzeigen </object> Der eingeschlossene Text ('Ihr Browser kann nicht ..') wird angezeigt, wenn der Browser das Objekt nicht verarbeiten kann.
<embed> ist ein überholtes HTML-Element (deprecated) und sollte nicht mehr eingesetzt werden. ► Wird dennoch (derzeit) vom Adobe Plugin unterstützt, vermutlich aus Resignation gegenüber den Fehlern des M$IE Browsers. ► Die Version <embed> funktioniert zwar mit allen gängigen Browsern, trotzdem sollte - wenn überhaupt - nur die XHTML-kompatible Version <embed /> eingesetzt werden. ▼ Der Inhalt kann nach dem Laden der Webseite nicht mehr ausgetauscht werden.	HTML-Einbettung <embed src="demo.svg" style="height:200px; width:100%;" /> Nicht für neue Entwicklung !

Zum Inhaltsverzeichnis

> Entwicklung > XML > XSL > ObjektGrafik