SVG @ PS-Trainer

Wozu SVG ?
♠ Was kann SVG ?	SVG ist eine allgemein verwendbare standardisierte Technik zur Darstellung von ↓ Objektgrafik
♠ Was ist Objektgrafik ?	Objektgrafik ist eine Methode, Grafik durch Anweisungen zu beschreiben, nicht durch Bildpunkte (Pixel). • Beispiel für eine Anweisung: "Zeichne ein Rechteck (Lage, Größe, Umriss, Fläche, Schatten, ..." • Beispiele für Objektgrafik sind 'BusinessGrafik (Säulen- Kreis-Diagramme, ..), technische Zeichnungen (CAD), Pläne, Landkarten, usw.
♠ Warum keine Bildpunkte ?	Die Mehrheit aller im Internet verwendeten Bilder ist derzeit aus Bildpunkten (Pixeln) aufgebaut. Pixelgrafik (GIF, JPEG, PNG, ..) ist gut geeignet für Portraits, Landschaften, usw. • Typische Objektgrafik wird allerdings besser mit Anweisungen beschrieben. Diese Grafik-Form dominiert bei Mobil-Telefonie, steht jedoch im Internet erst am Anfang der allgemeinen Anwendung.
♠ Was bedeutet XML-Familie ?	SVG ist Mitglied der → XML-Familie: • XML (Extended Markup Language) bezeichnet eine rasch wachsende Familie von 'Sprachen' zur Beschreibung von Daten und Programmen ganz unterschiedlicher Bereiche. • XML verwendet ausschließlich einfachen Text. Deshalb ist es besonders einfach, XML-Dateien und -Programme herzustellen, zu speichern, zu transportieren und zu verwenden. • XML ist auf jedem Betriebssystem, sowie in jedem Sprach- und Kulturkreis anwendbar. XML ist international standardisiert und kann kosten- und lizenzfrei verwendet werden. • Alle XML-Mitglieder sind miteinander voll kompatibel, d.h. SVG kann in anderen XML-Objekten enthalten sein, und selbst andere XML-Elemente enthalten. • Von besonderem Interesse ist die Einbettung von SVG-Grafik in XHTML-Webseiten.
♠ Was ist XHTML ?	XHTML ist eine 'Sprache' zur Codierung von Webseiten, mit geringen Unterschieden zum klassischen HTML. Alle modernen Browser arbeiten problemlos auch mit XHTML-Webseiten, nur M$IE Browser sind technisch noch nicht so weit entwickelt ... • XHTML ist Mitglied der XML-Familie: Das erfordert bei der Entwicklung nur geringe Änderungen und bietet wesentliche Vorteile gegenüber HTML. Fast alle Seiten dieses Webs sind XHTML Webseiten. • Der Quelltext von XHTML kann (Inline) SVG enthalten, ebenso wie Anweisungen jedes anderen XML-Mitglieds.
♠ Kann man SVG mit CSS formatieren ?	CSS (Cascading Style Sheets) ist die Standard-Methode zur Formatierung von Webseiten und allen anderen Mitgliedern der XML-Familie. • CSS ist auch auf SVG anwendbar. Dazu muss CSS nicht erweitert werden, die Standard-Methoden genügen. Daher ist auch keine besondere Ausbildung notwendig: Wer CSS beherrscht, kann es auch auf SVG anwenden.
♠ Kann man SVG mit Javascript programmieren ?	Javascript (JS) ist die Standard-Programmiersprache für Webseiten und kann auch für SVG verwendet werden. Jeder gängige Browser beherrscht Javascript (JS). • JS hat mit den Standard → DOM-Methoden vollen Zugriff auf alle Elemente einer Webseite und ebenso auf jedes SVG Grafik-Objekt. • Mit JS-Programmen kann man jedes Element erzeugen, ändern oder löschen. Deshalb lässt sich JS dazu verwenden, Webseiten und SVG-Grafik interaktiv zu verändern, oder zu animieren. • Javascript kommt auch für SVG mit Standard-Methoden aus und benötigt keine Erweiterung; EntwicklerInnen brauchen keine zusätzliche Schulung.
♠ Kann man SVG mit Programmiersprachen erzeugen ?	SVG besteht aus einfachem Text und kann daher mit jedem Editor bearbeitet und von Programmen automatisch erzeugt werden. • Von besonderer Bedeutung sind Server-Programmiersprachen wie → Perl, → PHP oder Python. Man kann sie dazu verwenden, um live SVG-Grafik 'nach Bedarf' zu erzeugen. Dynamische SVG-Grafik lässt sich mit Perl oder PHP (→ Beispiel) ebenso einfach herstellen wie dynamische Webseiten. • In vielen Fällen lässt sich allerdings mit → XSL die Live-Erzeugung von Webseiten-Elementen und SVG-Grafik vollständig vom Webserver zum Client-PC übertragen.
♠ Kann man SVG mit XSL erzeugen ?	XSL ist eine Art 'Programmiersprache' zur Erzeugung verschiedener Produkte aus XML-Daten. • XSL ist selbst Mitglied der XML-Familie. • Man kann mit XSL beispielsweise aus variablen XML-Daten entweder eine HTML-Tabelle oder ein SVG-Diagramm zu erzeugen und beides auf einer Webseite anzeigen. • Die gesamte XSL-Arbeit wird am Client-PC ausgeführt. Daher wird der Webserver bedeutend entlastet. Der Server muss lediglich die aktuellen Daten zur Verfügung stellen. • Alle gängigen Browser arbeiten problemlos mit XSL. Angesichts der enormen Möglichkeiten wird XSL jedoch noch selten angewendet, vermutlich aus Unkenntnis. ♦ Details zum Thema SVG mit XSL
♠ Warum nicht Flash ?	Shockwave / Flash von MacroMedia / Adobe ist von einem einzigen Hersteller abhängig (obwohl die Grundlagen mittlerweile veröffentlicht wurden). • Flash ist eine isolierte Technologie, insbesondere kein Mitglied der XML-Familie, nicht mit CSS formatierbar und nicht mit Javascript und Standard-→ DOM-Methoden programmierbar. • Flash ist gegenüber SVG technisch und organisatorisch unterlegen, hat allerdings einen zeitlichen Vorsprung. Die Tatsache, dass viele GrafikerInnen noch immer Flash erzeugen, ist meist auf schlichte Unkenntnis von SVG zurückzuführen - oft kombiniert mit Unkenntnis der meisten anderen Methoden moderner Web-Gestaltung und -Erzeugung. • Es ist möglich, jedoch unwirtschaftlich, Flash-Grafik durch Programme automatisch zu erzeugen.
♠ Was ist SVGWeb ?	Google hat den Versuch unternommen, die Unfähigkeit des M$IE Browsers mit einem eigenen Projekt zu überwinden (obwohl der eigene Browser ↓ Chrome SVG ausgezeichnet beherrscht). Im Projekt SVGWeb wird → Javascript dazu eingesetzt, SVG-Code in Flash-Grafik zu übersetzen. Das funktioniert, jedoch langsam, aufwändig und nur mit spezieller Programmierung. SVGWeb gleicht dem Versuch, ein Auto nicht einfach zu benutzen, sondern stets eine Maschine mitzuschleppen, die bei Bedarf ein komplettes Auto erzeugt...
♠ SVG in Wikipedia ?	Auch Wikipadia (bzw. das Programm-Paket MediaWiki) hat die dauerhafte Unfähigkeit des M$IE Browsers zur Kenntnis genommen. Man kann SVG-Grafik zwar hochladen, diese wird jedoch von einem Hilfsprogramm (Batik, ImageMagick, RSVG, ...) in das Format PNG umgewandelt und angezeigt. Man kann die Original SVG-Datei zwar ansehen, jedoch normalerweise nicht in eine Wiki-Seite einsetzen.
♠ SVG bei PS-Trainer ?	In diesem Web wurde ältere ObjektGrafik mit Rücksicht auf M$IE in das Pixel-Format PNG umgewandelt. Neue Grafik und neue Versionen vorhandener ObjektGrafik werden nur mehr in SVG erstellt, da dieser Standard (seit 2001) lange genug definiert ist und von allen modernen Browsern unterstützt wird.

