Partnerprogramme

Sonntag, 21. Juli 2002

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.

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/svg/test.svg" name="svg1" type="image/svg+xml" width="300" height="200"><img src="http://www.schockwellenreiter.de/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.

8:06:46 PM | | Forum

Aüßerst nützliche Linksammlung: Copyright, trademarks and patents. Wird ständig aktualisiert. Und einen Newsletter kann man auch beziehen. [Gabi]

11:52:55 AM | | Forum

Neu in meiner Bibliothek

Stephen Jay Gould: Ein Dinosaurier im Heuhaufen, Frankfurt/Main (Fischer TB 15510) 2002. Der letzte Essayband Goulds und wie immer ein hervorragendes Feuerwerk von Ideen und Meinungen. Und wie immer ein flammendes Plädoyer für mehr Wissenschaftlichkeit und gegen Aberglauben und Dummheit. Wer Teuro 12,90 übrig hat, der gehe hin und kaufe dieses Buch.

Warum allerdings der Fischer-Verlag (Flash- und Frame-Alarm!) einmal auf seiner Website dieses Buch als »noch nicht erschienen« bezeichnet und zum anderen wegen der besagten Frames keine Verlinkung auf den Titel erlaubt, bleibt wohl das Geheimnis der Verlagsleitung. Vielleicht wollen die gar keine Bücher verkaufen? Oder sie sollten mal jemanden fragen...

Rezension im Perlentaucher.

Dirk Louis: Jetzt lerne ich ActionScript mit JavaScript. München (Markt und Technik) 2001. Flash ist ja nicht von Natur aus schlecht und einige interessante Dinge kann man mit ActionScript schon anstellen. Dieses Buch bietet, wie schon das Java-Buch des gleichen (Co-) Autoren eine grundsolide Einführung in ActionScript.

11:39:57 AM | | Forum

Alles wird Magenta, alles wird quadratisch und alles wird gut Leben ohne Max. [haboglabobloggin']

11:16:19 AM | | Forum

Mal wieder die [Daily Python URL] geplündert:

• GadflyB5 1.0.0 »is an updated and cleaned-up version of Gadfly, an SQL relational database system implemented in Python.«
• CyberChair »is a web-based system, written in Python, for managing the submission and reviewing of conference/journal papers.«
• Jeffrey E. F. Friedl: What's new with regular expressions. »The second edition of Jeffrey Friedl's book Mastering Regular Expressions will soon be available. In this article on the O'Reilly Network, the book's author surveys what has changed in the world of regular expressions since the first edition of the book. With regard to Python, the most significant change was probably the move to a Perl-5-compatible model.« Liebe Frau L. Noch kein Probekapitel?
• Mario Friffi: Free Python and Zope Hosting Directory. »This page is dedicated to keeping track of free Python and Zope hosting providers on the net.«
• Wetterbericht: PyMETAR »is a Python module that provides easy access to the National Oceanic & Atmospheric Administration's METAR weather reports.«

  Script different!

11:12:16 AM | | Forum

[HTML-Tricks]: Das Geheimnis der farbigen Linien gelüftet bei Dr. Web: Wie man aus drögen <hr>'s (horizontal rules) echte Schmuckstücke macht. [Industrial Technology & Witchcraft (IT&W)]

10:50:05 AM | | Forum

[Weblog-Artikel]: Steve Outing wrote a very deep article about weblogs and professional journalism. [Scripting News]

10:43:45 AM | | Forum

[Mein Name ist Bond, James Bond]: CNN.com berichtete über die Eröffnung des Internationalen Spionage Museums. Das Flash-Intro (~500 KB) ist bescheuert, aber die Seiten selber sind sehenswert. [Meerkat: An Open Wire Service]

10:41:00 AM | | Forum

[Geschichte]: Juden an der Universität Heidelberg (1386 bis heute). Eine empfehlenswerte virtuelle Ausstellung der UB Heidelberg. [netbib Weblog]

10:26:02 AM | | Forum

[Spielzeugprovider]: Strato tritt immer noch Esel. Nur etwa jede dritte ftp-Connection klappt. Das nervt...

10:24:10 AM | | Forum

[Beep, Beep, Beep, Beep, Bip, Bip, Bip, Beep...] Diese junge Dame ( etwa 500 KB) aus Apples Switch-Kampagne wurde innerhalb weniger Stunden zum Liebling des Web gekürt. Herzlich Willkommen in den Top 5. [dekaf - deutsch kalifornische freundschaft]

10:18:45 AM | | Forum

[Macro error: Can't call the script because the name "radioMug" hasn't been defined.]

[Tweaking Your Radio]: Paolo: »After a looong wait, here you can get the SharedOutline public beta. We have been using this tool internally for quite some time now, and it works pretty well. I hope you will find this tool as useful as we do.« [Paolo Valdemarin: Paolo's Weblog]

10:07:02 AM | | Forum

Commentary: The game theory of open code. Mit einigen interessanten, weiterführenden Links. [Meerkat: An Open Wire Service]

10:04:23 AM | | Forum

[One Hundred Albums...] ...You Should Remove from Your Collection Immediately. Seltsamerweise besitze ich nur wenige dieser Scheiben. Das gibt mir zu denken, war ich doch immer stolz auf meinen schlechten Musikgeschmack. Also, die Platten aus dieser Liste, die ich natürlich niemals entfernen würde und die in meinem Regal stehen sind:

1. Tom Waits: Mule Variations - Gabi und ich sind absolute Tom Waits Fans. Egals was vom Meister kommt, es kann gar nicht schlecht sein.
2. Dave Brubeck: Take Five - Wenn alle Marschmusik im 5/4-Takt wäre, gäbe es keine marschierenden Soldaten mehr, sondern nur noch verknotete Beine.
3. Pink Floyd: Dark Side of the Moon - Bei keiner anderen Musik kann man sich so schön an durchkiffte Nächte in der Spätpubertät erinnern.
4. The Beatles: Sgt. Pepper's Lonely Heart's Club Band - Mit den Beatles begann meine musikalische Sozialisation. Daher gilt für sie das gleiche wie für Tom Waits.

The Beatles: Let it be, Bob Marley & the Wailers: Legend und The Doors: The Best of the Doors besitze ich nur eher zufällig nicht, eigentlich gehören die auch in meine Sammlung. [der K u t t e r ¶]

9:55:46 AM | | Forum