SVG-Test @ PS-Trainer

Live SVG Test

In den Test-Rahmen wurde diese Datei geladen:

start.gif

Mit Rechtsklick in den Rahmen können sie dessen Quelltext anzeigen.

Ausgewählte Variante in den Test-Rahmen laden.
Die neue Datei wird erst nach dem kompletten Laden angezeigt - Das kann ein paar Sekunden dauern !

♣ SVG + EcmaScript bietet einfache Animation (Drehung, Bewegung) und interaktives Verhalten (Klicken sie Kreis oder Quadrat)
♣ Wenn sie eine der Einbettungs-Webseiten laden, dann ist deren Einbettungs-Element zur besseren Kennzeichnung rot umrandet.

Wählbare Variable
Durch Kombination der Optionen ergeben sich zahlreiche Test-Varianten.
Browser ● Moderne Browser wie Firefox, Opera, Safari, Chrome ... beherrschen die meisten Varianten. ● Je nach Browser erscheinen im Rahmen Fehlermeldungen, wenn er nicht in der Lage ist, die gewählte Variante anzuzeigen. • Nur der technisch veraltete M$IE Browser beherrscht noch immer nicht den seit 2001 gültigen SVG-Standard... • Mit dem Hilfsprogramm Adobe SVG Viewer kann sogar der M$IE Browser SVG-Grafik anzeigen. Allerdings zeigen die verschiedenen Versionen beachtliche Unterschiede. Auch der Adobe SVG Viewer ist mittlerweile technisch überholt.	Datei oder Inline-SVG Das größte Potential hat die direkte (Inline) Einbettung von SVG-Anweisungen in den Quelltext von → XHTML Webseiten. Zusätzlich dazu lassen sich eigene Dateien *.svg verwenden. Der M$IE Browser kann (auch) mit Adobe Plugin nur externe SVG-Dateien anzeigen, kein Inline SVG. XSL ist eine → XML-'Programmiersprache' zur Erzeugung variabler Produkte aus → XML-Daten. Alle modernen Browser beherrschen → XSL. In diesem Fall erhält der Browser die rohen XML-Daten und erzeugt daraus selbst das Produkt (hier: HTML-Tabelle oder SVG-Grafik). ♦ Details zur Erzeugung von SVG mit XSL.
Einbettung • Sie können die Test-Objekte mit der Option <iframe> direkt in den Test-Rahmen dieser Seite laden. Mit Rechtsklick in den Test-Rahmen wird dessen Quelltext angezeigt (HTML, XML, SVG). Pixel-Grafik besteht aus binären Daten und ist nicht als Text darstellbar. • Alternativ können sie in den Test-Rahmen eine HTML- oder XHTML-Webseite laden, welche das gewählte Test-Objekt auf verschiedene Weise einbettet. Damit lässt sich der Mechanismus der Einbettung genau studieren. Achten sie beim Rechtsklick auf die Zeiger-Position: Sie können entweder den Quelltext der Einbettungs-Seite (farbiger Hinetergrund) anzeigen oder das darin eingebettete Test-Objekt. Es gibt verschiedene Möglichkeiten, externe Dateien in eine Webseite einzubetten. ● Die → Einbettung als <iframe> wird in diesem Web bevorzugt, weil sie mit gängigen Browsern am besten funktioniert.	SVG-Umfang ► Einfache 'statische' SVG-Grafik stellt die geringsten Ansprüche. ► → Scripting (Programmierung mit Javascript / Ecmascript) stellt die höchsten technischen Ansprüche. Damit ist der unbeschränkte Live-Zugriff auf alle Grafik-Elemente möglich. • Animation: Wird im Beispiel mit Drehung und Bewegung des Quadrats demonstriert. • Interaktion: Kreis und Quadrat ändern ihre Farbe beim Anklicken. Das funktioniert jedoch nicht in allen Varianten, weil das onclick-Ereignis (Event) nicht immer bis zum SVG-Objekt weitergeleitet wird.
	Pixel-Grafik Die beiden Pixel-Grafik Varianten (GIF und PNG) dienen als Vergleich von PixelGrafik mit SVG-ObjektGrafik. • Bei Auswahl der Datei-Erweiterung .php werden auch diese Dateien mit einem → PHP-Programm dynamisch erzeugt). • Alle PixelGrafik Dateien haben in der Mitte ein 'Loch' zur Kontrolle der Transparenz.