Objektgrafik - Pixelgrafik

Objektgrafik enthält Objekte:
Linien, Kreise, Rechtecke, Text, usw.
Komplexe Objekte werden aus einfachen zusammengesetzt.
Dazu kommen Effekte wie Filter, Farbverlauf, Drehung, Verzerrung, Transparenz, etc.

Pixelgrafik enthält Bildpunkte ohne Zusammenhang.
Jeder Punkt (Pixel) hat seine XY-Position und eine beliebige Farbe.
Die (RGB)→ Farbe wird durch 3 Zahlen 0..255 festgelegt, dazu kommt bei manchen Pixel-Formaten noch 1 Byte für den α-Kanal (Transparenz).

Text

SVG-Anweisungen bestehen aus einfachem Text.
Die oben angezeigte Grafik wird durch diesen SVG-Text erzeugt:

• Vorteil: SVG kann man mit jedem Text-Programm lesen, schreiben oder ändern. Die 4 Grafik-Objekte (circle, rect, polygon, text) sind im Quelltext leicht zu erkennen.
• SVG-Dateien lassen sich wie alle anderen Text-Dateien stark komprimieren (z.B. *.zip).
• SVG-Grafik lässt sich besonders gut in moderne Büro-Dokumente (OpenOffice) einfügen, die ebenfalls aus XML-Elementen bestehen.
• Nachteil: Die Umsetzung in Bildschirm-Punkte erfordert spezielle 'Render'-Programme - Jeder moderne Browser enthält einen derartigen Programm-Teil.

