Präsentieren mit SVG

xxxxxxxx

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.

Präsentieren hat nicht nur etwas mit der Auswahl eines Formates zu tun (z.B. Powerpoint oder SVG), sondern erst einmal etwas mit solider Aufbereitung von Informationen und sinnvollem Konzept.

Die Arbeit von Edward Tufte (Los Angeles) macht darauf besonders aufmerksam.

..... Einen Vergleich der Eigenschaften zwischen Flash und SVG liefert Andreas Neumann (carto.net, Zürich):

Es gibt keine

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 drei 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.

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:

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!

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.

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg xmlns="http://www.w3.org/2000/svg" width="100%"
height="100%" style="shape-rendering:geometricPrecision;
text-rendering: geometricPrecision; image-rendering:optimizeQuality;
fill-rule:evenodd" viewBox="0 00 2000 1600"><defs><style type="text/css">
</style></defs>
<g id="svg"><path fill="none" stroke="#605D5C" stroke-width="50"
stroke-linecap="round" d="M120 1300 v100 q0 100,100 100h300
q100 0,100-100v-600 q0-100,-100 -100h-300 q-100 0,-100 -100
v-400q0-100,100-100h300q100 0,130 100 l350 1300 m100 0m-100 0
l350 -1300q20 -100,120-100h 300q100 0,100 100v100 m-300 400
h200q100 0,100 100v600q0 100,-100 100h-270q-100 0,-120 -100
l-164 -702"/></g>

<g id="button-red">
<a xlink:href="http://www.5vg.de/svg/0100.htm"
target="_top"><ellipse fill="#DA251D" transform="translate(1050 230)
rotate(-35)" rx="250" ry="170"><animateColor fill="freeze" dur="0.1s"
to="red" from="#DA251D" attributeName="fill" begin="mouseover"/>
<animateColor fill="freeze" dur="0.1s" to="#DA251D" from="red"
attributeName="fill" begin="mouseout"/></ellipse></a></g>
</svg>

Weiter zum nächsten Kapitel:

Welche Programme brauch ich?