Test - SVG - Quelltext
Die verwendeten SVG-Tests verwenden eine der beiden hier vorgestellten Grund-Varianten. Die beiden blau gedruckten Programm-Blöcke unterscheiden sich nur durch ihre Position in der Datei, nicht in ihrem Inhalt. Bei statischer SVG-Grafik ohne Scripting fällt der <script>-Block zur Gänze weg.	Der Datei-Name spielt eine untergeordnete Rolle, er kann für eine reine SVG-Datei u.a. .xml oder svg lauten. Nur der M$IE-Browser wertet die Datei-Endung wichtiger als alle anderen Informationen und zeigt nur *.svg Dateien an.
Aufbau einer XHTML-Webseite mit integrierter SVG-Grafik. <?xml version="1.0" encoding="utf-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript"> // <![CDATA[ // Javascript-Anweisungen // ]]> </script> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <!-- SVG-Anweisungen --> </svg> </body> </html>	Aufbau einer 'reinen' SVG-Test-Datei <?xml version="1.0" encoding="utf-8" ?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg xmlns="http://www.w3.org/2000/svg"> <script type="text/ecmascript"> <![CDATA[ // Javascript-Anweisungen ]]> </script> <!-- SVG-Anweisungen --> </svg>
Die → XHTML-Datei beginnt mit der <?xml ?>-Deklaration. Danach folgt optional die <!DOCTYPE >-Deklaration, in diesem Fall für HTML. Darauf beginnt mit <html> die XHTML-Webseite. Sie besteht wie jede andere Webseite aus je einem <head> und<body> Element. Im <head> sind allfällige <script> (→ Javascript)-Programme und Daten enthalten. Hier ist auch der Platz für ein optionales <style> (→ CSS)-Element, zur Formatierung sowohl der HTML- als auch der SVG-Elemente. Der <body> kann neben HTML-Elementen alle Mitglieder der XML-Familie enthalten, z.B. auch 1 oder mehrere <svg>-Elemente.	Die SVG-Datei beginnt mit der <?xml ?>-Deklaration. Danach folgt optional die <!DOCTYPE >-Deklaration, in diesem Fall für SVG. Darauf beginnt das <svg>-Element. Optional sind → CSS <script> und → Javascript <style>-Elemente enthalten. Sie sind identisch formuliert wie in der XHTML-Datei, jedoch an anderer Stelle. Danach folgen die SVG-Anweisungen für die einzelnen ObjektGrafik-Elemente.
Statische SVG-Grafik Das <script>-Element enthält keine Anweisungen für SVG-Elemente oder ist gar nicht vorhanden.	Dynamische SVG-Grafik Diese Dateien enthalten <script>-Elemente mit Javascript Anweisungen. Die Script-Programme der hier verwendeten Beispiele demonstrieren einfache Animation (Rotation, Translation) und Interaktion (Farb-Änderung beim Anklicken).
PHP Beide SVG-Grundformen und natürlich alle Varianten lassen sich dynamisch mit PHP erzeugen. Diese Variante ist typisch für die Live-Erzeugung von Produkten (Tabellen, Diagrammen) aus Datenbanken. ● Die leistungsfähigste Variante verwendet XLS, weil damit auch die Leistung der Client-PC genutzt wird. ● An 2. Stelle steht die Live-Erzeugung von SVG-Grafik, weil die Herstellung wenig Server-Leistung erfordert und der Transport geringe Daten-Mengen erfordert. Inline-SVG verwendet ungefähr gleiche Daten-Mengen, jedoch weniger einzelne Dateien als getrennte SVG-Dateien. ● An letzter Stelle steht die Live-Erzeugung von Pixel-Grafik, weil diese Variante die meiste Server-Leistung und das größte Transport-Volumen erfordert.	XLS Mit XLS kann man aus XML-Rohdaten jedes beliebige Text-Produkt erzeugen, hier z.B. eine HTML-Tabelle oder eine SVG-Grafik. Alle modernen Browser unterstützen XLS. Die Menge der transportierten Daten ist mit XML+XLS besonders gering. Das aufwändige Rendern (Umwandlung in Bildpunkte) erfolgt in diesem Fall vom Client-PC, der bei geringerer Wartezeit mehr eigene Leistung beitragen kann. • Mit RechtsKlick auf das Test-Objekt werden in diesem Fall die XML-Daten angezeigt, nicht der erzeugte Quelltext. ♦ Details zur Erzeugung dynamischer SVG-Grafik mit XSL
Einbettung Im einfachsten Fall werden die gewählten Test-Objekte in einen <iframe> InnenRahmen (Test-Rahmen dieser Seite) eingebettet. Mit Rechtsklick in den Rahmen wird der Quelltext des Test-Objekts angezeigt. Ausnahme: PixelGrafik-Dateien enthalten binäre Daten, die sich nicht als Text anzeigen lassen.	Wahlweise können sie in den Test-Rahmen eine HTML- oder XHTML-Seite laden und das Test-Objekt in diese Seite einbetten. Das erlaubt eine genauere Untersuchung der Tests, insbesondere dann, wenn man den Inhalt des Test-Rahmens in einem neuen Tab öffnet und dessen Quelltext anzeigt.