Binär

Alle Pixelgrafik-Formate sind binäre Dateien. Die Daten sind mit Text-Programmen nicht lesbar. Sie enthalten die Farb-Informationen für jeden einzelnen Bildpunkt.

• Das ergibt große Daten-Mengen. Pixel-Dateien werden daher fast immer komprimiert (GIF, PNG, JPEG). In diesem Fall kommt der Aufwand zum Komprimieren und Expandieren dazu, außerdem verschlechtert sich dadurch meist die Bild-Qualität.
• Typische Pixel-Bilder lassen sich nicht durch 'Regeln' darstellen. Man muss jedes Pixel einzeln beschreiben.
• Binäre Daten in roher Form sind für Menschen unlesbar. Zum Lesen und Schreiben (Herstellen) benötigt man spezielle (Grafik)-Software.
• Der Inhalt einer Pixel-Grafik ist für ein Programm unlesbar. Der Sinn ergibt sich nur für Menschen nach Darstellung am Monitor oder nach dem Ausdruck.

Platzbedarf

Objektgrafik-Anweisungen lassen sich mit wenigen Buchstaben formulieren. Die Größe einer SVG-Datei richtet sich nach der Anzahl der SVG-Anweisungen (Komplexität der Grafik) und ist unabhängig von der Bildgröße.

Mit einer einzigen Regel (SVG-Anweisung) können tausende von Bildpunkten erzeugt werden. Das 'Programm' für den roten Punkt <circle> braucht nur 43 Byte und erzeugt damit 1257 Bildpunkte (Pixel). Wenn man den Radius auf r="90" vergrößert, dann bleibt der Platzbedarf der SVG-Datei gleich, erzeugt jedoch 25447 rote Pixel.

• Bei richtiger Anwendung ist der Platzbedarf von SVG minimal, in der Praxis meist um den Faktor 10..1000 geringer als jener von vergleichbarer Pixelgrafik.
• Der Overhead von ca. 500 Byte pro Datei ist für größere SVG-Programme vernachlässigbar.

Der geringe Platzbedarf ist derzeit das stärkste Argument für SVG: Die Grafik braucht viel weniger Speicherplatz und wird wesentlich schneller im Internet übertragen.

Der Platzbedarf von Pixelgrafik richtet sich nach der Anzahl der Bildpunkte. Für jedes Pixel werden 3 Farb-Werte (Rot, Grün, Blau) zu je 1 Byte gespeichert. Für das gezeigte Demo-Bild ergibt das 120*120*3 = 43200 Byte, dazu noch etwas Overhead.
♦ Details zum Thema Farbe.

Im Internet wird allerdings nur komprimierte Pixelgrafik verwendet. Damit reduziert sich der Platzbedarf (meist) auf Kosten der Qualität. Große einfarbige Flächen lassen sich gut komprimieren. Die Demo-Grafik ist besonders stark auf nur 2300 Byte komprimiert.

Skalierung (Vergrößerung) wirkt sich auf Pixelgrafik stark aus: Doppelte Länge und Breite ergibt die 4fache Anzahl von Pixeln und ca. 4fache Datei-Größe und Übertragungszeit.
Im Gegensatz dazu bleibt die Größe einer SVG-Datei bei jeder Skalierung gleich, auch z.B. bei 500facher Vergrößerung.

Umwandlung

