Wie werden SVG-Dateien angezeigt?

Direkt zur Übung

Zuerst einmal: ja, sie werden meistens überhaupt angezeigt. Das ist schon mal ein großer Schritt in die richtige Richtung. Die Frage ist nur, von was sie angezeigt werden. Womit wir beim Thema sind:

Da SVG eine Unterdefinition von XML ist und sich XML auf die Fahnen geschrieben hat, Inhalt von Präsentationsform zu trennen, wäre es absolut kurzsichtig, SVG-Dateien nur für eine bestimmte Anzeigenart zu entwickeln etwa wie beim Postscript.

Die Flexibilität bestimmt den Aufwand

Wenn der Inhalt XML-isiert ist, kann dieser mittels unterschiedlichen Interpretern auch auf völlig unterschiedlichen Anzeigenarten präsentiert und ausgegeben werden, auf Handys z.B. genauso einfach wie auf Bildschirmen oder auf auflösungshungrigem Papier in Hochglanzqualität.

Im Prinzip ist es immer die gleiche SVG-Datei, die von den Interpreten für das jeweilige Medium passgenau übersetzt wird.

Natürlich muss deshalb jeder Interpreter wissen, was das eigentlich ist, was er gerade interpretieren soll, d.h. die SVG-Datei muss exakt strukturiert sein.

Die Einfachheit siegt

Wenn nun (und das ist das erste Geniale an SVG) die Strukturierung Teil des verwendeten Befehlscodes ist und es einem dazu dank "offenem" XML noch relativ freigestellt ist, wie die Strukturierung aussieht und wie die Verknüpfungslogik eingebaut wird, haben wir ein universelles Instrument für jegliche Form von Inhalt. Bis dahin ist es zwar noch ein weiter Weg, aber dieses Ziel gilt nach wie vor.

SVG ist eigentlich nicht nur für Bildschirme und das Internet gemacht, aber auch dort passend

Heute steht zweifelsohne die Bildschirmdarstellung im Mittelpunkt der Entwicklung. Das nicht nur deshalb, weil die Monitore immer feiner auflösen und versprechen, kleiner und billiger zu werden.

Der Grund ist auch ein anderer: Wie kommen die Daten ins Papier? Wie schnell geht das? Und wie kriege ich das Papier zum Leser oder zur Leserin? Wie Sie auf den Bildschirm kommen, ist mittlerweile allen klar: elektronisch schnell übers Internet.

"K I S S ("Keep it simple and stupid", frei ins deutsche übersetzt bedeutet das in etwa: "Halt es idiotensicher", abgekürzt: HEI, und drückt den Wunsch vieler Experten aus, mit SVG etwas Einfaches auf die Beine zu stellen.

Zitat: Tobias Dahidden (Uni Zürich)
auf der SVG-Open2003 in Vancouver

Woher wissen Sie eigentlich, dass es sich hier um einen Mund handelt?
Mund in Neuem Fenster öffnen

Was rein geht, muss wieder raus

Informationsübertragung passiert nur dann, wenn alle Befehle in einer Sprachnorm sowohl vom Sender (hier: SVG-Schriftsteller/in) wie auch vom Empfänger (hier: der Maschine, Browser, etc.) eindeutig erkannt werden. Es muss also eine vorherige Absprache geben, was erlaubt ist und was nicht. Eine Art Regelwerk, Sie können es auch als Gesetzlichkeit verstehen, auf jeden Fall sind es Definitionen, die

nach logischen Gründen strukturiert sind,
entsprechende Befehlskürzel vorschreiben,
eine sinnvolle Nomenklatur (Schreibweise, Namensnorm) enthalten und
passende Zusatz-Attribute erlauben.

Diese Definitionen müssen Sie als SVG-Schriftsteller/in lernen und kennen. Die Maschine muss diese Definitionen aber auch kennen, sonst landet ihre schöne Befehlskette im unverstandenen Nirwana.

SVG ist eine moderne Sprache, was mittlerweile soviel heißt wie: Diese Sprache ist auch für uns Menschen relativ einfach lesbar. Das war nicht immer so (Siehe Postscript oder C++).