Dynamische Erzeugung von (SVG)-Grafik
Wenn man wünscht, Diagramme aus wechselnden Daten auf Webseiten anzuzeigen, dann ist es notwendig, die Grafik Live am Server zu erzeugen. Ein häufiger und typischer Fall ist die Live-Erzeugung von Diagrammen aus den aktuellen Daten einer → Datenbank. Alle in diesem Kapitel genannten Programme laufen normalerweise auf einem (entfernten) Server-PC. Sie sind für AnwenderInnen (Clients) nicht einsehbar und daher relativ gut geschützt.	Die Verarbeitung variabler Live-Daten an einem Webserver ist etablierte Technik (→ LAMP-Server). Man kann alle gängigen Programmiersprachen dazu verwenden, z.B. → Java, → Perl, → PHP, ... Dabei kann man zwischen mehreren Grafik-Varianten wählen, die man im ↑ Test-Bereich dieser Seite in einfacher Form ausprobieren kann.
XML+XLS+SVG ● Die leistungsfähigste Variante verwendet → XML+XLS zur Erzeugung von SVG Objekt-Grafik. • Der Server sendet die angeforderten Daten als Text in einfacher XML-Form. Die Herstellung derart einfacher Texte erfordert sehr wenig Server-Leistung und ein geringes Transport-Volumen. Die XML-Daten werden beim Laden des Test ↑ Beispiels als Quelltext angezeigt.	• Das Programm zur Erzeugung der SVG-Grafik aus den XML-Daten ist in einer XLS-Datei enthalten, welche der Server bei Bedarf sendet. Das XLS-Programm ist eine einfache statische Text-Datei. Der Browser speichert das XLS-Programm und fordert es daher für beliebig viele Diagramme gleicher Sorte nur einmal an. • Je nach XLS-Programm kann man aus den gleichen (!) XML-Daten unterschiedliche Produkte erzeugen - im Beispiel eine HTML-Tabelle oder eine SVG-Grafik. • Das XLS-Programm wird vom Browser (!) ausgeführt. Dabei nutzt man die ansonsten meist brachliegende Leistung der Client-PC und entlastet den Server.
SVG Objekt-Grafik ● Die Live-Erzeugung von fertiger SVG-Grafik ist weit effizienter als jene von Pixel-Grafik, weil am Server nur das SVG-Programm erzeugt wird, und das aufwändige Rastern (Erzeugung von Bildpunkten nach den SVG-Regeln) am Client-PC erfolgt. • Die Methode ist allerdings weniger effizient als jene mit XML+XLS, bei welcher auch das SVG-Programm am Client-PC erzeugt wird.	Bei Verwendung von SVG hat man die Wahl zwischen 2 Varianten: • Inline-SVG wird direkt in den Quelltext von XHTML-Webseiten eingesetzt. Das ist kompakter und bietet interessante neue Gestaltungs-Möglichkeiten, die im ↑ Test-Beispiel nur angedeutet werden. • SVG in Form eigener Dateien ist etwas schwerfälliger, jedoch derzeit die einzige Möglichkeit, SVG auch mit den veralteten M$IE-Browsern + Adobe SVG-Viewer zu verwenden.
Pixel-Grafik ● In diesem Fall werden die Grafik-Regeln bereits am Server in Bildpunkte (Pixel) umgesetzt. Das erfordert normalerweise weit mehr Server-Leistung und Transport-Volumen als für Objekt-Grafik. • Diese Variante ist derzeit die einzige Möglichkeit, Grafik mit dem veralteten M$IE-Browser ohne Zusatz-Programme anzuzeigen.	Bei Verwendung von Pixel-Grafik hat man die Wahl zwischen 2 realistischen Möglichkeiten: • Das offene Datei-Format PNG wird normalerweise am besten komprimiert und braucht daher das geringste Transport-Volumen. Außerdem bietet nur PNG variable Transparenz (α-Kanal). • Das Datei-Format GIF ist mittlerweile lizenzfrei verwendbar, jedoch weniger leistungsfähig als PNG. • JPEG eignet sich nicht für typische Geschäftsgrafik und lässt sich nicht verlustfrei komprimieren. Andere Grafik-Formate wie BMP, TIFF, etc. eignen sich nicht für das Internet.