Objektgrafik lässt sich mit Render- bzw. Raster-Programmen in Bildpunkte (Pixel) verwandeln.
Solche Programme sind u.a. in allen modernen Browsern (und im Adobe SVG Plugin) enthalten. Jede Software (auch Textverarbeitung) benutzt z.B. Render-Programme, um Text-Zeichen in Bildpunkte für den Monitor oder Drucker umzuwandeln.

• Die Tabelle rechts zeigt eine Umwandlung SVG (Links) → Pixel (Mitte). Zur deutlichen Kennzeichnung wurde in der Pixel-Datei ein anderer Text eingesetzt.


SVG Objektgrafik	PNG Pixelgrafik	JPEG Pixelgrafik

• Typische Pixelgrafik (Rechts - Menschen, Blumen, Lanschaften, ..) lässt sich nicht sinnvoll in Objektgrafik umwandeln (vektorisieren).
Selbst dann, wenn mit Pixelgrafik Objekte (Kreise, Linien, Text, ..) dargestellt werden, ist die Umwandlung aufwändig und selten wirklich befriedigend.

Transformation

Verschiebung, Vergrößerung, Verkleinerung, Drehung oder beliebige Kombinationen davon sind für Objektgrafik kein Problem. Die Grafik rechts wurde aus der Grafik oben mit dieser einfachen Anweisung transformiert:

Alle Methoden sind umkehrbar, d.h. ein Objekt bleibt genau identisch, wenn es auf 50% verkleinert und anschließend auf 200% vergrößert wurde.

Die Umwandlung in Bildpunkte folgt erst nachher, daher;

● Die Bild-Qualität von Objektgrafik ist immer optimal.

Pixelgrafik lässt sich zwar auch transformieren, allerdings nur mit erheblichen Qualitäts-Verlusten. Das Bild rechts wurde genauso wie die Objektgrafik gedreht und skaliert.
• Pixel Transformationen sind mit wenigen Ausnahmen nicht umkehrbar. Je mehr davon angewendet werden, umso mehr Information geht verloren.

Ausgabe-Medium

Je nach Medium (Bildschirm, Drucker, ..) werden aus einer Objektgrafik unterschiedlich viele Bildpunkte erzeugt.
Ein Bildschirm verwendet z.B. 72 oder 96 Punkte/Zoll (dots per inch, dpi), ein Drucker 300, 600,1200 oder mehr, je nach gewünschter Qualität.

● Objekt-Grafik wird auf jedem Ausgabe-Medium in optimaler Qualität angezeigt.

• Wenn eine Pixelgrafik auf einem hoch auflösenden Medium (z.B. Drucker) ausgegeben werden soll, dann muss die Software zusätzliche Bildpunkte erzeugen (sonst würde die Grafik winzig ausgedruckt).
• Wenn man umgekehrt eine große Grafik (z.B. Originalbild einer Digitalkamera) auf einem Bildschirm anzeigen will, dann muss die Software dutzende oder sogar hunderte Bildpunkte zusammenfassen.
• Beide Vorgänge bedeuten Informations-Verlust.
Pixel-Grafik wird nur dann in optimaler Qualität ausgegeben, wenn die Anzahl der Bildpunkte genau an das Ausgabe-Medium angepasst ist.

Webseiten

Die Anweisungen von Webseiten bestehen nur aus einfachem Text. Man kann diesen HTML-Quelltext (source) mit Rechtsklick in jede Webseite anzeigen.

Inline-SVG:

Direkt in den HTML-Quelltext kann man auch SVG-Anweisungen einfügen. Das ist zweifellos die einfachste und gleichzeitig mächtigste Methode. Sie funktioniert allerdings nur mit → XHTML, dem modernen Nachfolger von HTML.

Einbettung

Alternativ kann SVG-Quelltext in einer eigenen Datei gespeichert werden. Sie lässt sich als Objekt in Webseiten → einbetten. Das ist weniger flexibel, funktioniert jedoch mit Nachhilfe durch das Adobe SVG Plugin sogar mit dem M$IE Browser.

Pixelgrafik ist binär codiert und kann daher nicht im Quelltext von Webseiten transportiert werden. Der HTML-Text enthält an Stelle der Bilder Verweise wie z.B.

Wenn ihr Browser solche Verweise findet, dann fordert er nach dem Laden der HTML-Webseite zusätzlich die darin enthaltenen Bilder vom Webserver an.

Programmierung

Javascript-Programme haben vollen Zugriff auf alle Elemente einer Webseite, und daher auch auf SVG-Grafik:

● Mit JS-Programmen kann man alle Grafik-Objekte beliebig verändern !

