SVG-Entwicklung

Programmierung von SVG Objekt-Grafik

SVG bietet (Live) programmierbare Grafik auf Webseiten und hat daher enormes Entwicklungs-Potential.
Diese Seite stellt eine Auswahl von Themen vor und kann References oder Tutorials nicht ersetzen ! 		Alle modernen Browser beherrschen SVG.
Lediglich der veraltete M$IE Browser braucht dazu das Adobe SVG Plugin, und kann selbst damit nur statische Grafik (ohne Javascript-Programme) anzeigen.
SVG Scalable Vector Graphics
Einbettung von SVG XHTML/Inline-SVG, SVG-Datei, SVG mit XML+XSL
SVG mit PHP Dynamische Erstellung von SVG-Grafik
SVG & DOM SVG-Grafik und das Document Object Model
Koordinatensystem Koordinatensystem von Element, Gruppe, Dokument
Gruppierung Aufbau komplexer Elemente aus einfachen Bestandteilen
Grundelemente SVG-Shapes:
Linien
Position, Farbe, Stärke, Überlagerung, ...
Pfade
Kombination von Geraden und Bezier-Kurven
Flächen
Rechtecke, Kreise, komplexe Flächen
Text
Zahlreiche Gestaltungs-Möglichkeiten
Bilder
Kombination von Pixel- und Objekt-Grafik
Animation <animate>, Bewegung entlang von Pfaden, Zeit-Steuerung, ECMAScript, SMIL, ...
Clipping & Maskierung Abschneiden, Ausschneiden, Ein- & Ausblenden, Überlagern
Filter Einfache Filter, Überlagerung, Animation, neue Objekte, ...
DOM Das Document Object Model
CSS Cascading StyleSheets
Ereignisse Programmierung von Events
XSL Automatische Erstellung von SVG-Objekten mit XML und XSL
Beispiele Kreis-Diagramm
Links Ausgewählte Links zum Thema 'SVG-Entwicklung'

Browser-Rücksicht ?
Ursprünglich wurden alle SVG-Seiten dieses Webs Browser-unabhängig programmiert. Das hat einen großen Aufwand erfordert, da man viele Details für den nur selten Standard-konformen M$IE-Browser getrennt herstellen muss.

Damit wird nun aufgeräumt. Wer den SVG Standard nach einem Jahrzehnt noch immer nicht beherrscht, verdient nicht viel Rücksicht. 		Alle SVG-Teile von Seiten dieses Webs werden daher auf die Standard-konformen Teile reduziert, die mit allen modernen Browsern problemlos funktionieren.

Alle für den M$IE Browser eingefügten Extrawürste werden schrittweise entfernt. Das wird allerdings noch einige Zeit dauern.

Browser

Rechts ist dargestellt, wie sich ihr Browser selbst beschreibt.
Dazu werden → Javascript Standard-Funktionen verwendet.
Javascript abgeschaltet ?
Ein Rest an Rücksicht auf den M$IE Browser wird noch beibehalten, obwohl auch das die Herstellung guter Webseiten aufwändiger und weniger flexibel macht.
• Vorläufig wird auf die direkte (Inline)-Einbettung von SVG verzichtet.
Durch diesen Kompromiss ist es möglich, auch mit M$IE+Adobe SVG Viewer zumindest statische SVG Grafik anzuzeigen.
Inline SVG bietet zwar die meisten Möglichkeiten, schliesst jedoch den M$IE Browser vollständig aus: Das ist nur mit echten → XHTML Webseiten möglich, und auch diese Technik wird vom M$IE Browser noch immer nicht beherrscht...
Der IT-Marktführer macht es selbst schwierig, auf seine Schwächen und Fehler Rücksicht zu nehmen:

Die Programmiersprache → Javascript bietet mit den Objekten navigator.plugins und navigator.mimeTypes die Möglichkeit, die Browser-Fähigkeiten zu analysieren und entsprechend darauf zu reagieren. 		Leider ist der M$IE Browser auch nach Jahrzehnten noch nicht in der Lage, diese Angaben zu machen. Vielleicht sollte man wenigstens einen kleinen Teil der Erträge in die Entwicklung investieren...
Der Hersteller hat anfangs versucht, der populären Programmiersprache Javascript mit der eigenen Entwicklung → VBScript (VisualBasic für Browser) Konkurrenz zu machen. Der M$IE Browser bietet die Möglichkeit, VBScript Programme Live auszuführen. Mit VBScript wäre es (mühsam aber immerhin) möglich, festzustellen, ob und welche Version Version des Adobe SVG Plugin im M$IE Browser geladen ist.
Der IT Marktführer hat sich jedoch auch über das strikte Verbot hinweggesetzt, mit dem Browser auf Resourcen oder Dateien des Client-PC zuzugreifen: Mit VBScript / ActiveX kann man (theoretisch) jede Arbeit am eigenen PC ausführen, inkl. Lesen, Schreiben und Löschen aller Daten... Es war keine Überraschung, dass mit diesen Möglichkeiten ausgiebig Missbrauch betrieben wurde. Daher ist mittlerweile die Ausführung von VBScript /ActiveX in jedem M$IE Browser abgeschaltet. Nur dann, wenn man sich in die Tiefen des Menü-Befehls 'Internetoptionen' begibt, kann man noch einige dieser Möglichkeiten aktivieren.
Das wird praktisch von niemandem gemacht, daher besteht keine realistische Möglichkeit, auf die SVG-Probleme des M$IE Browsers Rücksicht zu nehmen.

SVG-Werkzeug

Text Editor

SVG-Grafik besteht aus einfachem Text (nur → ASCII-Zeichen) und kann daher mit jedem Text-Editor erzeugt, betrachtet oder bearbeitet werden.