Dynamische Anwendung von SVG-Grafik
Javascript (JS, EcmaScript) Wenn man sich entschlossen hat, SVG-Grafik herzustellen, dann hat man unabhängig von der ↑ Herstellung die Möglichkeit zur → Programmierung mit Javascript. Diese Programme beziehen sich jedoch nicht auf die Herstellung der Grafik, sondern auf ihre Anwendung.	JS im Quelltext Javascript-Programme sind im gleichen Quelltext enthalten wie die SVG-Anweisungen. Die Verwendung von Javascript für Webseiten ist gut bekannt, jene für ObjektGrafik leider nur wenig. Der Quelltext ist offen einsehbar, daher kann man weder die Programme noch die darin allenfalls enthaltenen Daten schützen.
DOM-Modell Javascript bietet mit den → DOM-Funktionen die Möglichkeit, auf jedes einzelne Element der Grafik zuzugreifen, d.h. auf jede einzelne Linie, jedes Rechteck, jeden Text, usw. Mit DOM-Methoden kann man alle Eigenschaften ändern, z.B. Position, Größe, Drehung, Schrift, Farbe, usw. Außerdem kann man neue Grafik-Objekte erzeugen und vorhandene löschen. Das DOM-Modell bietet ausgezeichnete Möglichkeiten zur intelligenten Anwendung, mehr durch die Phantasie als durch die Technik begrenzt sind.	Animation Wenn es der anschaulichen Darstellung dient, kann man jede Eigenschaft jedes Grafik-Elements zeitlich ändern. In den hier gezeigten ↑ Beispielen wird demonstriert: • Rotation eines Elements (Quadrat) • Translation (Quadrat), d.h. Änderung der Position, in diesem Fall unterschiedlich für die X- und die Y-Richtung. Interaktion: Man kann Javascript-Programme durch Aktionen der AnwenderInnen - z.B. Mausklick, Formular-Eingabe, usw. auslösen. In den hier gezeigten ↑ Beispielen wird die Farbe von Objekten beim Anklicken geändert.
Inline-SVG In einer modernen XHTML-Webseite kann man HTML- und SVG-Elemente besonders gut miteinander kombinieren. Das hat einige angenehme Auswirkungen: • CSS: Sowohl HTML- als auch SVG-Elemente lassen sich mit einem einzigen zentralen CSS_Block (oder mit einem externen StyleSheet) formatieren. Auch die Javascript-Methoden des style-Objekts lassen sich auf alle Elemente des Dokuments anwenden. • Javascript: DOM-Methoden lassen sich sowhl auf die HTML- als auch auf die SVG-Elemente anwenden.	In den ↑ Beispielen werden nur wenige einfache Effekte dieser Kombination angedeutet: Die Bewegung der animierten SVG-Elemente lässt sich auf die gesamte Webseite ausdehnen. Dabei kann man die Überlagerungen (Vordergrund, Hintergrund) genau steuern. Mit SVG-Elementen lassen sich HTML-Elemente interaktiv steuern: Klick auf den SVG-Kreis ändert die Hintergrund-Farbe eines HTML-Elements. Umgekehrt kann man mit HTML-Elementen SVG-Grafik steuern: Klick auf den HTML-Hyperlink ändert den Text in der SVG-Grafik.

Chr	XHTML	Chr	XHTML
<	<	<	"	"	"
>	>	>	&	&	&
			'	'	'

Chr	XHTML	Chr	XHTML
Ä	Ä	Ä	ä	ä	ä
Ö	Ö	Ö	ö	ö	ö
Ü	Ü	Ü	ü	ü	ü
			ß	ß	ß
€	€	€