Damit lässt sich Animation oder interaktives Verhalten programmieren. Dazu werden genau die gleichen → DOM-Methoden verwendet wie für andere Webseiten-Objekte.
Beispiel: Erde+Mond (nächster Absatz).

Pixel-Bilder sind im Gegensatz zu Objekt-Grafik mit Programmen fast nicht zu manipulieren.
Man kann sie mit → Javascript-Programmen lediglich austauschen oder skalieren (vergrößern, verkleinern).
Mit → CSS-Anweisungen lassen sich Filter auf Pixelgrafik anwenden, das funktioniert auf derzeit gängigen Browsern allerdings nur sehr eingeschränkt.

Frend-Objekte

Pixelgrafik lässt sich als Objekt in eine Objektgrafik einsetzen, z.B. Bilder der Erde und des Mondes.
Der Objekt-Charakter bleibt dabei erhalten. Man kann die Pixelgrafik z.B. drehen, bewegen, ganz oder teilweise abdecken, usw.

▼ M$IE+Adobe SVG: Je nach Version verminderte Funktionalität (CSS-Style, Javascript) - Laden sie das Beispiel zum Vergleich mit einem modernen Browser (z.B. Firefox, Opera, ...)

Objekte (z.B. ein Rechteck) lassen sich mit Grafik-Software in Pixel-Grafik einsetzen, nachdem sie gerendert (gerastert, in Pixel umgewandelt) wurden. Dieser Vorgang ist allerdings nicht umkehrbar.
♦ Beispiele bei der Grafik-Programmierung mit PHP.

Verwendung von Pixelgrafik-Objekten in SVG: Die Pixel-Bilder von Erde und Mond werden gemeinsam mit der Bahnlinie und einem Text verwendet. (Rechtsklick zur Anzeige des SVG Quelltextes).

Meta-Information

sind beschreibende Daten, zusätzlich zur eigentlichen Bild-Information. Solche Angaben haben rasch zunehmende Bedeutung.

● SVG kann beliebig viele Meta-Daten Texte aufnehmen.

Das erfordert keine besonderen Maßnahmen, da SVG-Anweisungen ohnehin nur aus Text bestehen.
Suchmaschinen oder Datenbanken können z.B. große SVG-Daten-Mengen mit wenig Aufwand und in kurzer Zeit nach Meta-Daten in SVG-Grafik durchsuchen.

Pixelgrafik enthält in einfacher Form keine Meta-Daten. Es ist daher für normale Programme unmöglich festzustellen, was auf einem Pixel-Bild angezeigt wird.
Seit der allgemeinen Verbreitung von Digital-Kameras ist es üblich, einige wenige Meta-Daten zusätzlich in Pixel-Bilder zu verpacken (z.B. EXIF). Der Zugang dazu erfordert jedoch eigene spezialiserte Programme.
Ein Sonderfall ist Software zur Bild-Erkennung, die allerdings keine Meta-Daten nutzt, sondern selbst welche erzeugt.

Datenbank

SVG-Objektgrafik besteht aus einfachem Text und lässt sich daher ideal von jeder Datenbank verwalten. Weitere Argumente für das Speichern in Datenbanken sind die geringe Größe und die Möglichkeit, zusätzliche Meta-Daten über den dargestellten Inhalt zu verwalten.

Pixelgrafik lässt sich zwar von modernen Datenbanken (z.B. → MySQL) verwalten, das hat jedoch kaum Vorteile gegenüber einem Dateisystem. Wegen des größeren Platzdedarfs von Pixelgrafik erreichen die Datenbanken bald eine unhandliche Größe.

Ideale Anwendung

(SVG)-Objektgrafik ist ideal geeignet zur Darstellung jeder Grafik, die geometrische Formen oder Text enthält oder daraus aufgebaut ist.

Pixelgrafik ist ideal geeignet zur Darstellung von Bildern, die keinen bestimmten Regeln folgen, d.h. für typische Portraits, Landschaften, Pflanzen, Tiere, usw.