Zu den Befehlsdefinitionen

Deshalb brauchen heute auch moderne Browser wie der Internet Explorer 6 noch ein so genanntes Viewer-PlugIn. Dieses interpretiert die Daten der SVG-Datei und besorgt deren Ansicht (Im Prinzip ist das ein kleines Programm, das Ihrem Browser erzählt, was SVG eigentlich ist, so dass er es darstellen kann).

SVG-BrowserPlugIn für Internet-Explorer installieren

Mittlerweile gibt es diese Plugins von mehreren Firmen als kostenlose, teilweise sich selbst installierende Downloads. Nach dem Installieren haben Sie eine Maschine, die SVG-Code interpretieren kann, sie wirkt als Interpreter für Ihren Code.

Erinnern Sie sich: es ist keine fünf Jahre her, als die Idee von SVG aufkam, bald gibt es Spezifikation 1.2, aber es wird noch ein wenig Zeit vergehen, bis alle Browser den Viewer schon eingebaut haben.

Eine Übersicht über die zur Zeit angebotenen Viewer geben wir im Kapitel 8.

Die "verteilte Grund-Logik" der Doctypes ( DTD)

Das zweite geniale an SVG ist, dass die Definitionsliste und andere Steuerinformationen nicht fest in das eigentliche PlugIn und damit in den Browser eingebaut sind, sondern als so genannte Data Type Definition (DTD), einer "nachladbaren öffentlichen Liste" im Internet liegt.

Dadurch kann sich die SVG-Technik ändern (Fortschritt) und bei Schwierigkeiten mit der Verarbeitung kann ein PlugIn automatisch in dieser Datei nachschauen, was es tun soll.

Wer fortgeschrittene XML-Programmier-Erfahrung besitzt, kann sich diese Steuerdateien auch selbst schreiben (es ist nur eine Text-Datei) und sich dann in seinen SVGs darauf beziehen.

Je nachdem, welche DTD im Kopf der SVG-Datei referenziert wird, entscheidet sich auch, ob eine SVG-Datei nach der Spezifikation 1.0, 1.1 oder 1.2 interpretiert werden soll. Die Entwicklung dieser DTDs ist in vollem Gange.

Die DTDs und andere Steuer-Dateien können Sie sich vorstellen wie das Bios eines Rechners, es sind (unabhängig vom Betriebssystem) Basis-Regeln des Browser-PlugIns.

Was ist eine Doctype?

Starten Sie ein neues Browser-Fenster mit der Adresse der Document Type Declaration für SVG 1.0 und schauen Sie sich diese einfach mal an:

http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd

A. Was macht ein Interpreter?

Wenn Sie einen roten Kreis zeichnen möchten, schreiben Sie:
<circle cx="100" cy="50" r="25" fill ="red"/> Damit definieren Sie einen Kreis, dessen Mittelpunkt bei X/Y=100/50 liegt und einen Radius von 25 hat.

Weil es sich um eine SVG-Datei handeln soll, müssen Sie dem Interpreter noch mitteilen, wo der SVG-Abschnitt anfängt und auch, wo er aufhört:

Damit ergibt sich bei Integration in diese Tabelle mit
<embed width="100%" height="100" src="ueb/ueb2.svg"> :

Damit weiß aber weder Ihr Bildschirm, noch ihr Interpreter, was z.B. der Wert 100 bedeuten soll, sind das mm, Pixel oder mittelalterliche Ellen? Und was wären dann z.B. 100 mm auf einem Apple-Bildschirm (95dpi) gegenüber einem 72 dpi-Bildschirm bei Windows? Und beide wissen auch noch nicht, dass es sich überhaupt um eine SVG-Datei handelt.

Also erweitern Sie Ihre Code-Schreibe am Anfang der Text-Datei um:

Ergibt in Etwa die japanische Flagge, die zwei Fragen aufwirft:

Üben Sie mit