Auf Linux verwendet man z.B. kate oder kwrite, absolute Puristen bleiben beim vi Editor, der sich allerdings auch (mit SSH) fernsteuern lässt. 		Die mit Windows installierten Editoren notepad.exe oder write.exe sind notfalls verwendbar, jedoch recht primitiv.
Verwenden sie besser keine Textverarbeitungs-Programme wie OpenOffice Writer oder M$Word !

Notepad++ (NPP) ist ein ausgezeichnetes (kostenfreies) Werkzeug für EntwicklerInnen !   NPP braucht keine Installation und kann daher auch von einem USB-Stick verwendet werden.

Grafik-Editoren

Es ist naheliegend und zeitsparend, zur SVG-Entwicklung eine grafische Oberfläche zu verwenden.

Alle großen Hersteller von Grafik-Software haben mittlerweile die Bedeutung von SVG erkannt und bezeichnen sich selbst gerne als Spezialisten - natärlich auch für SVG.
Das ist in den meisten Fällen - höflich formuliert - wenig zutreffend. Die angebotenen Programme erzeugen zweifellos (auch) SVG-Dateien. Dabei wird SVG jedoch nur selten sinnvoll eingesetzt. Die solcherart erzeugten Dateien sind meist viel zu groß. Damit werden die wichtigsten Vorteile von SVG geopfert: schlanker und übersichtlicher Code, winzige Dateien, kleines Transport-Volumen, rasche Anzeige durch den Browser.
Die gleiche Kritik gilt derzeit auch für Code-Umwandlungen. Es gibt eine Menge guter Software für Objekt-Grafik, z.B. CAD oder Büro-(Business)-Grafik. Die besseren Programme dieser Kategorie können u.a. auch SVG erzeugen, speichern oder andere Objekt-Grafik in SVG umwandeln. Auch dabei wird leider oft unübersichtlicher und viel zu großer SVG Quelltext erzeugt.

Achten sie besonders darauf, ob ein Programm SVG mit einem speziellen Namespace erzeugt, d.h. mit (meist überflüssigen) Grafik-Elementen, die nicht dem SVG-Standard entsprechen und von einem bestimmten Hersteller abhängig sind. Man erkennt das bereits an der SVG-Deklaration.

Aus rechtlichen Gründen wird keines der betroffenen Programme genannt - außerdem könnte es mittlerweile eine gut funktionierende Version geben.

Vektorisierung

Von manchen Stellen wird empfohlen, Pixel-Grafik zu vektorisieren, d.h. in Objekt-Grafik umzuwandeln. Das ist in Mehrzahl aller Fälle unsinnig. Der erzeugte SVG-Code ist nicht nur unübersichtlich, sondern oft sogar größer als die ursprüngliche Pixel-Grafik. Darüber hinaus wird jeder Browser sinnlos damit beschäftigt, daraus wieder Pixel-Grafik für die Monitor-Ansicht herzustellen...
Es gibt nur ganz wenige Fälle, in denen die Vektorisierung sinnvoll ist: Die Pixel-Grafik muss vorher auf wenige Farben, einfarbige Flächen und saubere Linien reduziert werden. Wenn die erzeugte SVG-Grafik mehr als 50% der Größe der Pixel-Grafik benötigt, dann sollte man davon Abstand nehmen. Sinnvoll eingesetzte saubere SVG-Grafik braucht viel weniger Speicherplatz als Pixel-Grafik.
Prüfen sie selbst das aktuelle Software-Angebot, das sich rasch ändert. Immer einen Versuch wert ist z.B. Inkscape oder OpenOffice Draw

Wenn sie ein Programm finden, das sauberen, kompakten SVG-Code erzeugt, feiern sie den Tag und genießen sie die Vorteile von SVG Grafik. 		Wenn das Ergebnis nicht zufriedenstellend ausfällt, dann bleiben sie bei einem Text-Editor: Die Verwendung von riesenhaften SVG-Dateien ist nicht sinnvoll, und das Ausbessern von unsauberem Code ist viel zu mühsam.

Test

Eine einfache Geschäfts-Grafik kann als Test für SVG-Werkzeug dienen.
  Säulen
  Kreis


GrafikSVGGIFPNG
Größe (Byte) 3110 4041 2006

Das Beispiel rechts zeigt zum Vergleich beide Bilder. Die Datei-Größe ist nur ein Richtwert:
SVG kann durch Weglassen von Kommentaren und Auflösung von Gruppen um 30-50% verkleinert werden !
GIF und PNG werden je nach Grafik-Programm um +/-10% unterschiedlich erzeugt.

Kontrolle:
• Von der SVG-Grafik lässt sich mit Rechtsklick der SVG Quelltext anzeigen, speichern und beliebig verwenden.
• Die PNG-Grafik lässt sich als Pixel-Bild speichern.

Stellen sie mit ihrem SVG Grafik-Editor eine Grafik ähnlich diesem Muster her und vergleichen sie Quelltext und Datei-Größe.

Wenn sie ein Vektorisierungs-Programm verwenden: Wandeln sie die PNG Pixel-Grafik in eine SVG Objekt-Grafik um, prüfen sie den Quelltext und die Datei-Größe.

Ausgewählte Links zum Thema 'SVG-Entwicklung'

Yahoo-Group "SVG developers"
Jonathan Watt: SVG Authoring Guidelines
SVG Wiki,
Kevin Lindsey: SVG Tutorial 		W3C: Namespaces in XML, DOM Core,
Mozilla SVG Project Croczilla,
Zvon: Zahlreiche ausgezeichnete References & Tutorials (XML, SVG, ..), Online & zum Download.

Zum Inhaltsverzeichnis Homepage von PS-Trainer   >   Entwicklung   >   SVG   >   Entwicklung