Browser: 'native'-SVG oder SVG-PlugIns
Native SVG Alle modernen Browser können selbst (native) SVG-Grafik verarbeiten. Sie benötigen dazu keine Zusatz-Programme (Plugins). SVG-Grafik wird in Bildpunkte (Pixel) umgewandelt und auf dem PC-Monitor anzeigt. SVG ist in der Mobil-Telefonie bereits eine Schlüssel-Technologie. Seit gute Browser mit eigener SVG-Fähigkeit verfügbar sind, gewinnt SVG auch im Internet rasch an Bedeutung.		SVG-Grafik kann in gewöhnlichen HTML-Webseiten als externes Objekt verwendet werden, ähnlich wie Pixel-Grafik (GIF, JPEG, PNG). Die Zukunft liegt jedoch bei → XHTML: SVG-Anweisungen können direkt (inline) in den Quelltext solcher Webseiten integriert werden. XHTML kann übrigens nicht nur SVG-Objektgrafik enthalten, sondern (Text)-Anweisungen aller Mitglieder der XML-Familie.
FireFox, Mozilla, Camino	FireFox ist das populärste Mitglied der Gecko-Familie (Firefox, Mozilla, ..) Als OpenSource Projekt kostenfrei und ohne Lizenzpflicht. Sehr schnell und mit ausgezeichneter SVG-Unterstützung. Erhältlich für viele Sprachen und alle gängigen Betriebssysteme. Alle gängigen Linux-Distributionen enthalten Firefox als Standard-Browser.
Opera	Seit Version 9 unterstützt Opera 'native' (ohne Plugin) alle wichtigen SVG-Funktionen inklusive Scripting und Animation. Opera ist nicht nur bei SVG technisch führend. Den besonders schnellen Opera-Browser gibt es kostenfrei für alle gängigen Sprachen und Betriebssysteme.
Safari	Unterstützt 'native' alle wichtigen SVG-Funktionen inklusive Scripting und Animation. Der traditionell auf Apple-PC führende Browser ist kostenfrei auch für Windows erhältlich. Sehr schnell und technisch ausgezeichnet.
Chrome	Der relativ neue Browser von Google unterstützt 'native' alle wichtigen SVG-Funktionen inklusive Scripting und Animation. Sehr schnell, jedoch nur für Windows verfügbar.
Konqueror	War der erste Browser mit 'native' integrierter SVG-Fähigkeit. Konqueror ist Standard-Bestandteil vieler Linux-Systeme und dient als Datei-Manager und Web-Browser. Leider wurde die SVG-Fähigkeit noch nicht ausgebaut, daher derzeit weder Animation noch Scripting. Versionen für Windows-Betriebssysteme sind leider nicht angekündigt. Apple verwendet Konqueror-Technologie für den Browser Safari.
PlugIns (Browser-Zusatzprogramme): Auslauf-Produkte für veraltete Browser...
SVG-Plugin Ältere Browser wie M$IE verstehen selbst kein SVG. Sie können ein SVG-Objekt jedoch an ein Hilfsprogramm (Plugin) zur Verarbeitung übergeben. Da alle modernen Browser SVG beherrschen, gibt es nur noch Auslauf-Versionen alter SVG-PlugIns.		Das Adobe SVG Viewer - PlugIn hat ausgezeichnet funktioniert und war bis 2005 führend in SVG-Technologie. Es ist sehr empfehlenswert, den M$IE Browser wenigstens mit dem Adobe SVG-Plugin zu erweitern.
Adobe SVG Viewer Eingestellt.	■ Dieses Produkt ist ein Beispiel dafür, wie eine technisch ausgezeichnete Entwicklung (und viel Geld) durch falsches Management vernichtet wurde. ■ Der Adobe SVG Viewer war bis zur Version 2 ein PlugIn (Erweiterungs-Programme) für alle gängigen Browser. Dann wurde die Entscheidung getroffen, die Version 3 nur mehr für den M$IE Browser auszulegen. ■ Dadurch wurden alle anderen Browser-Hersteller gezwungen, selbst die SVG-Entwicklung zu forcieren. Heute beherrschen alle modernen Browser (z.B. Firefox, Opera, Safari, Chrome, ..) SVG "native" (ohne PlugIn). ■ Die geplante Nachfolge-Version 6 des Adobe SVG Plugin sollte zwar wieder auf allen Browsern laufen, wurde jedoch durch die Browser-Entwicklung überholt. ■ Seit der Fusion von Adobe und Macromedia wird das konkurrierende Produkt Flash unterstützt, obwohl es technisch weit unterlegen ist. ■ Am besten hat die Version 3.0 funktioniert. Wegen notorischer Sicherheits-Probleme des M$IE Browsers wurden später wesentliche Fähigkeiten des Plugins (Scripting) wieder abgeschaltet. ■ Das Plugin kann nur für externe SVG-Dateien verwendet werden, nicht jedoch für → XHTML mit Inline-SVG. ■ Auch die Erzeugung von → dynamischer SVG-Grafik mit XSL funktioniert nicht. ♣ Tipp: Moderne Browser verstehen nicht nur → XML, → XHTML, → XSL und SVG, sie sind auch schneller, sicherer und in vielen anderen Details überlegen...
Java	Batik /Squiggle) ist ein gut eingeführter Toolkit für die Verwendung von SVG mit → Java. Batik wird als Apache OpenSource Projekt geführt und ist daher lizenzfrei verfügbar. Da Java auf allen gängigen Betriebssystemen läuft, ist Batik ebenfalls auf jedem PC verwendbar. Batik arbeitet besonders sauber und schnell; u.a. in Kombination mit dem MediaWiki Programm-Paket.
Mobil-Telefonie: In diesem Bereich breitet sich SVG derzeit am schnellsten aus: SVG spart enorm Bandbreite und wird daher zunehmend für Grafik, Animation, Spiele und Information eingesetzt. Links: Bitflash, Ikivo, TinyLine		CAD & GIS: Gängige Programme dieser Sparten bieten Export und Import im SVG-Format an. SVG ist daher bereits heute eine gemeinsame Drehscheibe für Objekt-Grafik. Das wird vermutlich die Bedeutung der zahlreichen individuellen Objektgrafik-Formate der einzelnen Hersteller langsam zu Gunsten von SVG herabsetzen.
Diese Zeile ist nur für den veralteten und fehlerhaften M$IE Browser notwendig	damit dieser das vorgegebene Layout auch wirklich einhält...	Tipp:	Jeder moderne Browser ist besser, schneller, sicherer...