Starten Sie einen Editor und schreiben Sie diese Code-Entwicklung einmal nach, Sie werden feststellen, es ist ganz einfach, denn alle SVG-Dateien sind eigentlich nur simple Text-Dateien, bei denen es z.B. völlig egal ist, wie viele Leerzeichen zwischen Befehlen stehen. Auch wirken sich der Übersicht halber gesetzte Zeilenumbrüche nicht auf die Funktion aus.

B1. Warum ist dieses Bild 200 x 100 Pixel groß?
B1. Im Code stehen doch gar keine Einheiten!

Diese Abbildung ist deshalb 200 x 100 Pixel groß, weil die SVG-Datei hier in diesem HTML-Dokument als zusätzliche Webkomponente mit
<embed width="200" height="100" src="ueb/ueb2.svg"> eingebunden ist.

Bei einer Änderung dieser HTML-Werte auf das Doppelte mit
<embed width="400" height="200" src="ueb/ueb2.svg">
ändert sich nur die Größe des Ausschnitts, der Maßstab der SVG-Abbildung bleibt konstant:

B2. Warum ist der
B2. Hintergrund weiß?

SVG ist positiv-orientiert, d. h. wenn ein Element fehlerhaft oder nicht genau definiert ist, soll ein modernes System dieses dann trotzdem anzeigen, und zwar in der Farbe SCHWARZ. Aus Kontrast-Gründen ist der nicht definierte Hintergrund einer SVG-Datei daher immer WEISS.

Einen farblichen Hintergrund einer SVG-Datei erreicht man nur mit der Definition eines farbigen Rechtecks als ersten Befehl.

Daraus folgen zwei Erkenntnisse:

Wenn in SVG-Dateien nichts anderes definiert ist, gelten alle wertmäßigen Zahlenangaben als PIXEL
Die linke obere Ecke scheint der Ursprung (0/0) des Koordinatenaufbaus zu sein, d.h.
ein positiver X-Wert verschiebt nach Rechts,
ein positiver Y-Wert verschiebt nach Unten!

C. Die ViewBox: Definiton des Koordinatensystems

Neben dem Header, der dem Interpeter mitteilt, nach welchen genauen Gesetzmäßigkeiten die SVG-Datei interpretiert werden soll, kann mit dem Einfügen einer ViewBox der sichtbare Teil einer SVG-Fläche definiert werden. Diese wird dann vom Interpreter auf die Gesamtgröße des SVG gezogen, hier also auf 100%, in Html eingesetzt mit <embed width="400" height="200" src="ueb/ueb2a.svg">. Der Code ergibt dann:

Mittels der verschiedenen Koordinationssysteme lässt sich die Anzeige konkret steuern, also ein unpassendes Koordinationssystem in einen anderen Abbildungsmaßstab verschieben oder Ausschnitte setzen, z.B mit <embed width="200" height="100" src="ueb/ueb2a.svg">:

D. Reihenfolge der Anzeige

Übereinander liegende Objekte liegen übereinander, d.h. das Oberste verdeckt das Untere. Dabei wird die SVG-Datei vom Interpreter von oben nach unten abgearbeitet, was bedeutet, dass später definierte Objekte oben liegen. Bei zusätzlichem Einfügen eines blauen Kreises:

Code und Ergebnis:	Code und Ergebnis:
<svg width="225" height="150"> <circle cx="100" cy="50" r="25" fill ="red"/> <circle cx="80" cy="30" r="25" fill ="blue"/> </svg>	<svg width="225" height="150"> <circle cx="80" cy="30" r="25" fill ="blue"/> <circle cx="100" cy="50" r="25" fill ="red"/> </svg>

Probieren Sie die verschiedenen Übungen ruhig einmal aus. Zur besseren Übersicht listen wir Ihnen die verwendeten SVG-Dateien hier noch einmal in der Reihenfolge auf:
ueb2.svg
ueb2a.svg
ueb2b.svg
ueb2c.svg
ueb2d.svg

Natürlich kann SVG nicht nur Kreise darstellen, sondern beliebige Objekte, aber das Prinzip ist immer das Gleiche.

Weiter zum nächsten Kapitel:

Welche Programme brauch ich?