Web-Weaver

Erste Schritte mit SVG

Vor dem Erfolg haben die Götter den Download gesetzt. Da meines Wissens noch kaum ein Browser native SVG unterstützt, ist der einzige Weg, SVG anzuzeigen, der Weg über das Plug-In von Adobe. Plug-Ins gibt es bisher für Mac (Classic und OS X) und Windoofs (die aktuelle Version ist die Version 3.0), UNIX-User bleiben außen vor — es sei denn, sie nutzen den Referenzbrowser des W3C, den einzigen mir bekannten Browser, der SVG von Hause aus kann.

SVG (Scalable Vector Graphics) ist eine XML-Anwendung zur Beschreibung von Vektorgrafiken, die vom W3C vorgeschlagen und angenommen wurde. Mit SVG kann man im Prinzip alles machen, was man auch in Flash anstellen kann - bis hin zu Animationen - nur eben standardkonform und nicht proprietär. Also ein Grund, sich mit SVG auseinanderzusetzen

Was ich machen möchte, ist ein Experiment. Ich will mir SVG beibringen und möchte gleichzeitig meine Ergebnisse hier dokumentieren. Als Lehrbuch benutze ich erst einmal das SVG-Buch von Marcel Salathé, andere Quellen werde ich bei Bedarf hinzuziehen. (Wie man daraus ersehen kann, habe ich es mittlerweile geschafft, das simple »Hello World!«-Beispiel angezeigt zu bekommen.)

Herauskommen soll zum Schluß eine Python-Bibliothek zum Erstellen von SVG-Graphiken und -Animationen.

[Hello World]: SVG ist ein XML-Format, also braucht man nur einen Texteditor, um die Grafiken zu erzeugen. Schmeißen wir also den Editor unseres Vertrauens an und tippen ein:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN"
"http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">
<svg width="300" height="200">
  <text x="35" y="95" style="fill:red; font-size:40; stroke:black; font-weight:bold">
    Hallo J&#246;rg!</text>
  </svg>

Wenn wir dies nun in eine Webseite einbinden, erscheint (hoffentlich!) folgendes Bild:

SVG ist ein sehr simples XML-Format. Wie wir sehen, müssen wir zuerst dem Browser mitteilen, daß es sich um XML handelt. Dann folgt die DOC-Type-Deklaration, die in keinem gültigen XML-Dokument fehlen sollte. (Es hat mich viel Zeit gekostet, eine gültige DOC-Type-Deklaration zu bekommen, auf den SVG-Tutorial-Seiten (Frame-Alarm!) von Adobe bin ich dann fündig geworden.) Danach bekommt das Dokument die umschließenden Klammern <svg> und </svg>, der man als Attribute die Höhe und die Weite mitgibt. Danach erzählen wir, daß wir ein bißchen Text ausgeben wollen. Wer schon einmal mit CSS gearbeitet hat, dem kommen die Attribute ziemlich bekannt vor. "smile"

Eine Enttäuschung ist die Umlautbehandlung. Denn obwohl XML keine Umlaut-Kodierung mehr vorsieht, die Angabe des Zeichensatzes (im Falle westeuropäischer Zeichen encoding="iso-8859-1") sollte reichen, weigert sich das Plug-In, den Umlaut in meinem Vornamen zu akzeptieren. Daher bleibt nur die Kodierung als ö.

Da aber die Fehlerbehandlung unterschiedlich ist, ob man die encoding-Angabe in der ersten Zeile wegläßt (dann bricht die Darstellung nach dem "J" ab) oder ob man sie einfügt (dann wird der gesamte Text dargestellt, nur statt des "ö" bekommt man ein Quadrat angezeigt), scheint das eher ein Fehler des Plug-Ins denn eine Unzulänglichkeit von SVG zu sein.

So - und wie bringt man nun einer HTML-Seite bei, eine SVG-Anwendung anzuzeigen? Natürlich mit dem standardkonformen <obejct>-Tag und nicht etwa mit dem proprietären <embed>-Tag:

<object data="http://www.schockwellenreiter.de/webworking/graphic/svg/test.svg" name="svg1" type="image/svg+xml" width="300" height="200"><img src="http://www.schockwellenreiter.de/webworking/graphic/svg/hallosvg.gif" width="300" height="200" border="0" alt="SVG-Ersatz-GIF" title="Ihr Browser kann leider kein SVG darstellen"></object>

Als braver HTML-Coder biete ich denjenigen Browsern, die den <object>-Tag nicht verstehen oder die das SVG-Plug-In nicht geladen haben, ein GIF als Alternative an. Ich hoffe, damit nicht gegen meine eigenen Regeln zu verstoßen.

Getestet habe ich bisher nur auf dem Mac mit Mozilla, dem Internet Explorer 5.1 (der einen häßlichen weiten Leeraum unterhalb des SVG-Bildes einschiebt - es ist halt das Werkzeug des Teufels) und mit iCab. Bitte um Feedback, wie das auf anderen Plattformen aussieht.