Live SVG Test
Auf einer eigenen → Testseite können sie SVG testen: Während die Entwicklung von M$IE stagniert, und diejenige von Adobe SVG Plugin eingestellt wurde, bieten moderne Browser in rascher Folge neue Versionen mit immer besserer SVG-Unterstützung. Die Testseite bietet die Möglichkeit, den aktuellen Stand auszuprobieren.	Für EntwicklerInnen interessant sind die verschiedenen Möglichkeiten zum Einsatz von SVG. Einige Varianten ergeben bei Kombination eine große Anzahl verschiedener Möglichkeiten, die sie Live testen können.
Entweder sollte ein SVG-Plugin installiert sein, oder eine → MIME-Type der Gruppe image/svg+xml unterstützt werden, oder ein geeignetes VB-Objekt verfügbar sein:	Auf der → Live-SVG-Testseite haben sie die Möglichkeit, verschiedene Varianten von SVG und der Einbettung von SVG-Grafik zu testen.
Live→Javascript-Daten für ihren Browser. Keine Panik - Diese Daten wurden nicht ausspioniert und über das Internet gesendet, sie wurden von ihrem Browser Live am eigenen PC erzeugt. navigator.appName = ??? navigator.appVersion = ??? navigator.userAgent = ???
SVG-Analyse mit VBScript SVG ist nicht der einzige Standard, der vom M$IE Browser ignoriert wird: Die → Javascript-Objekte navigator.mimeTypes, navigator.plugins sollten Auskunft darüber geben, ob der Browser SVG vesteht oder ob dafür wenigstens ein Plugin geladen ist. Beide werden vom M$IE Browser seit Jahren nicht unterstützt...	Alternativ wäre es theoretisch möglich, mit der firmen-eigenen Programmiersprache → VBScript festzustellen, ob das Adobe SVG Plugin geladen ist. Die Ausführung derartiger (ActiveX)-Programme ist jedoch aus Sicherheits-Gründen auf üblichen Browsern verboten. Ein VBScript Demo-Programm zu diesem Zweck war ursprünglich an dieser Stelle enthalten. Es wurde entfernt, weil man seine Ausführung erst mit komplizierten Dialogen erlauben muss, und weil die Ausführung unzumutbar lange dauert.

