Die tägliche Ration Wahnsinn
Das offene Ohr Mein Icon
spacer
That's me, folks

Partnerprogramme

Buch24.de - Bücher versandkostenfrei

Abebooks.de - Antiquarische und gebrauchte Bücher

shirtcity.de  -  CLICK YOUR SHIRT

spacer spacer

Daily Link Icon Sonntag, 21. Juli 2002

Erste Schritte mit SVG

Click here to download Adobe's SVG-Viewer 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

SVG Book Cover 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-Ersatz-GIF

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 &#246;.

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.

Permalink Icon

8:06:46 PM | Perma Link Icon | 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 | Perma Link Icon | Forum

Neu in meiner Bibliothek

Ein Dinosaurier im Heuhaufen Book Cover Jetzt lerne ich ActionScript Book Cover

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 | Perma Link Icon | Forum

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

11:16:19 AM | Perma Link Icon | 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.«
  • Eule 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.«

Python Icon   Script different!

11:12:16 AM | Perma Link Icon | 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 | Perma Link Icon | Forum

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

10:43:45 AM | Perma Link Icon | Forum

International Spy Museum Logo [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 | Perma Link Icon | Forum

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

10:26:02 AM | Perma Link Icon | Forum

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

10:24:10 AM | Perma Link Icon | Forum

Ellen Feiss [Beep, Beep, Beep, Beep, Bip, Bip, Bip, Beep...] Diese junge Dame (QuickTime Logo 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 | Perma Link Icon | 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 | Perma Link Icon | Forum

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

10:04:23 AM | Perma Link Icon | 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 | Perma Link Icon | Forum


spacer spacer spacer spacer
July 2002
Sun Mon Tue Wed Thu Fri Sat
  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31      
Jun   Aug

Interne Links:
 Startseite
 Impressum
 Über mich
 Über Gabi
 Credits
 Sitemap
 Archiv
 Linksammlung
 Gabi gucken
 Gabis lustiger Falthund
 Pythonmania
 Turn Your Radio On!
 Perl(en)
 JavaScript
 Webdesign
 Programmiersprachen
 Mathematik
 Ich habe gelesen
 Alles Kino
 Ausflüge & Reisen
 Bugastadt 2001
 Temporäre Gärten 2001
 Vermischtes
 Tom Tit
 Theater & Kabarett
 Icons
 Bild hochladen
 Wer linkt mich?

 RSS Icon

Andere & Awards
 Krit-Apfel 8/2000
 Wohin heute
 Netzwissenschaft
 Dr. Web
 Webobserver
 cognitive Architects
 nordwest net
 Die Welt
 voices
 Die Zeit
 Berliner Zeitung
 Tagesanzeiger.ch
 c't 2/2002
 Focus
 dpa
 Tagesspiegel

Unser Netzimperium
 Kantel-Chaos-Team
 Gabi
 Zebu
 Jörgs Zope-Site
 Tribute to John Brunner
 Der Rollberg
 Der alte SWR


Letzte Änderung: 14.01.2003; 16:53:10 Uhr | © Copyright: 2003 by Kantel-Chaos-Team | Kontakt: der@schockwellenreiter.de

This site is edited with Radio UserLand, the first personal Web Application server for Windows and Macintosh.  This site is made with a Apple Macintosh Computer and I'm proud about that.  This site was build with BBEdit. It don't sucks!  This site is HTML 4.01 compatible.  This site is made with Cascading Style Sheets.  Let iCab smile  Site Meter