Quelltext
Im Quelltext (source code) von XHTML-Dateien gelten ähnliche, jedoch wesentlich strenger ausgelegte Regeln wie für HTML. Beachten sie auch das Kapitel DOCTYPE auf dieser Seite, d.h. die verwendete XHTML-Version.	♣ Tipp: Wenn sie die hier angeführten Tipps befolgen, dann ist ihr Quelltext mit beiden Standards kompatibel: Sie können die Webseite dann wahlweise als HTML- oder als XHTML-Seite einsetzen.
Minimal-Webseite Ein XHTML Dokument muss innerhalb des <html>-Elements die Elemente <head> und <body> enthalten. Das ist auch für HTML sinnvoll, obwohl z.B. ein fehlender <head> von gängigen Browsern hingenommen wird. Ein guter (und richtig eingestellter) Web-Editor erstellt neue Webseiten bereits mit allen notwendigen Elementen.	<html xmlns="http://www.w3.org/1999/xhtml"> <head> ... </head> <body> ... </body> </html>
Kleinbuchstaben Auszeichnungs-Elemente und Attribute müssen in Kleinbuchstaben angeführt werden. z.B. <table> funktioniert, <TABLE> ergibt Fehler. • Gute Web-Editoren lassen sich so einstellen, dass nur Kleinbuchstaben für Auszeichnungen (tags) verwendet werden. • In den Daten (Text innerhalb der HTML-Elemente) darf man natürlich auch Großbuchstaben verwenden. • Auch für Dateinamen ↑ (zumindest von Webseiten) sollte man nur Kleinbuchstaben verwenden.	Abgeschlossene Elemente In XML müssen alle begonnenen Auszeichnungs-Elemente ordnungsgemäß wieder beendet werden (tag mit / ). <div>Das ist richtig</div> Einige Elemente werden in HTML ohne Abschluss verwendet, z.B. <img> (Bild, Grafik). Beginn und Abschluss solcher Elemente kann in XML im gleichen tag erfolgen: <base /> <br /> <col /> <hr /> <input /> <img /> <link /> <meta /> usw. ♣ Tipp: Die XML-Syntax funktioniert auch in HTML. Wenn man sie konsequent verwendet, lassen sich Webseiten nur durch Änderung der Deklaration zwischen HTML und XML umstellen.
Attribute Attribut-Namen müssen in Kleinbuchstaben angeführt werden. <pclass="test"> Korrekt </p> <span CLASS="test">Fehler</span> Attribut-Werte müssen in " " eingeschlossen werden <link rel="stylesheet" /> <link rel=fehler /> Attribute müssen immer einen Wert haben. Der Wert darf allerdings aus einem leeren Text bestehen. <input checked="checked" /> Fehler: <input checked />	Anker sind Sprung-Adressen innerhalb einer Webseite. Sie werden z.B. so adressiert: <a href="#ziel_1"> Sprung</a> In HTML wird des Attribut name verwendet, in XML das Attribut id, welches innerhalb eines Dokuments eindeutig sein muss. ♣ Sprungziele werden daher am besten mit beiden Attributen formuliert. Sie funktionieren dann in HTML und XHTML: <a id="ziel_1" name="ziel_1"></a>
CSS-Style Elemente Solche Elemente kommen normalerweise im <head> von Webseiten vor. Ihre Daten (innerhalb des Elements) müssen als XML-CDATA bezeichnet und durch CSS-Kommentar-Zeichen /* / von der Interpretation durch den Parser ausgenommen werden. <style type="text/css" media="screen"> /<![CDATA[/ body{background-color:#FF0;} /// ]]>*/ </style>	Script Elemente Solche Elemente können an jeder Stelle, auch mehrfach in Webseiten vorkommen. Ihre Daten (innerhalb des Elements) müssen als XML-CDATA bezeichnet und durch Javascript-Kommentar-Zeichen // von der Interpretation durch den Parser ausgenommen werden. <script type="text/javascript"> //<![CDATA[ alert("Javascript"); //]]> </script> Die Javascript-Funktion document.write kann nicht verwendet werden. Verwenden sie statt dessen die DOM-Funktionen von Javascript.
Sonderzeichen Alle Sonderzeichen müssen maskiert werden, so wie im Kapitel über Zeichensätze (oben) demonstriert. Änderung der Größe → Änderung der Größe	Darüber hinaus gibt es weitere Regeln, die jedoch selten angewendet werden. Mittelfristig sollten sie alle Webseiten nur mehr XML-konform herstellen, das bietet ihnen bei gleichem Aufwand wesentlich bessere Möglichkeiten.