SVG am Webserver
Jeder Webserver sendet unterschiedliche Dokumente an die Clients. Zur Information des Browsers wird vor den Daten der → HTTP-Header gesendet. Darin wird mit der → MIME-Type die Art der nachfolgenden Daten angekündigt. ► Die korrekte MIME-Type von SVG ist image/svg+xml Der Standard-Webserver → Apache kennt und verwendet die korrekte MIME-Type für SVG. Falls ihr Webserver diese MIME-Type noch nicht kennt und SVG-Dateien anbietet, dann sollten sie die Type in der Konfiguration eintragen. Unabhängig von der HTTP-Ankündigung ignorieren die meisten M$-Produkte die MIME-Type und interpretieren Dokumente nach der file-extension (Datei-Endung). Die Programme dieses Herstellers können SVG-Dokumente meist nur als *.svg Dateien erkennen und verwenden. Alle Angaben ohne Gewähr !	► Apache Webserver: MIME-Datei auf Linux: /etc/apache/mime.types MIME-Datei auf Windows: c:\programme\apache group\apache2\conf\mime.types Sollte diese Zeile enthalten: image/svg+xml svg ► M$IIS: Gute Beschreibung bei svgfaq ! MIME type info and checker @ http://www.pinkjuice.com/SVG/mime.xhtml
Links: SVG-Wiki, SVG-FAQ

Ausgewählte Links zum Thema SVG
Adobe hatte bis zur Einstellung des Adobe SVG Viewers einen großen Vorsprung bei der SVG Technologie. Daher sind ältere Tutorials und Beispiele im Internet ganz auf den Adobe SVG Viewer zugeschnitten. Nur wirklich aktuelle Webs berücksichtigen bereits die modernen Browser, z.B. von Firefox, Opera oder Safari.	Die direkte (native) SVG-Unterstützung durch moderne Browser bietet bessere Möglichkeiten (z.B. Inline-SVG) und erfordert z.T. etwas andere Syntax. Achten sie daher besonders darauf, kompatiblen SVG-Code genau nach W3C-Standard herzustellen.
Standards und Hersteller: SVG-Homepage beim W3C SVGX.org Adobe: SVG-Viewer, Demo-Beispiele, Entwicklung, Tutorial, Corel: SVG-Viewer (eingestellt) Batik Toolkit (Java) von Apache CSIRO SVG Viewer (Java) Squiggle - SVG Browser von Apache (Linux & Windows) Mozilla @ SVG - Info, ausgezeichnete Beispiele SVGWeb-Projekt von Google	Tutorials & Beispiele: Sun: Intro, Tutorials, Beispiele Zvon - Zvon - SVG Example Repository: W3C-Beispiele ! Heise: SVG-Tutorial (de): Grundlagen, Filter & Animation, WDVL: SVG Links & Resources About SVG (de) SVG Tutorial (de) Kevin Lindsey - Tutorial, Beispiele (JavaScript) Jakob Jenkov - SVG Tutorial SVG-wiki carto-net - Ausgezeichnete kartografisch spezialisierte Beispiele, database to SVG (SQL->PHP->SVG) Beispiel, XSL to SVG
Resourcen: Wikipedia: SVG (de) SVG-Wiki: Specification, Implementation, Documentation, ... phphtmlib (PHP) XML_svg2image ist eine PHP Klasse zur Erzeugung (Rastern) von PNG oder JPEG Bildern aus SVG. SVGnet (OpenSource C++) Croczilla - Mozilla SVG project Avenza - Map SVG University of Helsinki SVG-Demo	Links: Goosee: SVG-Links S-V-G Java: CSIRO SVG Toolkit Batik SVG Toolkit (Apache Group)

XML	Extended Markup Language ↔ Die XML-Familie
Wozu SVG ?	Was ist SVG und wozu kann man es verwenden ?
Objekt und Pixel	Grafik mit Objekten oder Bildpunkten
Browser & Plugins	Browser mit "native" SVG-Fähigkeiten oder SVG-Plugins
Live-SVG-Test	Testen sie SVG-Varianten und ihren Browser live.
SVG am Webserver	Ihr Webserver sollte image/svg+xml kennen
Demo	Einige SVG Bei-"Spiele"
SVG mit XSL	Dynamische (Live)-herstellung von SVG-Grafik mit XSL
Entwicklung von SVG	Kein Manual, aber einige praktische Hinweise
Links	Ausgewählte Links zum Thema 'SVG'

SVG

Scalable Vector Graphics

Wozu SVG ?

Objektgrafik - Pixelgrafik

Text

Binär

Platzbedarf

Umwandlung

Transformation

Ausgabe-Medium

Webseiten

Programmierung

Frend-Objekte

Meta-Information

Datenbank

Ideale Anwendung

Browser: 'native'-SVG oder SVG-PlugIns

Native SVG

SVG-Plugin

Live SVG Test

SVG am Webserver

Ausgewählte Links zum Thema SVG