Parser
Parser sind Programme, welche einen Text "abarbeiten" und interpretieren, d.h. sinngemäß darauf reagieren und z.B. eine Webseite herstellen. Alle modernen Programmiersprachen verfügen über XML-Parser zur raschen und eleganten Verarbeitung von XML-Dokumenten.	Gängige Browser verfügen meist über 2 verschiedene Parser für HTML und XML. Durch verschiedene Maßnahmen kann man ein Browser-Programm dazu bewegen, einen bestimmten Parser zu verwenden.
● Der HTML-Parser ist sehr tolerant, und erzeugt meist auch aus sehr lücken- und fehlerhaftem HTML-Quelltext noch eine halbwegs lesbare Webseite. Dieses Verhalten ist aber auch ärgerlich, wenn der Parser unerwünschte Korrekturen, Kürzungen oder Ergänzungen anbringt. Erfahrene HerstellerInnen von Webseiten beherrschen deshalb zahlreiche Tricks, um HTML-Parser zu überlisten.	● XML-Parser sind unerbittlich: Beim Auftreten eines einzigen Fehlers wird die Interpretation eines Dokuments abgebrochen. Diese Strenge mag unangenehm erscheinen - Wenn das Parsen jedoch erfolgreich abgeschlossen wird, dann ist das immerhin eine Garantie für ein (syntaktisch) fehlerfreies Dokument. Zum Debuggen können sie auch Validator-Programme verwenden (s.u.).

Validierung
Ein Validator ist ein Programm, welches Fehler in einem Objekt findet. Zur Herstellung 'wohlgeformter' (well-formed) XHTML-Dokumente benötigen sie daher einen XHTML- oder XML-Validator. Damit finden sie die Position von Syntax-Fehlern und erhalten in günstigen Fällen auch Hinweise zur Problemlösung. Wenn sie die oben angeführten Hinweise beachten, dann sollte die Herstellung fehlerfreier XML-Dokumente kein Problem sein. Sie sollten versuchen, ihren Web-Editor so einzustellen, dass sofort (ohne Nachbesserung) fehlerfreies XML codiert wird. Wenn das nicht möglich ist, dann sollten sie sich nach einem anderen Web-Editor umsehen, es gibt sie zahlreich, in guter Qualität und sogar kostenfrei aus dem Internet.	Quellen XML-Validator Software ist häufig bereits in Web-Editoren integriert - Sehen sie einmal in der Hilfe nach ! Das W3C bietet einen Online-Validator. Im Internet finden sie mit Stichwort validator eine Menge Software, meist kostenfrei. Es gibt auch Validators für andere Zwecke - Für XHTML benötigen sie einen XHTML- oder XML-Validator.
Auch der beste Validator kann nicht verhindern, dass auf manchen Webseiten Unsinn steht - dazu müsste der Validator die Daten lesen und 'verstehen'. Das überlassen sie besser den diversen Geheimdiensten - Die lesen mit Sicherheit auch ihre Webseite . .

Ausgewählte Links zum Thema 'XHTML'
	XHTML-Validator: W3C (en), Validome (de),

SVG	Scalable Vector Graphics
Live-Test	Anzeige wählbarer Varianten von SVG und Einbettung
Variable	Erläuterung der wählbaren Test-Variablen
SVG-Quelltext	Muster der zum Test verwendeten SVG-Anweisungen
SVG-Erzeugung	Erzeugung von SVG-Grafik am Server-PC
SVG-Anwendung	Animation, Steuerung durch AnwenderInnen (Interaktion)

Live SVG Test

Die Schwelle zur XML-Technologie ...

Live SVG Test

Wählbare Variable

Browser

Datei oder Inline-SVG

XSL

Einbettung

SVG-Umfang

Pixel-Grafik

Test - SVG - Quelltext

Statische SVG-Grafik

Dynamische SVG-Grafik

PHP

XLS

Einbettung

Dynamische Erzeugung von (SVG)-Grafik

XML+XLS+SVG

SVG Objekt-Grafik

Pixel-Grafik

Dynamische Anwendung von SVG-Grafik

JS im Quelltext

DOM-Modell

Animation

Interaktion:

Inline-SVG

ASCII

Maskierung

Sonderzeichen

Quelltext

Minimal-Webseite

Kleinbuchstaben

Abgeschlossene Elemente

Attribute

Anker

CSS-Style Elemente

Script Elemente

Sonderzeichen

Parser

Validierung

Quellen

Ausgewählte Links zum Thema 'XHTML'