This content was uploaded by our users and we assume good faith they have the permission to share this book. If you own the copyright to this book and it is wrongfully on our website, we offer a simple DMCA procedure to remove your content from our site. Start by pressing the button below!
Scalable Vector Graphics Praxiswegweiser und Referenz Referenz für für den neuen Vektorgrafikstandard Iris Fibinger unter Mitarbeit von Heikki Komulainen
new technology
Markt+Technik Verlag
Die Deutsche Bibliothek – CIP-Einheitsaufnahme Ein Titeldatensatz für diese Publikation ist bei Der Deutschen Bibliothek erhältlich.
Die Informationen in diesem Produkt werden ohne Rücksicht auf einen eventuellen Patentschutz veröffentlicht. Warennamen werden ohne Gewährleistung der freien Verwendbarkeit benutzt. Bei der Zusammenstellung von Texten und Abbildungen wurde mit größter Sorgfalt vorgegangen. Trotzdem können Fehler nicht vollständig ausgeschlossen werden. Verlag, Herausgeber und Autoren können für fehlerhafte Angaben und deren Folgen weder eine juristische Verantwortung noch irgendeine Haftung übernehmen. Für Verbesserungsvorschläge und Hinweise auf Fehler sind Verlag und Herausgeber dankbar.
Alle Rechte vorbehalten, auch die der fotomechanischen Wiedergabe und der Speicherung in elektronischen Medien. Die gewerbliche Nutzung der in diesem Produkt gezeigten Modelle und Arbeiten ist nicht zulässig. Fast alle Hardware- und Softwarebezeichnungen, die in diesem Buch erwähnt werden, sind gleichzeitig auch eingetragene Warenzeichen oder sollten als solche betrachtet werden. Umwelthinweis: Dieses Buch wurde auf chlorfrei gebleichtem Papier gedruckt. Die Einschrumpffolie – zum Schutz vor Verschmutzung – ist aus umweltverträglichem und recyclingfähigem PE-Material.
Das World Wide Web Consortium (W3C) und seine Mission An wen richtet sich das Buch? Gibt es eine Website zum Buch? Mit welchen Programmen erstellen Sie SVG-Grafiken? Mit welchen Programmen betrachten Sie SVG-Grafiken? Der SVG-Viewer von Adobe Der Batik SVG-Browser von Apache Wird SVG in der Praxis eingesetzt? Beispiel: Kartografie (GIS) Beispiel: Allgemeine Infografik Beispiel: Technische Illustration
XML – Metastandard von SVG & Co
31
2.1 2.2 2.3 2.4 2.5
32 33 34 38
2.6 2.6.1 2.6.2 2.6.3 2.6.4 2.6.5 2.6.6 2.6.7
Das Wichtigste in Kürze Wichtige XML-Sprachen Die Struktur eines XML-Dokuments Tags, Attribute und leere Tags – Strukturierungsmittel in XML Weiterverarbeitung eines XML-Dokuments – vom Textformat zur Tabelle Wohlgeformtheit – Pflichtregel eines XML-Dokuments Auszeichnung und Zeichendaten Leerräume (Whitespaces) XML-Prolog Kommentare Ein Root-Element Schreibweisen von Tags und Attributen Öffnendes und schließendes Tag
Verschachtelung von Tags Attributwerte in Anführungszeichen oder Hochkommata Reserviertes Zeichen für den Beginn eines Tags: < Reserviertes Zeichen für den Beginn einer Entity-Referenz: & Fünf vordefinierte Entity-Referenzen CDATA-Abschnitte Dokumenttyp-Definition (DTD) – der XML-»Duden« Schreibweisen in DTD und Spezifikation: Backus-Naur-Form (BNF) DTD-Deklaration Elementdeklaration Attributdeklaration Entity-Deklaration Notationdeklaration Namensräume (namespaces) – das Erweiterungskonzept Document Object Model (DOM) – die Zusammenhänge im XML-Baum
Was sind Grafiken? Raster kontra Vektoren Unterschiedliche Tools Unterschiedliche Datenmodelle Unterschiedliche Ausgabe Unterschiedlicher Speicherbedarf Unterschiedlicher Einsatz 2D und 3D? Vektorgrafik im Detail Zusammensetzung einer Vektorgrafik Punkte, Pfadsegmente, Flächen Farben
SVG – der Standard
79
4.1 4.2 4.3 4.3.1 4.3.2
80 80 81 81 83
Geschichtliches Die SVG-Recommendation vom W3C Blick auf die Konkurrenz – die Vector Markup Language (VML) Eine einfache VML-Grafik Pfade zeichnen mit VML
Das Koordinatensystem ändern Kurzes Fazit Warum SVG und nicht Flash? Tool Strukturierung Generierung mit Hilfe von Scriptsprachen Eingebundene Script- oder Programmiersprachen Externe Bilddaten Farben Animationen
84 85 85 86 86 86 86 86 86 87
Der Einstieg in SVG
89
5.1 5.2 5.3 5.4 5.5 5.6 5.7 5.7.1 5.7.2
90 91 92 93 94 95 95 96
5.8 5.8.1 5.8.2 5.8.3 5.8.4 5.9 5.9.1 5.9.2 5.10
Kapitel 6
7
Tags Das Tag Eine erste SVG-Grafik Koordinatensystem Maßeinheiten Das benutzerdefinierte Koordinatensystem Gesteuerte Ansichten Bildausschnitte festlegen (viewBox) Seitenverhältnisse von Bildausschnitten sichern (preserveAspectRatio) Strukturelemente Grafikelemente gruppieren Referenzelemente definieren Elemente beschreiben Referenzierbare Symbole und Piktogramme erstellen Referenzelemente Grafikelemente referenzieren Externe Grafiken einbinden Anzeige von Grafiken und anderen Ressourcen in Abhängigkeit von Programm- und Ressourcenvorgaben ()
Textauszeichnung Aktuelle Textposition Textauszeichnung mit und Textstellen hervorheben Mehrzeilige Texte erstellen Texte referenzieren Text am Pfad Textformatierungen Fonteigenschaften festlegen Textzwischenräume (Kerning und Spacing) spezifizieren
Inhaltsverzeichnis
7.5.3 7.5.4 7.5.5 7.5.6 7.6 7.6.1 7.6.2 Kapitel 8
Kapitel 9
9
Texte dekorieren Texte ausrichten Laufrichtung von Texten spezifizieren Grundlinien spezifizieren Eigene Zeichensätze SVG-Zeichensätze erstellen Komprimierte Zeichensätze einbinden (CEF-Fonts)
Wichtige CSS-Selektoren Über den Elementnamen Über den Klassen-String Über den ID-String CSS-Kommentare Pseudo-Klassen :link, :visited, :active :hover :focus :first-child :lang() @Regeln @font-face @media @import @charset Vererbung von Formatierungen (inheritance) Aurale Stylesheets Eingebettete CSS-Stylesheets Externe CSS-Stylesheets Auszeichnen mit dem Attribut style Formatieren über Entities
SVG und Farben
183
9.1 9.2
184 184
Farbdefinition Farbmanagement und International Color Consortium (ICC)
10
Inhaltsverzeichnis
9.2.1 9.2.2 9.2.3 Kapitel 10
Kapitel 11
Wie wird aus einem gedruckten CMYK-Bild ein gleich aussehendes Online-RGB-Bild und umgekehrt? Was sind ICC-Farbprofile? ICC-Farbprofil einer Farbe zuweisen
185 185 187
Grafische Transformationen
189
10.1 10.2 10.3 10.4 10.5 10.6
190 192 194 196 198 200
Skalierung (Vergrößern oder Verkleinern) Rotation (Drehen) Translation (Verschieben) Neigung (Achsen drehen) Matrizentransformation Mehrere Transformationen
Hyperlinks Der XLink-Namensraum Hyperlinks und Anker setzen Zielansichten definieren Scripting Scripts in ein SVG-Dokument einbinden Scripts über einen Event aktivieren Gezielte Interaktivität
Animationen mit SVG
273
13.1 13.2 13.3 13.4 13.4.1 13.4.2 13.4.3 13.4.4
274 275 276 277 277 278 280 281
Tags für die Animation Eine erste Animation Unterstützte Zeiteinheiten und Zeitangaben Grundlegende Komponenten einer Animation Eigenschaft des »Darstellers« festlegen Zeitrahmen setzen Zustände des »Darstellers« festlegen Zustand des »Darstellers« nach der Animation festlegen
Eine Animation erneut starten Wiederholungen spezifizieren Optimierende Komponenten einer Animation Mehrere Zustände und Zeiten auf einmal festlegen Art der Interpolation festlegen Zeit in Abhängigkeit von einer Bézierfunktion steuern Minimale und maximale Animationsdauer festlegen Zustandsveränderungen addieren und akkumulieren Animation numerischer Zustände () Animation nicht interpolierbarer Zustände () Animation entlang eines Bewegungspfades () Bewegungspfade spezifizieren Bewegungspfade referenzieren () Animation der Farbe () Animation von Transformationen () Anwendungen Einen Zeichentrickfilm erstellen Filtereffekte animieren Dynamisches Popup-Menü für eine Website erstellen
SVG in HTML SVG-Grafik in ein HTML-Dokument einbetten SVG-Grafik mit HTML-Formularen verknüpfen SVG-Dokumente in Frames (Rahmen) einbinden Namensräume Das Tag
SVG fit für das Web
329
15.1 15.2
330 331
Optimierung von SVG-Dateien Konfiguration des Webservers
SVG und Perl
333
16.1 16.1.1 16.1.2 16.2
335 336 343 349
Analyse von Website-Zugriffen Website-Zugriffe zählen Verwendete Browser analysieren Generierung einer Wetterkarte
In der elektronischen Welt hat die Grafik einen eigenen Raum eingenommen, der mit den wachsenden technischen Möglichkeiten immer größer und bedeutender wurde. Heute ist die Grafik ein fester Bestandteil der elektronischen Dokumente, allerdings zu einem stolzen Preis. Es gibt eine immense Vielfalt an Formaten und Werkzeugen, die aufgrund von Inkompatibilitäten die Erstellung und Wiederverwendung der elektronischen Grafiken aufwendig und teuer machen. Die Lösung dieses Problems heißt Vereinheitlichung und Standardisierung. Einen Riesenschritt in diese Richtung hat das W3C getan, indem es SVG (Scalable Vector Graphics) definiert hat. SVG ist eine XML-basierte Sprache, in der zweidimensionale Vektorgrafiken beschrieben werden können. Das Faszinierende an dieser Sprache ist, dass die Quellen wie bei allen XML-Anwendungen reine ASCII-Dateien sind, deren Umfang nur noch ein Bruchteil des Umfangs herkömmlicher Grafikdateien ausmacht und die mit minimaler technischer Ausstattung erstellt, bearbeitet und verwaltet werden können. Ausgangspunkt für dieses Buch ist die Diplomarbeit von Frau Fibinger, in der sie zum ersten Mal in deutscher Sprache ein Tutorial für SVG in SVG realisiert hat. Dieser Tutorial-Ansatz verleiht dem Buch den Charakter eines Lehrbuchs, in dem die Konzepte und Vorgehensweisen im Hinblick auf die praktische Umsetzung erklärt werden. Die zahlreichen Beispiele zeigen anschaulich und nachvollziehbar, wie die üblichen Grafikaufgaben mit SVG umgesetzt werden können. Die zusätzliche SVG-Referenz im Anhang dient als umfassendes Nachschlagewerk, in dem systematisch und verständlich die SVG-Sprachelemente beschrieben sind. Die Kombination aus Lehrbuch und Referenz macht das Buch zu einem wertvollen Begleiter für alle, die sich für SVG interessieren. Prof. Sissi Closs
Danke! Ich möchte mich bei allen bedanken, die mir beim Schreiben dieses Buches – in welcher Form auch immer – behilflich waren, ganz besonders: Den Firmen Comet Communication und Comet Computer für ihre finanzielle Rückendeckung (ein Punkt, über den man sonst nicht spricht, der aber das Ganze erst möglich macht). Besonders danke ich meinen beiden Chefinnen Prof. Sissi Closs und Elke Grundmann für Geduld, Ver- und Zutrauen.
18
Danke!
Meinem Kollegen und Koautoren Heikki Komulainen, der die Programmierung der Perl-Anwendungen in Kapitel 16 übernahm. Den beiden Fachlektoren Andreas Neumann und André Winter, die neben der Tatsache, dass sie ihre Sache hervorragend gemacht haben, auch noch das Terzett des deutschsprachigen Raums – Schweiz und Österreich – vervollständigten. Meiner Familie, die mir wichtig ist.
Für Michelle und Yasmin. Die Zukunft.
Iris Fibinger Comet Communication GmbH München, Februar 2002
Kapitel 1 Einführung ins Buch 1.1 1.2 1.3 1.4 1.5 1.6
Das World Wide Web Consortium (W3C) und seine Mission An wen richtet sich das Buch? Gibt es eine Website zum Buch? Mit welchen Programmen erstellen Sie SVG-Grafiken? Mit welchen Programmen betrachten Sie SVG-Grafiken? Wird SVG in der Praxis eingesetzt?
20 21 22 22 22 26
20
1.1
Das World Wide Web Consortium (W3C) und seine Mission
Das World Wide Web Consortium (W3C) und seine Mission W3C – die etwas verdreht klingende Abkürzung (eigentlich müsste es doch »3WC« heißen) - steht für einen Interessenverband zahlreicher Forschungseinrichtungen, Universitäten sowie Soft- und Hardware-Firmen. Dieser hat es sich zur Aufgabe gesetzt, den Berg an WWW-Standards wenigstens auf einen Hügel zusammenzuschrumpfen. Was hier so flapsig klingt, ist die Lösung eines echten Problems. Denn wer hat schon immer die passende Software, das spezifische Betriebssystem oder gar das vorausgesetzte Know-how, um alle Standards, die mittlerweile das Internet für uns bereithält, zu bewältigen? Und dann dieses Puzzleteilchen im Browserfenster, das verdeutlicht: Zum Anschauen dieser Grafik benötigen Sie ein Plug-In. »Klicken Sie hier« (..., um es zu erhalten). Minutenlange Download-Zeiten sind nicht selten die Folge und die Speicherkapazität des Rechners sinkt. Und nochmal W3C – dieses Kürzel hört man häufig im Zusammenhang mit XML. Bevor ich in Kapitel 2 auf diesen Standard eingehen werde, möchte ich vorwegnehmen: XML ist nicht das einzige, wohl aber das berühmteste Kind der W3-Standardfamilie. Weitere sind beispielsweise HTML, Cascading Stylesheets (CSS) und WebCGM. Wer sich mit derartigen Standards beschäftigt, kommt um das Gründerkonsortium nicht umhin. So finden Sie unter http://www.w3.org/ alles Wissenswerte und werden immer auf dem neuesten Stand gehalten. »Neuester Stand« – das W3C ist kein starres Gebilde. Es geht auf Wünsche und Ansprüche der Softwarehersteller sowie Anwender ein. Deshalb können Sie bei seinen Sprachen mit laufenden Verbesserungen rechnen. Sprachen – die Sprachen des W3Cs zeichnen sich i. d. R. durch Einfachheit aus. Es sind selten größere Programmierkenntnisse gefordert und erst recht keine besonderen Tools. Einfache Texteditoren reichen für die Programmierung aus. Programmierung und SVG – mit XML macht das W3C auch vor einem Bereich nicht Halt, der komplexer ist, als viele meinen: Grafik. Hier stehen Sie schon in der Welt des Print-Publishing ständig vor der Frage, welcher Lithograf oder Drucker die Druckvorstufe für ein Dokumentenformat übernehmen kann. Mitunter führt es so weit, dass entweder der Grafiker oder der Lithograf die gesamte Softwarekonstellation umstellen oder zumindest ergänzen muss. Der Webbereich macht die Angelegenheit noch etwas komplizierter. Weniger, wenn es darum geht, Fotos einzubinden, sondern vielmehr da, wo Sie CAD-(Computer Aided Design-) oder GIS-(Geographical Information System-)Daten online publizieren wollen. Hier lauten die Ansprüche u. a.: •
Zeichnungen und Grafiken sollen interaktiv modifizierbar sein (z. B. eine Maschine, die Schicht für Schicht offen gelegt wird).
•
Mit Grafiken sollen Arbeitsabläufe von Maschinen online überwacht werden.
Kapitel 1 • Einführung ins Buch
21
•
Datenbankabfragen sollen vom Benutzer interaktiv vorgenommen werden.
•
Grafiken sollen sich aus einer Datenbank generieren lassen.
•
Im GIS: Karten sollen georeferenziert sein, d. h., Distanzen und Positionen auf einer Karte müssen in ihrer zugrunde gelegten Projektion mit der Wirklichkeit übereinstimmen.
•
Die Inhalte einer Grafik sollen je nach Ansicht variieren können.
Damit kommen Sie in Bereiche hinein, die strukturierte Textformate geradezu notwendig machen. Denn wie wollen Sie auf die Inhalte eines Bildes zugreifen, das Ihnen gar keine Zugriffsmöglichkeiten bietet, weil es keine innere Struktur aufweist? Scalable Vector Graphics (SVG) ist ein XML-Standard und somit strukturiertes Textformat. Ausschließlich mit Text erstellen Sie komplexe zweidimensionale Vektorgrafiken, wie Sie sie aus Corel DRAW oder vergleichbaren Zeichenprogrammen kennen. Darüber hinaus können Sie diese animieren, interaktiv machen u. v. m. Eine kleine Revolution in Sachen Webgrafik. Auch deswegen, weil sich mit dieser Sprache zahlreiche Standards ersetzen oder kombinieren lassen. Single Sourcing – dieser Begriff fällt in der Praxis immer häufiger. Alles aus einer Quelle. Das ist eine Mission des W3Cs. Text, Bild und Animation aus einer Quelle − wiederum die von SVG.
1.2
An wen richtet sich das Buch? SVG ist ein Standard, der von Haus aus eine breitere Klientel anspricht als eine Programmiersprache wie C oder Java. Mit Grafiken arbeitet jeder. Und wenn es nur darum geht, eine E-Mail zu schreiben. Texte sind Grafiken. Wenn Sie dann auch noch in Microsoft Word ein Rechteck als Rahmen für einen Text aufziehen, haben Sie genau genommen eine komplexe Grafik, die zahlreiche elementare Aufgaben einer Vektorgrafik erfüllen muss. Auf diese werde ich grundlegend in Kapitel 3, »Grafische Datenverarbeitung – kurzer Einblick«, eingehen. Sind Sie Grafiker, Kartograf oder Ähnliches, dürfte es für Sie keine Probleme bereiten, dieses Kapitel zu überspringen. Dann heißt es einfach: »media in res« oder schlicht ins Kapitel 4. Oder haben Sie noch keine Erfahrung mit XML? Dann wäre für Sie Kapitel 2, »XML – Metastandard von SVG und Co«, empfehlenswert. Hier ist alles SVG-Relevante behandelt. Sollten Sie jedoch in diesem Buch nach einer vollständigen XML-Einführung suchen, werden Sie diese nicht finden. XML ist mit all seinen Möglichkeiten zu komplex, als dass sie sich zusammen mit SVG auf ein paar hundert Seiten unterbringen ließe. Dafür habe ich einige hervorragende und umfangreiche Bücher zum Thema im Literaturverzeichnis aufgeführt.
22
Gibt es eine Website zum Buch?
Sind Sie Softwareprogrammierer? Dann ist dieses Buch für Sie deshalb interessant, da es Ihnen hilft, sich ein Bild von dem zu machen, was die trockene Spezifikation nur textlich weitergibt. Was Sie in diesem Buch nicht finden werden, ist eine Einführung in HTML.
1.3
Gibt es eine Website zum Buch? Ja, die gibt’s, und zwar unter http://www.svg-site.de. Hier finden Sie alle Beispiele aus diesem Buch. Interessant ist diese Seite vor allem in Bezug auf die Perl-Beispiele aus Kapitel 16. Sollten Sie also Perl nicht auf Ihrem Rechner installiert haben, können Sie sich die SVG-Ergebnisse dennoch im Netz anschauen.
1.4
Mit welchen Programmen erstellen Sie SVGGrafiken? Es gibt mittlerweile schon eine beachtliche Anzahl an guten Zeichenprogrammen, die SVG-Grafiken erzeugen. Auf ein paar davon gehe ich in Kapitel 17 ein. Zunächst ist ein einfacher Texteditor wie •
NotePad (Win)
•
WordPad (Win)
•
SimpleText (Mac)
völlig ausreichend. Etwas komfortabler sind XML-Editoren wie •
XML-Spy
•
XMetal
Sie helfen, XML-Dokumente zusätzlich auf ihre Wohlgeformtheit und Validität zu überprüfen. Mit allen genannten Programmen können Sie die im Buch beschriebenen Source-Code-Beispiele nachvollziehen. Damit Sie ohne entmutigende Tippfehler weiterkommen, habe ich die Beispiele auch auf der Buch-CDROM zusammengestellt.
1.5
Mit welchen Programmen betrachten Sie SVGGrafiken? Auch hier gibt es bereits zahlreiche. Zwei davon möchte ich Ihnen besonders empfehlen: •
den SVG-Viewer von Adobe (Plug-In für Webbrowser)
•
den Batik SVG-Browser von Apache (Standalone-Programm)
Kapitel 1 • Einführung ins Buch
1.5.1
23
Der SVG-Viewer von Adobe Dieser Viewer setzt bereits einen Großteil aller statischen, animations- sowie script-technischen SVG-Features um, weswegen die im Buch gezeigten BeispielScreenshots ausschließlich diesen Viewer zeigen. Die neueste Version ebenso wie die zugehörigen Release-Notes können Sie sich kostenlos von der SVG-Zone der Adobe-Website unter http://www.adobe.com/svg/viewer/install/main.html herunterladen (Version 3.0 finden Sie auch auf der Buch-CD-ROM). Unter dem gleichen URL stellt Adobe für Version 3.0 ein separates Farbmanagement-System zum Download bereit. Dieses arbeitet mit ICC-Profilen zusammen, die Sie mit einem SVG-Dokument verknüpfen können. Die zum Zeitpunkt des Schreibens neueste Version, SVG Viewer 3.0, wird von folgenden Plattformen unterstützt: •
Windows (95/98, ME, NT, 2000, XP)
•
MacOS (8.x, 9.x, 10.1)
Releases für Solaris 8 und Red Hat-Linux finden Sie als Betaversionen unter http://www.adobe.com/svg/viewer/install/old.html. SVG Viewer 3.0 ist ein Plug-In für •
Netscape Navigator (ab 4.0)
•
Netscape 6.x (Achtung: Hier ist eine manuelle Installation erforderlich!)
•
Internet Explorer (4.0 - 5.5)
•
RealPlayer 8
•
Opera 5.x
In der Windows-Version ist zusätzlich ein Active-X-Control enthalten, mit dem auch Office-Programme sowie Visual Basic SVG-Grafiken statisch anzeigen. Mit dem SVG-Viewer bekundet Adobe ihr echtes Interesse an der Fortentwicklung von SVG. Sein Hauptvorteil gegenüber anderen Viewern liegt in der softwareeigenen Funktionalität. Dazu gehören ebenso Zoom- und Verschiebemöglichkeiten (zoom and pan) wie die Suchfunktion, mit der Sie auf einer SVGGrafik direkt nach Texten suchen können (beispielsweise auf einer Karte nach Ortsnamen). Nachfolgend sehen Sie das Sub-Menue des Viewers, das Sie mit gedrückter rechter Maustaste (unter Windows und Unix) oder der Kombination (CTRL) + gedrückte Maustaste (unter Mac) aufrufen:
24
Mit welchen Programmen betrachten Sie SVG-Grafiken?
Abbildung 1.1:
SVG-Grafik im Netscape 6.1
voreingestellte Zoom-Levels Medien-Funktionen: • Bildqualität ändern (Anti-Aliasing ein / aus) • Animationen und eingebundene Medien ein- / ausschalten
Text-Such-Funktionen
Dokument- und Text-Funktionen (Bei selektierten Texten: Texte kopieren)
Online-Hilfe und Info
Abbildung 1.2:
Sub-Menue des Adobe SVG Viewers
In der Tabelle sind Zoom-und-Pan-Funktionalitäten aufgelistet, die Sie nur mit Hilfe von Tasten(-kombinationen) erhalten: Windows/Unix
Mac
Erklärung
(ALT)
(ALT)
Verschiebehand zum dynamischen »Scrollen«
(STRG)
(BEFEHL)
Lupe zum dynamischen Einzoomen
(STRG) + (¢)
(BEFEHL) + (¢)
Lupe zum dynamischen Auszoomen
Kapitel 1 • Einführung ins Buch
25
Eine weitere sehr nützliche Funktionalität finden Sie in der Statuszeile des Browserfensters: ein kleiner Debugger, der Ihnen die Position des ersten Programmierfehlers im Dokument anzeigt:
Abbildung 1.3:
Debugger des Adobe SVG Viewers
HINWEISE FÜR MACINTOSH-ANWENDER Der SVG-Viewer hat seit Version 3.0 eine eigene Script-Engine, die Scripts (JavaScript) anstelle der Browser verarbeitet. Damit umgeht Adobe das Problem, dass einige Browser keine in XML eingebundenen Scripts umsetzen. Das gilt besonders für den IE auf Mac. MacintoshAnwender sollten also generell mit der neuesten Viewer-Version arbeiten. Was mit dem Mac-IE und Netscape 6.x nicht funktioniert, sind in HTML eingebundene Scripts, die auf SVG-Grafiken zugreifen (siehe Kapitel 14). Hierfür sollten Sie in jedem Fall auf den Netscape Navigator zurückgreifen. Das Mac-Plug-In benötigt relativ viel Browser-RAM. Version 3.0 kommt mit ca. 28 Mbyte Browser-RAM aus, alte Versionen benötigen sogar mindestens 40 Mbyte RAM. Sollte der IE eine Fehlermeldung beim Parsen eines SVG-Dokuments ausgeben, liegt das in aller Regel am Macintosh File Type. Dieser lautet: ‚svg‘ (»svg« + ein Leerraum. Macintosh File Types benötigen immer vier Zeichen) bzw. ‚svgz‘ für GZIP-komprimierte SVG-Dateien. Um den File Type festzulegen, verwenden Sie das Dienstprogrämmchen ResEdit (FILE/ GET INFO FOR .../TYPE).
1.5.2
Der Batik SVG-Browser von Apache Eine Alternative ist der Java-basierte Batik SVG-Browser von Apache. Er wurde u. a. von Mitarbeitern der Firmen Sun, Kodak und ILOG entwickelt. Sie können ihn sich sowohl als Open-Source-Variante wie auch in Binärform kostenfrei von der Apache XML-Site unter http://xml.apache.org/batik/svgviewer.html herunterladen. Er ist Bestandteil des Batik SVG-Toolkits (neueste Version zum Zeitpunkt des Schreibens: 1.1.1, liegt auf Buch-CD bei), in dem auch nützliche Tools u. a. für die TrueType-in-SVG-Font-Konvertierung enthalten sind. Für die Verwendung des Batik SVG-Toolkits ist eine Java 1.3 (und höher) kompatible Virtual Machine (VM) notwendig.
26
Wird SVG in der Praxis eingesetzt?
Abbildung 1.4:
Der Batik SVG-Browser
In puncto Anwendung bietet der Batik SVG-Browser gegenüber dem Adobe SVG Viewer sogar einige Vorteile: •
Er unterstützt noch mehr Features (besonders CSS-Styles) für statische SVGGrafiken.
•
Er enthält eine Übersicht des SVG-Dokuments in Form einer Baumdarstellung (DOM-Viewer).
•
Er bietet die Möglichkeit, über eine Eingabemaske bzw. ein Thumbnail gezielt zu navigieren (VIEW/TRANSFORM (CTRL) + (S) oder VIEW/THUMBNAIL (CTRL) + (Y)).
•
Er bietet eine eigene Sprachumschaltung. Damit können Sie mehrsprachige Dokumente betrachten, ohne die Systemsprache umzuschalten.
Nachteilig ist hingegen, dass der SVG-Browser
1.6
•
weniger animations- und scripttechnische Features unterstützt und
•
erheblich langsamer läuft, da er auf der VM aufsetzt.
Wird SVG in der Praxis eingesetzt? Es gibt bereits einige Praxisbeispiele auf dem Netz. Seriöse Anwendungen finden Sie vorrangig in Bereichen, die dem Benutzer echtes Interesse an der visualisierten Materie abverlangen können. Denn gegenüber einem Flash-Plug-In (weniger
Kapitel 1 • Einführung ins Buch
27
als 400 Kbyte) müssen Sie mit dem SVG-Viewer (2 – 3 Mbyte) schon eine längere Download-Zeit in Kauf nehmen. So finden Sie wirklich gute Beispiele in den Bereichen •
Kartografie (GIS),
•
allgemeine Infografik,
•
technische Illustration.
Noch nicht durchgesetzt hat sich SVG im E-Commerce. Aber das wird sich mit kleiner werdendem Plug-In sicherlich ändern.
1.6.1
Beispiel: Kartografie (GIS) Unter http://www.carto.net/papers/svg/ finden Sie den Prototyp eines OECD-Atlas von Europa (übrigens ein Werk der beiden Fachlektoren dieses Buches, Andreas Neumann und André Winter). Die Karten des Web-GIS’ sind ausschließlich mit SVG umgesetzt. Sie wurden nachträglich in ein HTML-Frameset eingebunden. Über HTML-Formulare, die mit Hilfe von JavaScript auf den SVG-Code zugreifen, macht der Benutzer Abfragen zu vorgegebenen Themen (z. B. Wirtschaft):
Abbildung 1.5:
Der OECD-Atlas Europa (Prototyp)
28
Wird SVG in der Praxis eingesetzt?
Es gibt noch jede Menge weitere Kartografiebeispiele, z. B. unter:
1.6.2
•
http://www.dbxgeomatics.com/
•
http://www.gis-news.de/svg/
Beispiel: Allgemeine Infografik Auch wenn hier der Hintergedanke in der Produktwerbung liegt: Die interessantesten Beispiele (inklusive Online-Tutorials) finden Sie in der Adobe SVG-Zone unter http://www.adobe.com/svg/.
Abbildung 1.6:
1.6.3
Diagrammbeispiel von der Adobe SVG-Zone
Beispiel: Technische Illustration Ebenfalls interessant ist SVG für die technische Illustration. Nicht nur, weil in diesem Bereich Vektorgrafik weit verbreitet ist, sondern, weil sich mit SVG Arbeitsabläufe beispielsweise von Maschinen online überwachen lassen. Ein Tool für derartige Zwecke ist Sphinx open der deutschen Firma in-integrierte informationssysteme GmbH. Auf der Site http://www.in-gmbh.de/de/Produkte/inGmbH/sphinxsvg/svg_demos.htm finden Sie einige SVG-Beispiele zu technischen Illustrationen, die mit Sphinx open umgesetzt wurden.
Kapitel 1 • Einführung ins Buch
Abbildung 1.7:
SVG-Animation »Ersatzbremse« (in-gmbh)
29
Kapitel 2 XML – Metastandard von SVG & Co 2.1 2.2 2.3 2.4 1.5 2.6 2.7 2.8 1.9
Das Wichtigste in Kürze Wichtige XML-Sprachen Die Struktur eines XML-Dokuments Tags, Attribute und leere Tags – Strukturierungsmittel in XML Weiterverarbeitung eines XML-Dokuments – vom Textformat zur Tabelle Wohlgeformtheit – Pflichtregel eines XML-Dokuments Dokumenttyp-Definition (DTD) – der XML-»Duden« Namensräume (namespaces) – das Erweiterungskonzept Document Object Model (DOM) – die Zusammenhänge im XML-Baum
32 33 34 38 39 41 50 60 61
32
Das Wichtigste in Kürze
Dieses Kapitel ist und soll keine vollständige XML-Einführung sein. Es enthält die für Sie wichtigsten Grundlagen zum Verständnis von SVG als XML-Sprache, damit Sie das nötige Fundament für eine saubere, XML-mäßige Programmierung gelegt bekommen.
2.1
Das Wichtigste in Kürze Bereits Ende der 50er Jahre wurden Anliegen laut, Dokumentationen nicht mehr nur als einfache Schreibmaschinenseiten zu betrachten, deren Inhalte bestenfalls durch stupides Abtippen für andere Zwecke zugänglich waren. Die digitale Revolution sollte ihre Vorzüge zunächst an simplen Textdokumenten beweisen. Solche können zu Datenbanken »umfunktioniert« werden. Man muss sie nur entsprechend strukturieren. Eine einfache Buchseite, so, wie Sie sie vor sich sehen, lässt gerade mal eine optische Struktur erkennen. Sie sehen Überschriften, Absätze und vielleicht ein paar Bilder. Aber versuchen Sie einmal – auch wenn ich Sie natürlich nicht vom ernsthaften Lesen des Buches abhalten will – schnell alle Abkürzungen für die eXtensible Markup Language – XML – ausfindig zu machen. (Und das ist noch eine der leichten Übungen, da die Buchstaben alle groß geschrieben sind.) Die Lösung des Problems: Geben Sie dem Text neben der optischen Gestaltung (Formatierung) auch eine inhaltliche (semantische) Struktur. Nur wie? 1960 begann IBM mit der Entwicklung eines Standards, der dies möglich machte. Es entstand die Standard Generalized Markup Language, kurz SGML, eine Metasprache zum Definieren von bedeutungstragenden Zeichenketten (Elementen, Tags). Der Trick: Mit Hilfe dieser Tags, die von spitzen Klammern (< und >) umgeben sind, werden die Texte bzw. Inhalte (in der Zwischenzeit sind auch Bilder, Grafiken und andere Informationsträger hinzugekommen) umschlossen oder, anders ausgedrückt, ausgezeichnet: Hier sind die Texte
Generell erstellt man SGML-Dokumente, zu denen übrigens auch HTML gehört, ausschließlich über ASCII-Text. Dieser ist rein zeichenorientiert (beschränkt auf 128 Zeichen) und somit frei von jeglicher plattform-, anwendungs- oder ausgabespezifischen Formatierung. Sie kennen vielleicht die Warnmeldung in Microsoft Word, die beim Konvertieren von Word-Dokumenten in TXT-Dateien auftritt: »Formatierungen können bei der Konvertierung zu Nur Text-Format verloren gehen. ...« – und sie gehen verloren. Man hat also eine klare Trennung von optischer Gestaltung und Semantik. Dies wiederum ermöglicht den Zugriff von vielen Seiten. Solche Dokumente sind •
plattformneutral,
•
anwendungs- und programmiersprachenunabhängig,
•
weiterverwertbar für jede Form der Ausgabe (Print, Web, CD etc. = Crossmedia) und
•
langfristig lesbar für den Menschen.
Kapitel 2 • XML – Metastandard von SVG & Co
33
Die eXtensible Markup Language (XML), zu Deutsch: ausbaufähige Auszeichnungssprache, wurde 1998 vom W3C ins Leben gerufen. Sie entspricht in weiten Teilen der Syntax ihres Vorgängers SGML, wurde jedoch für die Belange des Internets hin optimiert (besonders in puncto Verlinkung und Lokalisierung). XML ist ein Standard, mit dem man endlich einmal über den Horizont des »momentanen Bedarfs« hinausblicken kann. Es ist ebenfalls eine Metasprache, mit der Sie verschiedenste semantische Strukturen für Instanzsprachen wie SVG, XHTML etc. konzipieren können. Diese sind jedoch im Gegensatz zu SGML-Instanzen untereinander »kompatibel« und besser noch: extensibel. Die XML-Spezifikation finden Sie unter http://www.w3.org/TR/REC-xml. Für standardisierte Instanzsprachen wie HTML empfiehlt es sich, die Tags in der so genannten Document Type Definition (DTD) zu deklarieren, damit später bei der Erstellung von Instanzdokumenten eine einheitliche Struktur besteht. Auf sie werde ich auch im Verlauf des Kapitels eingehen.
2.2
Wichtige XML-Sprachen Einige Sprachkonzepte von XML erhalten immer mehr Bedeutung und lassen sich auch kaum noch umgehen. Dazu gehört zunächst die eXtensible Stylesheet Language (XSL). Sie wird Ihnen zukünftig wohl einiges an Arbeit abnehmen, da Sie damit beispielsweise bei der Erstellung einer Website auf die Auszeichnung immer wiederkehrender Inhalte verzichten können. Mit XSL können Sie sie hineingenerieren bzw. transformieren (weswegen der Abkürzung »XSL« ganz gern das Anhängsel »T« für »Transformation« beigefügt wird). Außerdem hat XSL noch eine andere Komponente: Formatting Objects. Darunter versteht man einen ganzen Katalog von Formatierungselementen, im Sinne der Cascading Stylesheets (CSS), mit denen Sie die äußere Gestaltung (das Layout) von Dokumenten beeinflussen können. Mit den Standards XLink, XPath und XPointer bekommen Sie, im Vergleich zu HTML, neue Möglichkeiten der Verlinkung. Denn damit wird nicht mehr nur eine andere Website oder eine Stelle innerhalb desselben Dokuments (Anker) angesprochen, es können alle möglichen Stellen und Inhalte in allen möglichen Dokumenten aufgerufen bzw. referenziert werden. Sie können beispielsweise einzelne »Topics« in einem Dokument ablegen und von einem anderen aus gezielt abrufen. In diesem Zusammenhang möchte ich auch erwähnen, dass XML nicht nur die HTML-typische Adressierungsstufe Uniform Resource Locator (URL) unterstützt, sondern auch die des noch kaum verbreiteten Uniform Resource Identifiers (URI). Während bei dem URL die Lokalisierung eines Dokuments im Vordergrund steht, können mit URIs auch dessen Inhalte und Ressourcen identifiziert werden, was den Zugriff darauf ermöglicht. Schließlich möchte ich Sie noch auf XML Schema aufmerksam machen, eine Sprache, mit der Sie ähnlich wie mit der DTD Regeln für Dokumentstrukturen bzw. neue Sprachkonzepte definieren. Dabei bietet die Definition von Schemata
34
Die Struktur eines XML-Dokuments
gegenüber der in der DTD einige Vorteile. Zunächst umgehen Sie mit XML Schema die ungewohnte Schreibweise in der DTD (siehe Abschnitt 2.7). Sie zeichnen Dokumentstrukturen in gleicher Manier aus wie Texte oder sonstige Informationen in HTML und SVG. Damit erhöht sich die Lesbarkeit. Außerdem können Sie mit XML Schema wesentlich differenziertere Definitionen vornehmen, so dass Sie beispielsweise •
die Informationsart, die ein bestimmtes Element in einem neuen Sprachkonzept kennzeichnen soll,
•
den Kontext, in dem ein bestimmtes Element gültig sein soll, und
•
den exakten Datentyp, den ein bestimmtes Element enthalten soll,
festlegen. XML Schema gewinnt zunehmend an Bedeutung. Zwar liegen für SVG 1.0, auf das sich dieses Buch bezieht, die formalen Definitionen ausschließlich in Form einer DTD vor, dagegen wurden für die Entwürfe (Working Drafts) zu SVG 1.1 und SVGMobile bereits vorrangig Schemata eingesetzt, siehe:
2.3
•
http://www.w3.org/TR/2002/WD-SVG11-20020108/
•
http://www.w3.org/TR/2002/WD-SVGMobile-20020108/
Die Struktur eines XML-Dokuments XML ist eine Metasprache, vom Stellenwert also vergleichbar mit einer Programmiersprache, die uns die logischen und syntaktischen Regeln vorgibt, um damit ein Programm zu schreiben. Das Programm ist die Instanz. Als XML-Instanzen werden die abgeleiteten Sprachkonzepte bezeichnet. Deren jeweilige Aufgabe kommt durch die gewählte Semantik der einzelnen Tags zum Ausdruck. So ist HTML dazu gemacht, Hypertext-Dokumente zu erstellen, die Sie als Webseiten nutzen können. Hier ist es wichtig, dass die einzelnen Inhalte (Texte, Bilder) eine äußere Gestaltung (Schriftart, Farbe, Tabellen u. v. a. m.) mitbekommen. Daher entspricht die Semantik der einzelnen HTML-Tags den Formatierungseigenschaften (z. B. für Bold). Die Zuordnung einer bestimmten Bedeutung ist zunächst subjektiv. Zehn Leute, die unabhängig voneinander versuchen, ein und demselben Dokument eine semantische Struktur zu verleihen, werden zu zehn unterschiedlichen Ergebnissen gelangen, weil jeder die Schwerpunkte anders setzt. Dennoch gibt es innerhalb der Schwerpunkte auch eine objektive logische Abfolge, z. B.: stammbaum grosseltern eltern kinder
Abbildung 2.1:
Logische Abfolge in einem Stammbaum
Kapitel 2 • XML – Metastandard von SVG & Co
35
Sie sehen hier die grobe Struktur eines Stammbaums. In diese können Sie nun die Namen der einzelnen Familienmitglieder (Inhalte) einfügen: stammbaum grosseltern eltern
Martha und Franz
Gerda und Fritz
kinder Hans
Abbildung 2.2:
Stammbaum mit Inhalten
Generell werden Inhalte in einem Baumdiagramm auch als Blätter bezeichnet, weil sie sich nicht weiter verzweigen. Übertragen Sie das Ganze nun in XML-Schreibweise. Die Einrückungen der einzelnen Tags sind nicht notwendig. Sie werden auch nur in diesem Kapitel der Veranschaulichung wegen vorgenommen. Listing 2.1:
Stammbaum-Beispiel in XML-Schreibweise
Martha und Franz Gerda und Fritz Hans
Sie sehen hier also schon eine Dokumentstruktur, der Sie entnehmen können, wie die Namen der Großeltern, Eltern und Kinder (in diesem Fall ein Sohn) lauten. Sie können auf die Namen •
Martha und Franz
•
Gerda und Fritz
•
Hans
zugreifen. Nicht separiert sind jedoch •
Martha
•
Franz
•
Gerda
•
Fritz
36
Die Struktur eines XML-Dokuments
Hans ist nur zufällig einzeln aufgeführt, da er keine Geschwister hat. Folglich soll-
ten Sie die Struktur noch optimieren: stammbaum grosseltern oma Martha
opa Franz
eltern mama
Gerda
papa Fritz
kinder sohn Hans
Abbildung 2.3:
Strukturierter Stammbaum
Und in XML-Schreibweise? Listing 2.2:
Strukturierter Stammbaum in XML-Schreibweise
Martha Franz Gerda Fritz Hans
Sie könnten in dem Stammbaum-Beispiel noch einen Schritt weitergehen und die Strukturierungselemente familie und familien_name einfügen. Der Strukturierung sind keine Grenzen gesetzt, sie sollte allerdings auch den Ansprüchen entsprechend angemessen sein. Wenn auch HTML ein eher untypisches Beispiel für semantische Strukturierung ist, da sich die Tag-Namen auf die Formatierung beziehen, soll das StammbaumBeispiel dennoch in HTML übertragen werden, da Sie diese Sprache bereits kennen:
Kapitel 2 • XML – Metastandard von SVG & Co
37
html body p
br
Martha
Franz
div p
Gerda
br Fritz
div p Hans
Abbildung 2.4: Listing 2.3:
Baumstruktur in HTML
Stammbaum-Beispiel in HTML
Martha
Franz
Gerda
Fritz
Hans
Die Ähnlichkeit ist verblüffend, oder? Und so möchte ich Ihnen abschließend den Blick auf eine erste SVG-Struktur nicht verwehren: Listing 2.4:
»Hallo SVG«-Beispiel
Hallo SVG Hallo SVG Hallo SVG
Sie sehen: Alle XML-Dokumente funktionieren nach dem gleichen Prinzip.
38
2.4
Tags, Attribute und leere Tags – Strukturierungsmittel in XML
Tags, Attribute und leere Tags – Strukturierungsmittel in XML In den Beispielen oben haben Sie Tags als Strukturierungselemente bereits kennen gelernt. Mit ihnen geben Sie einem Dokument das logische Grundgerüst: nach den Großeltern die Eltern, nach den Eltern die Kinder, ... Sie könnten den Stammbaum aber auch ergänzen durch die Eigenschaften der betreffenden Personen, z. B. hat Hans vielleicht dunkle Haare und blaue Augen. Solche Eigenschaften unterliegen eigentlich keiner Logik, sie sind einfach vorhanden. Nach Ihrem momentanen Kenntnisstand müssten Sie diese Eigenschaften jedoch in die logische XML-Struktur einpassen. Beispielsweise gäbe es dann das Tag , das wiederum dem Tag untergeordnet wäre. Dabei dienen diese Eigenschaften der Person Hans gegenüber nur der näheren Beschreibung. Außerdem finden Sie in einem Stammbaum solche Eigenschaften generell nicht. Es ist also sinnvoll, auch XML-Komponenten vom Stellenwert differenzierter zu betrachten. Und so gibt es tatsächlich in XML Strukturierungsmittel, die ein Tag einfach nur attribuieren: nämlich Attribute. Das Stammbaum-Beispiel: ... Hans ...
Ein Attribut unterteilt sich in zwei Bestandteile: •
den Attributnamen
•
den Attributwert
Der Wert wird in Anführungszeichen gesetzt und dem Namen über das = zugewiesen. Bisher haben Sie nur von Tags gehört, die der Auszeichnung textlicher Inhalte dienen. Und zwar Texten, die in einem XML-Dokument fest integriert sind. Es gibt aber auch nichttextliche Inhalte (z. B. werden Sie noch das Tag kennen lernen, mit dem Sie in SVG ein Rechteck auszeichnen). Oder es gibt auch Inhalte, beispielsweise externe Binärdaten, die nur in das XML-Dokument hineinreferenziert werden. Für die Auszeichnung solcher Inhalte verwenden Sie so genannte leere Tags (empty tags). Dazu ein bekanntes Beispiel aus HTML: ...
Text mit Bild
...
Kapitel 2 • XML – Metastandard von SVG & Co
39
Hier wird ein GIF-Bild ausgezeichnet, das extern abgelegt ist, also im HTMLDokument nur als Referenz vorliegt. Um welches Bild es sich handelt, legen Sie mit dem Attribut src fest: bild.gif. Die Ausmaße des Bildes können Sie über width und height angeben: 20 x 30 Pixel. Häufig weisen leere Tags eine hohe Anzahl an Attributen auf. Die benötigen Sie auch, um den im XML-Code »nicht sichtbaren« Inhalt zu beschreiben. Leere Tags können Sie ohne ein schließendes Tag () auszeichnen, müssen dafür aber die abgekürzte Schreibweise /> einhalten. Und SVG? In SVG verwenden Sie zahlreiche leere Tags, z. B. für die Beschreibung geometrischer Formen wie Rechtecke, Kreise, Linie. Diese können aber auch »Kinder« enthalten und sind damit keine rein leeren Tags. Tags, die immer leer sind, finden Sie im Zusammenhang mit in SVG eigens erstellten Fonts, z. B.: Listing 2.5:
Beispiel »Leere Tags in SVG«
Leere Tags in SVG
2.5
Weiterverarbeitung eines XML-Dokuments – vom Textformat zur Tabelle Zu Anfang des Kapitels haben Sie gehört, dass in XML eine klare Trennung von Semantik und Formatierung vorliegt. Stellt sich also die Frage, wie Sie erreichen, dass Textdokumente nachher schön formatiert, in Tabellen angeordnet, mit fetten Überschriften versehen und natürlich ohne die hässlichen Tags im Browserfenster erscheinen. Denken Sie dabei kurz an HTML bzw. dessen XML-Variante XHTML: Es ist der Browser oder allgemein gesprochen die Software, die anhand der Tags erkennt, was sie wie anzeigen soll:
40
Weiterverarbeitung eines XML-Dokuments – vom Textformat zur Tabelle
Hallo Welt
Hallo
XML
Abbildung 2.5:
»Hallo Welt«-Beispiel
HINWEIS Es gibt Stilsprachen (z. B. Cascading Stylesheets), mit denen Sie Formatierungen auf ein XML-Dokument übertragen können (siehe Kapitel 8). Diese sind jedoch ebenfalls rein textbasiert und müssen gleichermaßen von der Software interpretiert werden. XML ist zwar für’s Web optimiert worden, aber genauso wie SGML als ausgabeunabhängiges Format gedacht. Das heißt, es gibt neben den Browsern auch verschiedene andere Programme, die XML-Dokumente einlesen können. Z. B. für die Erstellung von Printdokumentationen: der Bladerunner von Interleaf (heute BroadVision). Eines ist aller XML-fähiger Software gemeinsam: Sie hat einen XML-Parser (oder -Prozessor). Dieser liest die XML-Dokumente ein, ordnet die Elemente nach ihrer Baumstruktur und überprüft daran, ob sie wohlgeformt und evtl. auch gültig sind (die beiden letzten Begriffe werden Sie in den folgenden Abschnitten kennen lernen). Falls nicht, sollte er eine Fehlermeldung an den Benutzer ausgeben und die Weiterverarbeitung des XML-Dokuments vollständig abbrechen. Inhalte
Strukturierung
XML
XMLVerarbeitung
Der Werdegang eines XML-Dokuments
Software (Browser, Layout ...)
XML-Parser
Abbildung 2.6:
Ausgabe
Kapitel 2 • XML – Metastandard von SVG & Co
41
HINWEIS Browser wie der Internet Explorer (ab Version 5.0), Netscape 6 und Opera haben bereits solche XML-Parser implementiert. Für die Verarbeitung von XML-Dokumenten benötigen Sie also Programme, mit denen Sie XML-Dokumente •
einlesen und überprüfen (Parser bzw. Prozessoren, die auch schon in zahlreichen Browsern und Viewern implementiert sind),
•
ansehen (Browser, SVG-Viewer etc.),
•
konvertieren und weiterverarbeiten (Dokumentations-, Layout-Tools etc.)
können. Und SVG? Auch im Adobe SVG Viewer ist ein Parser implementiert. Stimmt der Code einer SVG-Grafik nicht mit den XML-Konventionen überein, die Sie im nachfolgenden Abschnitt kennen lernen werden, bricht der Parser den Bildaufbau bis zur fehlerhaften Stelle ab, und es wird in der Statuszeile des Browserfensters (NN und IE) die Fehlermeldung mit der entsprechenden Zeile und der Zeichenspalte angegeben (Debugger).
Abbildung 2.7:
2.6
Statuszeile im Netscape Navigator mit Debugger des Adobe SVG Viewers
Wohlgeformtheit – Pflichtregel eines XMLDokuments Es gibt in XML einige Regeln, die Sie einhalten müssen, und einige, die Sie einhalten sollten. Letztere werden im nachfolgenden Abschnitt beschrieben, wenn es um die so genannte Dokumenttyp-Definition (DTD) geht. Diese wiederum benötigen Sie, um eine Grundlage für die Gültigkeit einer Dokumentstruktur zu schaffen, was in Bezug auf standardisierte Sprachkonzepte wie SVG von entscheidender Bedeutung ist. Als Pflichtregel gilt die so genannte Wohlgeformtheit (well-formedness) eines XML-Dokuments. Sie ist die Syntax in einem Instanzdokument, die bei Nichteinhaltung genauso zu Fehlermeldungen führt wie eine vergessene oder falsch angebrachte geschweifte Klammer in einem Java-Code. Die Wohlgeformtheit ist übrigens auch ein Aspekt, der XML von SGML unterscheidet. Denn ein Hauptanliegen von XML ist die unzweifelhafte Standardisierung. Folglich gibt es strenge
42
Wohlgeformtheit – Pflichtregel eines XML-Dokuments
Regeln, damit nicht das gleiche Manko entsteht wie bei HTML. Hier haben Sie verschiedenste Browser, die HTML unterschiedlich umsetzen. Die Folge sind aufwendige Anpassungen von Webseiten an Betriebssysteme, Browser, Browserversionen und Systemanforderungen. Die Wohlgeformtheit ist also keine Schikane eines Konsortiums, sondern eine sinnvolle Einrichtung. Und zwar sowohl für die Erstellung von XML-Dokumenten als auch für die Entwicklung von XML-interpretierender Software (Parser). Die Regeln für die Wohlgeformtheit sind in der XML-Spezifikation unter http:// www.w3.org/TR/REC-xml aufgeführt. Hier finden Sie zunächst drei Punkte: •
Ein XML-Dokument muss auch als solches erkennbar und weiterverwertbar sein.
•
Es soll alle in der Spezifikation aufgeführten Wohlgeformtheitseinschränkungen erfüllen.
•
Alle direkt oder indirekt geparsten Entities (Verweise) müssen ebenfalls wohlgeformt sein.
Was steckt dahinter?
2.6.1
Auszeichnung und Zeichendaten Zunächst unterscheidet man in Auszeichnungssprachen zwischen der eigentlichen Auszeichnung und den Zeichendaten. Auszeichnungen sind alle XML-Komponenten wie Tags, Attribute, so genannte Entity-Referenzen, Kommentare usw. Also die Elemente, die der Parser interpretiert. Auf diese beziehen sich eigentlich die nachfolgend beschriebenen Wohlgeformtheitseinschränkungen. Zu den Zeichendaten gehören u. a. ausgezeichnete Texte. Sie werden vom Parser nicht analysiert. 'Zeichendaten' Auszeichnung
Zeichendaten
Auszeichnung
Das ' ist eine so genannte Entity-Referenz. Auf sie werde ich im Verlauf des Kapitels näher eingehen.
2.6.2
Leerräume (Whitespaces) Als Leerräume bezeichnet man Leerschläge (Blanks), Tabulatoren, Wagenrückläufe und Zeilenvorschübe. In der Auszeichnung spielen diese keine Rolle. Z. B. ist das folgende SVG-Dokument
Kapitel 2 • XML – Metastandard von SVG & Co
43
Hallo SVG Hallo SVG
identisch mit diesem: Hallo SVGHallo SVG
HINWEIS Einzelne Leerzeichen innerhalb der Zeichendaten wie hier zwischen Hallo und SVG bleiben erhalten. Auch gibt es das Attribut xml:space, mit dem Sie den Leerraum in Zeichendaten generell schützen können (Wert: preserve). Auf dieses komme ich später noch zu sprechen.
2.6.3
XML-Prolog Damit der XML-Parser überhaupt erkennt, dass es sich um ein XML-Dokument handelt, muss es mit dem so genannten XML-Prolog beginnen. Der lautet für alle Sprachkonzepte gleich:
Neben version, mit dem Sie die Versionsnummer von XML spezfizieren, kann der XML-Prolog noch weitere Attribute enthalten:
encoding
Damit geben Sie einen Zeichensatz an, den Sie innerhalb der Zeichendaten verwenden können. Diesen muss allerdings der Parser verstehen, um ihn zu entschlüsseln. HINWEIS Die neueste Version des Adobe SVG Viewers unterstützt die Zeichensätze UTF-8, UTF-16, ISO-8859-1 und us-ascii. standalone
Damit geben Sie an, dass das XML-Dokument mit einem anderen Dokument zusammenhängt. Im Allgemeinen handelt es sich dabei um die DTD.
2.6.4
Kommentare Ein wichtiger Bestandteil einer jeden Programmier- oder Auszeichnungssprache ist der Kommentar, eine Dokumentbeschreibung im Source-Code, die vom Parser ignoriert wird. Ihn sollten Sie so oft wie möglich eingeben, da er der Übersichtlichkeit dient. Das ist vor allem dann wichtig, wenn Sie nach längerer Zeit ein
44
Wohlgeformtheit – Pflichtregel eines XML-Dokuments
Dokument modifizieren wollen. Für Auszeichnungssprachen sieht die Kommentarsyntax folgendermaßen aus:
Sie gilt gleichermaßen für Instanzen wie für die später angesprochenen DTDs. Bei der Verwendung von Kommentaren müssen Sie allerdings auch diverse Einschränkungen beachten: •
Ein Kommentar darf nicht über dem Prolog stehen:
•
Ein Kommentar darf nicht innerhalb eines Tags erscheinen: können alle beliebigen Zeichen stehen, mit Ausnahme von --, da diese das Ende eines Kommentars markieren.
TIPP Mit Kommentaren lassen sich schnell einige Zeilen im Source-Code auskommentieren. Beispielsweise wenn Sie testen wollen, ob eine Fehlermeldung, die der Parser ausgibt, von einer bestimmten Stelle des Dokuments verursacht wird. Hallo SVG Hallo SVG
2.6.5
Ein Root-Element Jedes XML-Dokument muss ein so genanntes Root-Element enthalten, d. h. ein Element, das alle anderen Elemente umfasst (in unserem Stammbaum-Beispiel wäre das das Tag , in SVG das Tag , ...).
Kapitel 2 • XML – Metastandard von SVG & Co
2.6.6
45
Schreibweisen von Tags und Attributen In XML ist es nicht egal, wie Sie Tags oder Attribute schreiben. Das betrifft sowohl die verwendeten Zeichen innerhalb eines Tag- oder Attributnamens als auch die Groß- und Kleinschreibung. Die Regeln für Tag- oder Attributnamen sind identisch: •
Sie dürfen nur mit einem Buchstaben oder mit einem Unterstrich _ beginnen.
•
Die darauffolgenden Zeichen dürfen nur aus Buchstaben, Ziffern, Unterstrichen, Punkten und Bindestrichen bestehen.
•
Sie dürfen keine Leerzeichen enthalten.
So sind die folgenden Namen richtig: attribut.name ATTRIBUTNAME _attributname
Diese sind falsch: attribut%name .attributname
HINWEIS Für Attributwerte gibt es diese Einschränkungen nicht. Sie dürfen mit allen Zeichen beginnen und alle Zeichen enthalten, auch Leerzeichen. Sie müssen nur in Anführungszeichen gesetzt werden. Einzige Ausnahme: IDs – für sie gelten die gleichen Konventionen wie für Elemente und Attribute. Ein weiterer Punkt, den Sie bei der Schreibweise von Tags und Attributen berücksichtigen müssen, ist die Groß- und Kleinschreibung. Sie spielt in XML – im Gegensatz zu HTML – eine Rolle.
Sowohl die Tags , und als auch die Attribute VALUE, value und Value werden vom XML-Parser als völlig verschiedene Elemente bzw. Attribute verstanden.
46
2.6.7
Wohlgeformtheit – Pflichtregel eines XML-Dokuments
Öffnendes und schließendes Tag Alle Tags müssen auch ein zugehöriges schließendes Tag haben. Während Sie in HTML noch schreiben konnten Dies ist ein weicher Zeilenumbruch.
müssen Sie das Gleiche in wohlgeformter X(HT)ML-Schreibweise so auszeichnen: Dies ist ein weicher Zeilenumbruch.
Das /> ist eine zulässige abgekürzte Schreibweise für ein schließendes Tag bei leeren Elementen, die keinen Text enthalten. Sie können das Gleiche also auch folgendermaßen auszeichnen:
2.6.8
Verschachtelung von Tags Elemente müssen logisch verschachtelt sein, dürfen also nicht willkürlich gesetzt werden. Denken Sie dazu noch einmal an unser Baumdiagramm: stammbaum grosseltern oma Martha
opa Franz
eltern mama
Gerda
papa Fritz
kinder sohn Hans
Betrachten Sie nun folgenden XML-Code: Martha Franz Gerda
Kapitel 2 • XML – Metastandard von SVG & Co
47
Fritz Hans
Dieser Code ist nicht wohlgeformt, da die Tags , und falsch geschachtelt wurden. Dadurch lassen sich z. B. die Zusammenhänge von grosseltern über eltern zu mama, papa und kinder, wie sie im Baumdiagramm vorliegen, nicht mehr nachvollziehen.
2.6.9
Attributwerte in Anführungszeichen oder Hochkommata HTML (Ausnahme: XHTML!) ist nicht wohlgeformt. Ein typisches Beispiel hierfür ist die einfache Schreibweise von Attributwerten, die tatsächlich von vielen HTML-Browsern unbeanstandet bleibt:
Ein XML-Parser bringt hier eine Fehlermeldung. Warum? In XML müssen Attributwerte in Anführungszeichen oder Hochkommata gesetzt werden. Folgende Schreibweise ist also richtig:
Auch die folgende Code-Zeile wird problemlos geparst:
Hier sehen Sie, dass der Wert selbst Anführungszeichen enthält, darum wird empfohlen, zum Einschließen des Wertes auf Hochkommata zurückzugreifen.
2.6.10 Reserviertes Zeichen für den Beginn eines Tags: < Das < ist für den XML-Parser immer der Beginn eines Tags. Verwenden Sie also dieses Zeichen nicht im ausgezeichneten Text:
Hier würde der Parser das für einen Tag-Namen halten, das oder für dessen Attribut. Dann müsste jedoch ein = kommen und der Attributswert in Anführungszeichen eingeschlossen dahinter stehen. Tatsächlich folgt aber ein durch Leerraum separiertes nicht. Die Folge von diesem Code wäre also der Abbruch des Parsvorgangs.
48
Wohlgeformtheit – Pflichtregel eines XML-Dokuments
2.6.11 Reserviertes Zeichen für den Beginn einer Entity-Referenz: & Sie kennen vielleicht das Problem: Sie schreiben einen deutschen Text und an Ihrem Rechner hängt eine englische Tastatur. Wo nun ist das ö? Oder das ß? Wussten Sie übrigens, dass die Schweizer kein scharfes s haben? Auch ASCII enthält kein ß. Es muss also einen Weg geben, solche sprachenspezifischen Zeichen zu umschreiben oder zu ersetzen. Und es gibt ihn: allgemeine Entities (die nichtallgemeinen so genannten Parameter-Entities werde ich Ihnen später vorstellen). Die bekanntesten Entity-Referenzen finden Sie in HTML, z. B. das ö für ö oder eben das ß für ß. Das sind Zeichenketten, die vom Parser verstanden und entsprechend ersetzt werden. Eine »Lösung nach Maß« ist also im Browserfenster eine »Lösung nach Maß«. Wie in HTML beginnt auch in einem XML-Dokument eine allgemeine EntityReferenz immer mit einem & (nicht durch Leerzeichen vom Rest getrennt) und endet mit einem ; (Semikolon). Stößt der Parser also auf ein &, erwartet er immer eine Entity-Referenz. Und nicht nur eine, sondern eine von fünf vordefinierten, die im nachfolgenden Abschnitt aufgeführt sind. Verwenden Sie folglich auch dieses Zeichen nicht willkürlich im ausgezeichneten Text: Liebe Mitarbeiter der Comet Computer GmbH & Comet Communication GmbH
Hier wird der Parser nach dem & den Übersetzungsvorgang abbrechen. Warum? Weil auf das & nicht eine der fünf erwarteten Entity-Endungen amp;, lt;, gt;, quot; und apos; folgt.
2.6.12 Fünf vordefinierte Entity-Referenzen Die einzige Möglichkeit, wie Sie in wohlgeformtem XML-Code auch die Inhalte mit < oder & ausstatten können, ist, diese Zeichen selbst durch Entity-Referenzen zu ersetzen. Daher verfügt XML über ein Repertoire von fünf vordefinierten Entity-Referenzen. Diese umfassen alle Schlüsselzeichen, die in der eigentlichen Auszeichnung vorkommen: &, , ", '. Beispielsweise gibt es für das < die Entity < und für > die Entity >: <Sein oder nicht sein, das ist hier die Frage>
Nach dem Parsen würde im Browser nun erscheinen: In der Tabelle sind die fünf Zeichen mit ihren entsprechenden Entity-Referenzen aufgeführt:
Kapitel 2 • XML – Metastandard von SVG & Co
49
Zeichen
Wird in der Auszeichnung verwendet für
Entity-Referenz
&
Beginn von Entity-Referenzen
&
"
Beginn und Ende von Attributwerten
"
'
Beginn und Ende von Attributwerten
'
Tabelle 2.1:
Die fünf vordefinierten Entity-Referenzen in XML
2.6.13 CDATA-Abschnitte Die ganze Zeit habe ich nur von Auszeichnungen als Funktionsträgern in XMLCode gesprochen. Sie müssen konform sein zu den Wohlgeformtheitseinschränkungen, die Sie gerade kennen gelernt haben. Es gibt aber auch andere Funktionsträger in XML-Dokumenten, die ebenfalls von einer Software interpretiert werden müssen, die aber niemals wohlgeformt sind. Weil sie nämlich gar nicht zur XMLAuszeichnung gehören. Die Rede ist u. a. von Java-Code, x-beliebigem ScriptCode (z. B. JavaScript) oder externen Stilsprachen (CSS). Dieser Code muss vom XML-Parser genauso behandelt werden wie einfach ausgezeichneter Text, z. B. Hallo SVG: als Zeichendaten (engl. Character Data, kurz CDATA). Für die Auszeichnung solcher Abschnitte setzen Sie den CDATA-Abschnittsbegrenzer:
Der Inhalt des CDATA-Abschnitts wird vom XML-Parser nicht interpretiert und kann somit von anderen Teilen einer Software (z. B. dem Browser) zur Weiterverarbeitung genutzt werden. Sie können diese Abschnitte aber auch nutzen, um Teile des XML-Codes gewissermaßen auszukommentieren. Dies ist wieder gerade für Texte sinnvoll, die < oder & enthalten. Der folgende SVG-Code wird also vom Parser nicht beanstandet: Listing 2.6:
Beispiel: »CDATA-Abschnitt«
CDATA-Abschnitt ]]>
50
2.7
Dokumenttyp-Definition (DTD) – der XML-»Duden«
Dokumenttyp-Definition (DTD) – der XML-»Duden« Denken Sie noch einmal an HTML, so fällt Ihnen vielleicht auf, dass Sie vom Browser eine Fehlermeldung erhalten, wenn Sie innerhalb der Tag-Klammer Texte mit
oder auszeichnen. Warum eigentlich? HTML liegt ein Regelwerk zugrunde, in dem die Dokumentstruktur klar und eindeutig definiert ist: die so genannte Dokumenttyp-Definition (DTD). Diese DTD macht aus einer Markup-Sprache einen Standard. Denn an die darin festgelegte Grammatik sollten Sie sich bei allen daraus abgeleiteten Dokumenten halten. Für viele XML-Parser tritt hier die zweite Stufe in Kraft: Sobald ein XML-Dokument auf seine oben angesprochene Wohlgeformtheit hin überprüft wurde, vergleicht der Parser die Dokumentstruktur mit den Regeln in der zugrunde gelegten DTD. Diesen zweiten Schritt bezeichnet man als Validierung (Überprüfung der Gültigkeit). XMLVerarbeitung
XML
validiert
XML-Parser
>
wohlgeformt
Abbildung 2.8:
Software (Browser, Layout ...)
In Abschnitt 8.10 werden Sie sehen, dass Sie in SVG auf diese Weise auch Formatierungen anstelle von Stylesheets definieren können: über allgemeine Entities.
2.7.3
Elementdeklaration Tags, genauer gesagt die Elemente, die zwischen den spitzen Klammern stehen, deklarieren Sie in der DTD über das Schlüsselwort ELEMENT. Dazu ein Auszug aus der xhtml1-transitional.dtd: ... ...
Einige Komponenten in diesem Beispiel beginnen mit einem Prozentzeichen (%). Dabei handelt es sich um so genannte Parameter-Entities, auf die wir im Verlauf dieses Kapitels noch eingehen werden.
54
Dokumenttyp-Definition (DTD) – der XML-»Duden«
Für jedes Element müssen Sie eine eigene Elementdefinition vornehmen. In diesem Beispiel wird festgelegt, •
welche Tags
•
in welcher Reihenfolge
•
wie oft
innerhalb
, , usw. vorkommen dürfen oder müssen. Sie erhalten folgende allgemeine Syntax für die Elementdeklaration:
Elementname
Inhaltsmodell
>
In der Auszeichnung könnten Sie nun schreiben:
Hier finden Sie den Tabelleninhalt
Ein ganz wichtiges Inhaltsmodell ist #PCDATA (für Parsed Character DATA). Damit definieren Sie, dass in der Auszeichnung auf ein Tag Zeichendaten folgen sollen, z. B.:
In der Auszeichnung schreiben Sie:
Hier sind die Zeichendaten
Leere Tags erhalten das Inhaltsmodell EMPTY:
Und in der Auszeichnung schreiben Sie:
2.7.4
Attributdeklaration Attribute deklarieren Sie in der DTD über das Schlüsselwort ATTLIST. Auch hierzu ein Auszug aus der xhtml1-transitional.dtd: ... ...
Zu jedem Element, das Attribute besitzt, müssen Sie eine eigene Attributdefinition vornehmen. Hier finden Sie die Attributliste des Elements param. Sie baut sich aus fünf Hauptbestandteilen auf: •
dem Schlüsselwort mit dem Element, zu dem die Attribute gehören (hier ATTLIST param)
•
den Attributnamen und Parameter-Entities (z. B. id, name)
•
dem Typ (z. B. CDATA)
•
der Angabe, ob ein Attribut verwendet werden muss, darf oder einen festen Wert besitzen muss (#REQUIRED für müssen, #IMPLIED für dürfen, #FIXED für feste Werte)
•
dem voreingestellten Standardwert, für den Fall, dass der Typ eine Liste ist, in Anführungszeichen ("data")
Sie erhalten folgende allgemeine Syntax für die Attributdeklaration:
Attributwert
In der Auszeichnung könnten Sie nun schreiben:
Mit Hilfe der Attributtypen geben Sie vor, wie Werte eines Attributs auszusehen haben, damit vom späteren Autor eines standardisierten XML-Dokuments nicht jede x-beliebige Eingabe gemacht werden kann. Folgende Typen gibt es in XML: Typ
Erklärung
Anwendung
CDATA
Beliebige Zeichenketten
Ausgezeichnet:
Tabelle 2.5:
Attributtypen in der DTD
56
Dokumenttyp-Definition (DTD) – der XML-»Duden«
Typ
Erklärung
Anwendung
Liste
Liste von vorgegebenen Werten, von denen jeweils nur einer dem Attribut zugewiesen werden darf
Ausgezeichnet:
ID
Identifikator, über den ein Element in einem Dokument eindeutig beschrieben wird
Ausgezeichnet:
IDREF
Verweis auf einen Identifikator
Ausgezeichnet:
IDREFS
ENTITY
ENTITIES
Verweis auf mehrere Identifikatoren, die jeweils durch Leerräume voneinander getrennt werden
Name einer Entity, die in der DTD deklariert ist. Dieser Attributtyp wird vorrangig eingesetzt, um externe Binärdaten in ein Dokument zu referenzieren.
Namen mehrerer Entities, die in der DTD deklariert sind, jeweils durch Leerräume voneinander getrennt. Dieser Attributtyp wird vorrangig eingesetzt, um externe Binärdaten in ein Dokument zu referenzieren.
Tabelle 2.5:
Ausgezeichnet:
Ausgezeichnet:
Ausgezeichnet:
Attributtypen in der DTD (Forts.)
Kapitel 2 • XML – Metastandard von SVG & Co
57
Typ
Erklärung
Anwendung
NMTOKEN
XML-Name, der den gleichen Konventionen unterliegt wie Namen von Elementen und Attributen (s. o. Schreibweisen von Tags und Attributen)
XML-Namen, die den gleichen Konventionen unterliegen wie Namen von Elementen und Attributen (s. o. Schreibweisen von Tags und Attributen), jeweils durch Leerräume voneinander getrennt
Name einer Notation (s. u.), die in der DTD deklariert ist
NMTOKENS
NOTATION
Ausgezeichnet:
Ausgezeichnet:
Ausgezeichnet: Tabelle 2.5:
2.7.5
Attributtypen in der DTD (Forts.)
Entity-Deklaration Neben Elementen und Attributen gibt es noch die dritte wichtige Schlüsseldefinition in der DTD: die so genannte Entity. Mit ihr schaffen Sie sich für verschiedene Inhalte Platzhalter, die Sie je nach Typ in der Auszeichnung oder in der DTD verwenden können. Man unterscheidet: •
allgemeine Entities, die Sie in der Auszeichnung und in der DTD verwenden, von
•
Parameter-Entities, die Sie nur in der DTD einsetzen.
In der DTD verwenden Sie für die Definition von Entities das Schlüsselwort ENTITY.
58
Dokumenttyp-Definition (DTD) – der XML-»Duden«
Allgemeine Entities Allgemeine Entities haben Sie bereits im vorhergehenden Kapitel kennen gelernt. Sie benötigen Sie als Platzhalter •
für Sonderzeichen, die sonst mit der Auszeichnung kollidieren, z. B. & für das Kaufmanns-Und oder < für das Kleiner-als-Zeichen,
•
für Sonderzeichen (auch Unicode-Zeichen), die nicht im ASCII-Zeichensatz enthalten sind,
•
für Konstanten, die zentral im Dokument abgelegt sind,
•
für Abkürzungen,
Die Syntax für die Deklaration allgemeiner Entities lautet: Zu referenzierender Inhalt
>
Ein Beispiel:
In der Auszeichnung verwenden Sie nun anstelle des ausgeschriebenen Namens den Platzhalter &SVG;:
&SVG; ist toll
Im Browser erscheint: Scalable Vector Graphics ist toll Parameter-Entities Parameter-Entities verwenden Sie als Platzhalter für DTD-Deklarationen von •
Elementen
•
Inhaltsmodellen von Elementen
•
Attributen
•
Attributwerten
•
anderen Entities
Sie machen zwar auf der einen Seite DTDs unleserlich, da Sie ständig die Platzhalter zuordnen müssen. Auf der anderen Seite können Sie dadurch jedoch Redundanzen vermeiden, was sich wiederum auf den Nachführungsaufwand positiv auswirkt. Auch hier verwenden Sie für die Deklaration das Schlüsselwort ENTITY. Jedoch tritt anstelle des Kaufmanns-Unds (&) das Prozentzeichen (%). Die Syntax für die Deklaration von Parameter-Entities lautet:
Kapitel 2 • XML – Metastandard von SVG & Co
Zu referenzierende Deklaration
>
Ein Beispiel:
Hier haben Sie die Deklaration des Attributs text-anchor in eine Entity verpackt. In der DTD verwenden Sie nun anstelle der vollständigen Deklaration den Platzhalter %align; (vgl. auch Beispiele oben):
2.7.6
Notationdeklaration Notationen sind die vierte und letzte Schlüsseldeklaration in DTDs. Sollten Sie jedoch eine solche in der SVG-DTD suchen, werden Sie keine finden. Ich gehe an dieser Stelle der Vollständigkeit halber auf sie ein (und was nicht ist, kann in einer XML-Sprache ja immer noch werden). Mit Notationen geben Sie Nichttext- und Nicht-XML-Daten (Bildern, Sounddateien, externe Anwendungen etc.) eine Beschreibung, aufgrund der die Software überhaupt erst etwas mit diesen Formaten anfangen kann. Die Software ist in diesem Fall nicht der XML-Parser. Der gibt solche Daten ungeparst an die übergeordnete Software, beispielsweise den Browser, weiter. Erst hier beginnt die Verarbeitung der Notationsdaten. Für die Deklaration in der DTD verwenden Sie das Schlüsselwort NOTATION. Im folgenden Beispiel wird mpeg der MIME Type als Beschreibung zugewiesen:
Die allgemeine Syntax für eine Notation lautet: Beschreibung zum Identifizieren der Notation
>
In der Auszeichnung könnten Sie nun schreiben:
Im Allgemeinen sind heute Plug-Ins für das Abspielen von Audiodateien vom Browser aus erforderlich. Hier könnte beispielsweise das Quicktime-Audio-PlugIn die Datei anhand des MIME Types erkennen und abspielen.
60
Namensräume (namespaces) – das Erweiterungskonzept
HINWEIS Gerade in Bezug auf SVG-Grafiken, die ähnlich wie im obigen mpegBeispiel in HTML eingebettet sind, ist die Angabe des MIME Types (image/svg+xml) von Bedeutung. Damit können nämlich – im Gegensatz zu eigenständigen SVG-Dokumenten – die Grafiken auch angezeigt werden, wenn der SVG-MIME Type nicht in der MIME-Type-Liste des Webservers angegeben wurde (mehr dazu in Kapitel 15). Der SVG-Viewer erkennt anhand des in HTML ausgezeichneten MIME Types, dass es sich um eine SVG-Grafik handelt.
2.8
Namensräume (namespaces) – das Erweiterungskonzept Zu Anfang des Kapitels haben Sie gehört, dass XML-Sprachen extensibel, also erweiterbar sind. Dazu ein Vergleich: Wollen Sie eine HTML-4.0-Seite beispielsweise durch mathematische Formeln oder Symbole ergänzen, müssen Sie diese in einem Zwischenschritt zu Bildern (GIF, JPEG etc.) konvertieren. Erst die lassen sich dann über das Tag in das HTML-Dokument hineinreferenzieren. Es ergeben sich also für Sie folgende Probleme: •
Sie benötigen ein bestimmtes Tool (z. B. ein Bildbearbeitungsprogramm) und evtl. auch Kenntnisse in anderen Programmiersprachen.
•
Sie haben mehrere Dateien, an die Sie bei der Übermittlung solcher Seiten denken müssen.
•
Sie haben durch die Bilder höhere Ladezeiten beim Aufruf einer solchen Seite im Browser.
•
Unter Umständen ist auch noch die Bildqualität schlecht.
Hier setzt ein Teil des Extensible-Konzepts von XML an: Mit nur einem Sprachenprinzip (es sind zwar viele Sprachen, die aber alle gleich funktionieren) und nur einem Tool (Texteditor) können Sie verschiedenste Inhalte in nur ein Dokument integrieren. Was heißt das nun konkret? Haben Sie z. B. ein XHTML-Dokument, so können Sie mathematische Formeln mit Hilfe einer speziell für mathematische Formeln konzipierten Sprache einfügen: der Mathematical Markup Language (MathML), Symbole können Sie in Form von SVG-Code integrieren usw. (Die Krux liegt zugegebenermaßen nur darin, dass die ganze Sprachenvielfalt von XML momentan von keiner Software unterstützt wird.) Für die Deklaration solcher anderer Namensräume (namespaces) verwenden Sie das Attribut xmlns (für XML-namespace) i. d. R. im Root-Tag der Ausgangssprache. Danach können Sie die Tags und Attribute der anderen Sprache direkt verwenden. Dazu wird zunächst ein Präfix deklariert, das den Namensraum repräsentiert: xmlns:prefix. Dieses wird jedem verwendeten Tag oder Attribut durch Doppelpunkt getrennt vorangestellt: . Das Gute: Namensräume, die ein Parser, mit Ausnahme von validierenden Parsern, nicht
Kapitel 2 • XML – Metastandard von SVG & Co
61
kennt, werden von ihm schlicht ignoriert. Das nachfolgende XHTML-Beispiel enthält eine SVG-Grafik: Listing 2.7:
XHTML-Dokument mit integrierter SVG-Grafik
XHTML mit einer SVG-Grafik Hallo SVG!
Auch der XHTML-Namensraum wird explizit aufgerufen: xmlns="http:// www.w3.org/1999/xhtml". Diesmal allerdings ohne das Präfix, woran der Parser erkennt, dass es sich um den Standardnamensraum handelt. Auf diese Weise werden alle einfach verwendeten Tags als dem Standardnamensraum zugehörig identifiziert. HINWEIS Einige XML-Sprachen (darunter SVG) bieten auch die Möglichkeit, externe Sprachkonzepte in ein XML-Dokument zu integrieren, die für den Autor sehr einfach zu handhaben ist. Dabei werden die externen Code-Fragmente als quasi fremdes Objekt (foreign object) gekennzeichnet (mehr dazu in Kapitel 14).
2.9
Document Object Model (DOM) – die Zusammenhänge im XML-Baum Das Document Object Model (DOM) ist grundsätzlich ein plattform- und anwendungsneutrales Modell zur Beschreibung von Objektzusammenhängen in einer Baumstruktur, wie Sie sie in XML ebenso wie in HTML vorliegen haben. Dabei wird der Baum von oben nach unten durchlaufen, um zu einem gewünschten Element zu gelangen. Unter »oben« versteht man im DOM-Sprachgebrauch zunächst einmal das Dokument. Danach kommt das Root-Tag, dann dessen erstes Child-
62
Document Object Model (DOM) – die Zusammenhänge im XML-Baum
Tag usw. Die nachfolgende Grafik gibt einen Einblick in die »Denkweise« des DOMs:
Document parentNode
root attributes
firstChild childNodes firstChild
lastChild childNodes
previousSibling Text
firstChild
nextSibling
lastChild
firstChild
textNode Text
Abbildung 2.9:
Die »Denkweise« des Document Object Models
Auch das DOM ist ein Kind der W3C-Familie. Mittlerweile gibt es 3 DOMLevels, die jeweils mehrere Spezifikationen zu unterschiedlichen Bereichen wie HTML, CSS, Events und auch das Zusammenspiel mit XPath (Level-3) umfassen. Jede dieser Spezifikationen enthält Vorschläge für entsprechende DOMInterfaces, die sich in Programmiersprachen und Scripts, vorzugsweise Java, JavaScript, ECMAScript, implementieren lassen. Eine Auflistung all dieser Spezifikationen finden Sie unter http://www.w3.org/DOM/DOMTR. Mit dem DOM nehmen Sie Einfluss auf: •
Inhalte (Änderung von Texten, Zeichenelementen, Bildern etc.)
Stile (Veränderung von Formatierungen wie Sichtbarkeit, Farbe, Strichstärken etc.)
Auf das DOM müssen Sie auch zurückgreifen, wenn Sie dynamische, scriptgesteuerte SVG-Grafiken erzeugen wollen. Hier finden Sie spezielle Interfaces direkt in der SVG-Recommendation. Das SVG-DOM ist auf DOM-Level-1 abgestimmt und weist somit auch eine hohe Kompatibilität sowohl zu HTML 4.0 als auch zu XHTML auf. Außerdem sind wichtige Empfehlungen aus DOM-Level-2 wie CSS-Objektbeschreibungen und Event-Handling enthalten. HINWEIS Der Adobe SVG-Viewer unterstützt bereits einen Teil des SVG-DOMs plus zahlreicher Methoden und Interfaces des DOM Levels-1 und -2 (XML Core). Letztere sind in den Release-Notes der jeweiligen ViewerVersionen aufgelistet.
Was sind Grafiken? Raster kontra Vektoren Vektorgrafik im Detail Farben
64 64 70 75
64
Was sind Grafiken?
In SVG kommen zwei Dinge zusammen: XML und Grafik. Und genauso wie XML lässt sich auch der komplexe Bereich Grafik, genauer gesagt die grafische Datenverarbeitung (GDV), in diesem Buch nicht komplett abhandeln. Dennoch sind ein paar Grundlagen für die Programmierung von SVG vonnöten.
3.1
Was sind Grafiken? Bei Grafiken handelt es sich zunächst um visuell strukturierte Informationsträger. Dabei kann es sich ebenso um Text handeln wie um Linien, Rechtecke, Kreise, Bilder etc. Mit jeglicher Art von Grafik kommunizieren wir. Und das nicht wenig, denn ca. 80 % unserer Umwelt nehmen wir visuell wahr. Das liegt wohl daran, dass die Grafik neben der gesprochenen Sprache sowie der Gestik und Mimik eines unserer ursprünglichsten Kommunikationsmittel ist.
3.2
Raster kontra Vektoren In der GDV wird auf zwei Datenmodelle zurückgegriffen, die nicht konkurrieren, sondern einander ergänzen: Rasterdaten (z.B. für TIFFs, JPEGs, PNGs etc.) und Vektoren (z.B. CorelDraw-Grafiken). Streng genommen unterstützt SVG beides, auch wenn sich Rasterdaten nur als externe Entities über das Tag referenzieren lassen (Ausnahme: Über den CDATA-Abschnittbegrenzer lassen sich generell externe Text- oder Binärdaten in ein XML-Dokument einbinden, so also auch Bilder in SVG-Dokumente). Deshalb gehe ich in diesem Kapitel auf beide Datenmodelle ein, damit Sie sich später auch die Frage beantworten können: »Wann verwende ich das eine, wann das andere?«
3.2.1
Unterschiedliche Tools Zunächst müssen Sie beachten, dass beide Datentypen von unterschiedlichen Programmen erzeugt bzw. verarbeitet werden. So benötigen Sie für Rasterbilder Bildverarbeitungsprogramme wie: •
Adobe Photoshop
•
Corel PhotoPaint (Dieses Programm ist nur im Gesamtpaket Corel Graphics Suite, zu dem u. a. auch Corel DRAW gehört, erhältlich.)
•
Ulead Photo Impact
•
Jasc Paint Shop Pro
•
The GIMP (The GNU Image Manipulation Program; eine Open-Source-Software, deren Funktionsumfang mit dem von Photoshop vergleichbar ist)
Kapitel 3 • Grafische Datenverarbeitung – ein kurzer Einblick
65
Dagegen werden für die Vektorverarbeitung u. a. folgende Grafikprogramme eingesetzt: •
Macromedia Freehand
•
Micrografx Designer
•
Jasc WebDraw
Außerdem gibt es zahlreiche hybride Programme, vorrangig in den Bereichen CAD und Geoinformationssysteme, z.B.: •
AutoCAD
•
Intergraph
•
Bentley MicroStation
Aber auch mit Adobe Illustrator und Corel DRAW, die besonders als Vektorverarbeitungsprogramme bekannt sind, können Filter auf Rastergrafiken angewendet werden. Sowohl Jasc WebDraw als auch Adobe Illustrator und Corel DRAW – beide ab Version 9 – exportieren bereits SVG, worauf ich in Kapitel 17 zurückkommen werde.
3.2.2
Unterschiedliche Datenmodelle Der eigentliche Unterschied zwischen Rasterbildern und Vektorgrafiken ist im übertragenen Sinn die »Physis«. So haben Rasterbilder einen mosaikartigen Aufbau. Wie die Steinchen in einem Mosaik werden Bildpunkte (Pixel), die jeweils eine Farbinformation, z.B. Rot, enthalten, aneinander gereiht und ergänzen sich zu einem Bild. Hier zählt der Gesamteindruck – nicht das Detail. Aus diesem Grund müssen Mosaiken auch aus einer gewissen Distanz betrachtet werden. Ein gutes Beispiel hierfür sind die Glasfenster in einer Kathedrale wie der zu Chartres. Von nahem sehen Sie nur durch die einzelnen farblich voneinander abgesetzten Scheiben. Erst aus der Entfernung kommt das Bild (die für uns ausschlaggebende Information) zum Vorschein. Vektoren hingegen sind »physisch« gar nicht vorhanden. Der Begriff Vektor kommt aus der Mathematik (lineare Algebra). Die Grafiken werden zunächst über Punkte in einem Koordinatensystem beschrieben und mit Hilfe mathematischer Funktionen in Linien, Kurven, Kreise etc. umgerechnet. Da Punkte unabhängig sind von jeglicher Art der Transformation, wie Skalieren, Rotieren, Spiegeln, spielt es hier auch keine Rolle, ob Sie ein solches Bild von nahem oder aus der Ferne betrachten oder anders ausgedrückt heran- oder herauszoomen. Die Qualität des Bildes bleibt immer gleich, was Ihnen auch die folgende Grafik veranschaulicht:
66
Raster kontra Vektoren
Abbildung 3.1:
3.2.3
Raster kontra Vektoren
Unterschiedliche Ausgabe Abbildung 3.1 verdeutlicht auch, dass Sie mit Rasterbildern abhängig sind von der so genannten Bildauflösung, also der Pixelanzahl bezogen auf eine bestimmte Längeneinheit, z.B. 300 pixel per inch (ppi oder dpi für dots per inch). Je niedriger diese Auflösung ist, desto mehr werden die Pixel für das menschliche Auge sichtbar. Sie müssen sich also vor der Publikation eines Rasterbildes zwei Fragen beantworten: •
Welche Ausmaße (Breite und Höhe) soll das publizierte Bild haben?
•
Für welches Medium publiziere ich das Bild?
Die erste Frage können Sie sich anhand des folgenden Beispiels beantworten: Sie wollen ein Bild für eine Webseite nutzen. Dieses hat die Bildmaße 500 x 600 Pixel und ein Bildauflösung von 72 dpi. Im Seiten-Layout soll es nun auf die Hälfte (50 %) verkleinert werden. Sie haben zwei Möglichkeiten: 1. Sie geben in HTML die neuen Maße für das Bild ein: .
Sie können so vorgehen, nur hat sich das Bild vom Speicherbedarf her nicht verändert. Praktisch sind nämlich nicht nur Breite und Höhe des Bildes um die Hälfte kleiner geworden, sondern auch Breite und Höhe der Pixel. Da jetzt doppelt so viele Pixel in ein Inch passen, erhalten Sie folglich eine Auflösung von 144 dpi, was für die Bildschirmausgabe zu hoch ist und somit die Ladezeiten unnötig verlängert. 2. Sie geben in einem Bildverarbeitungsprogramm (z.B. Adobe Photoshop) die neuen Maße (250 x 300 Pixel) so ein, dass sich auch die Pixelanzahl auf die Hälfte reduziert. Das ist die professionellere Lösung, denn damit behält das Bild seine Auflösung von 72 dpi bei, und der Speicherbedarf sinkt entsprechend.
Kapitel 3 • Grafische Datenverarbeitung – ein kurzer Einblick
67
Die nachfolgende Grafik zeigt die Zusammenhänge zwischen Bildmaß und Bildauflösung: Verkleinerung bei gleichbleibender Pixelanzahl
Abbildung 3.2:
Verkleinerung bei entsprechend verminderter Pixelanzahl
Bildmaß in Abhängigkeit von der Bildauflösung
Wie Sie sehen, hat die so genannte Interpolation der Pixel, wie sie im zweiten Fall vorliegt, nicht nur Vorteile. Sie verändert nämlich das Bild, da die Farbpixel in das neue Pixelraster eingepasst werden. Das ist auch der Grund, weshalb Sie bereits vor der Publikation eines Rasterbildes die genauen Maße kennen müssen. TIPP Bevor Sie ein Rasterbild für den Online-Gebrauch optimieren, speichern Sie es separat (unter anderem Namen) ab, denn Veränderungen an einem gesicherten Rasterbild sind – im Gegensatz zu Vektorgrafiken – meist unwiderruflich. Nun zur zweiten Frage: Es ist nicht egal, ob Sie ein Bild drucken oder online am Bildschirm betrachten. In der Tabelle sind einige Schlüsselangaben für die Bildauflösung in Bezug auf die spätere Publikation aufgelistet. Ich empfehle Ihnen, sich an diese Werte zu halten, besonders weil sich, wie Sie gerade festgestellt haben, mit steigender Auflösung auch der Speicherbedarf eines Rasterbildes erhöht: Art der Ausgabe
Auflösung in dpi
Erläuterung
Printpublikationen
300
Ein gedrucktes Bild wird in der Regel aus einer Distanz von 30 bis max. 50 cm betrachtet (Ausnahme: Plakate). Da werden für gute Augen die Pixel bei einer Auflösung kleiner als 300 dpi, z.B. 200 dpi, bereits sichtbar.
Printpublikationen von textreichen Bildern
400
Für die filigranen Texte wird eine höhere Auflösung benötigt, da die Pixel sonst »verklumpen«, was die Lesbarkeit vermindert.
Tabelle 3.1:
Publikationsabhängige Bildauflösungen
68
Raster kontra Vektoren
Art der Ausgabe
Auflösung in dpi
Erläuterung
Bildschirmpublikationen
72
Die Auflösung der Bildschirme beträgt nur 72 dpi. Somit bringt eine höhere Auflösung keine Qualitätssteigerung. Bei einer niedrigeren hingegen sind die Pixel sichtbar.
Tabelle 3.1:
Publikationsabhängige Bildauflösungen (Forts.)
HINWEIS Hin und wieder kann Ihnen auch die Auflösungseinheit dpcm (dots per centimeter) begegnen. Der Umrechnungsfaktor von Inch zu Zentimeter beträgt 2.54. So entsprechen 300 dpi 118 dpcm. Vektorgrafiken sind generell unabhängig von der Art der Ausgabe. Auch wenn sie für die Anzeige auf Bildschirm oder Druckmedium ebenfalls »on the fly« gerastert werden müssen (beispielsweise mit so genannten RIPs, Raster Image Processors). Dennoch gibt es auch einen Nachteil: Die Programme, die die Ausgabe steuern, unterstützen nicht immer die Verarbeitung von Vektordaten. Deshalb sind Rasterbilder bezogen auf die Auflösung heutzutage immer noch unproblematischer.
3.2.4
Unterschiedlicher Speicherbedarf Speicher ist mehr denn je ein wertvolles Gut. Speicherbausteine, ob Fest- oder Arbeitsspeicher, werden zwar im Verhältnis immer günstiger, dafür steigt aber auch der Bedarf. Gerade Grafiker kennen das. Und in der Tat hängt das auch mit den beiden Datenmodellen zusammen. Denn während auf der einen Seite Rasterbilder immer den wesentlich höheren Dateispeicher beanspruchen, weisen Vektorgrafiken leider gerade in der Online-Welt häufig noch höhere Ladezeiten auf. Ein Problem, das jedoch mit neuen Browser- und Viewer-Entwicklungen immer mehr beiseite tritt.
3.2.5
Unterschiedlicher Einsatz Wann verwenden Sie nun das eine, wann das andere? Grundsätzlich ist es eine Frage dessen, was das Bild oder die Grafik darstellt. Beispielsweise könnten Sie mit Vektoren eine Fotografie nachzeichnen. Die Folge wäre, dass jede einzelne Grau- oder Farbabstufung aufwändig beschrieben werden müsste. Umgekehrt könnten Sie für einen einfachen blauen Kreis mit einem Radius von 50 Pixel ein TIFF oder JPEG anfertigen (was für Webseiten ja auch vorwiegend praktiziert wird). Dieses hätte dann bereits 100 x 100, also 10 000 Pixel. Dagegen benötigen Sie beispielsweise in SVG gerade mal eine Zeile Code:
Kapitel 3 • Grafische Datenverarbeitung – ein kurzer Einblick
69
Daraus ergeben sich folgende Schlussfolgerungen: •
Raster eignen sich für vielfarbige Bilder mit hohem Detaillierungsgrad, z.B. Fotos.
•
Vektoren eignen sich für detailärmere Bilder mit weniger Farben, die aber dafür in der Ausgabe bei jedem Zoomfaktor absolut randscharf sein müssen, z.B. skalierbare Karten, Firmenlogos etc.
Gerade die Zoom-Unabhängigkeit von Vektorgrafiken spiegelt sich auch in einer Vorgabe der SVG-Spezifikation wieder: Sie stellt den Anspruch an SVG-unterstützende Tools, dass Lupenfunktionen implementiert sein sollten. Aufgrund der Tatsache, dass Vektorgrafiken sehr detailliert beschrieben sind, ist auch der Zugriff auf diese Details möglich. So ergeben sich zum oben genannten globalen Einsatzgebiet noch weitere. Vektorgrafiken lassen sich nämlich im Gegensatz zu Rasterbildern gezielt
3.2.6
•
formatieren,
•
über Scripting verändern,
•
interaktiv machen,
•
animieren.
2D und 3D? Auch wenn SVG ausschließlich für zweidimensionale Vektorgrafiken konzipiert wurde, weswegen ich auch nicht tiefer auf das Thema 3D eingehen möchte, liegt sicherlich darin eines der Hauptargumente, Vektorgrafik der Rastergrafik vorzuziehen. Denn das Prinzip für die Beschreibung zwei- (X, Y) und dreidimensionaler Grafiken (X, Y, Z) ist gleich. HINWEIS Um 3D-Grafiken zu erzeugen und anzusehen, werden andere Sprachen und ihre dazugehörige Software benötigt, die u. a. die Möglichkeit bietet, in einer Modell-Landschaft zu navigieren. Solche so genannten VR(Virtual Reality-)Sprachen sind beispielsweise VRML und deren Extensible-Pendant X3D. Grundsätzliche Denkansätze, X3D mit SVG zusammenzubringen, sind natürlich vorhanden, wenn auch in erster Linie über das Extensible-Konzept von XML. Das heißt, weder SVG enthält Elemente von X3D noch umgekehrt.
70
3.3
Vektorgrafik im Detail
Vektorgrafik im Detail Beim Aufbau von Vektorgrafiken stehen Sie vor dem Problem, alle Details, die eine Grafik ausmachen, beschreiben zu müssen. Das sind grundsätzlich: •
Lage der Punkte
•
Richtung der Pfade
•
Verlauf der Pfadsegmente (Kurven oder gerade Linien)
•
Zusammenschluss von Pfaden zu Flächen
•
Ebenenreihenfolge der einzelnen Grafikelemente (vorne, hinten)
•
Formatierungen
Ich möchte ausnahmsweise mit den beiden letzten Punkten beginnen.
3.3.1
Zusammensetzung einer Vektorgrafik Die nachfolgende Grafik zeigt Ihnen, wie sich eine Vektorgrafik zusammensetzt. Dabei sollten Sie ein besonderes Augenmerk auf die Ebenenreihenfolge richten: Manche Elemente liegen hinten, manche vorne:
®
Abbildung 3.3:
®
Zusammensetzung einer Vektorgrafik
Die Flächenfarben und Linienstärken, die Sie sehen, sind Formatierungen, die nachträglich den eigentlichen Vektoren (Pfaden) zugewiesen wurden. Außerdem sehen Sie ein Registry-Zeichen (®), das Texte im Allgemeinen repräsentieren soll. Auch die TrueType- oder PostScript-Zeichensätze, die Sie auf Ihrem Rechner installiert haben, sind nichts anderes als Vektorgrafiken, die allerdings noch mit zusätzlichen typografischen Informationen verknüpft sind.
Kapitel 3 • Grafische Datenverarbeitung – ein kurzer Einblick
3.3.2
71
Punkte, Pfadsegmente, Flächen Allgemein gesprochen setzen sich Vektorgrafiken zusammen aus: •
Mindestens ein Pfadsegment wird benötigt, um eine Fläche zu bilden, wobei hier Anfangs- und Endknoten an exakt gleichen Stellen sitzen müssen.
Dass der Begriff Vektor aus der Mathematik kommt, haben Sie bereits gehört. Er beschreibt die Lage eines Punktes in einem Koordinatensystem von dessen Ursprung aus gemessen: Y P1
2 3 P2
4 2
X Abbildung 3.4:
Punktbeschreibung mit Hilfe von Vektoren
P1 hat also die Koordinaten 2,3 und P2 die Koordinaten 4,2. Beide Punkte stehen in einer linearen Abhängigkeit zueinander, die sich in Form einer Matrix ausdrücken lässt: -1 -0 -2 -0 -1 -1 -0 -0 -1
2 3 1
4 2 1
x y 1
xT yT 1
oder allgemein: a b c d e f 0 0 1
72
Vektorgrafik im Detail
Mit diesen Matrizen werden Sie noch einmal in Kapitel 10 konfrontiert, wenn es in SVG um Transformationen geht. Dieser lineare Zusammenhang wird als Affinität bezeichnet. Mit ihm kommt gleichzeitig ein weiterer wichtiger Aspekt der Vektorverarbeitung zum Ausdruck, nämlich die Unterscheidung zwischen absoluten und relativen Punktpositionen. Absolute und relative Punktpositionen Die beiden Translationskomponenten c und f, also im Beispiel 2 und -1, stellen genau genommen die relative Verschiebung von P1 zu P2 dar. Relative Verschiebungen beziehen sich auf den vorangegangenen Punkt, während absolute die Entfernung zum Ursprung des Koordinatensystems darstellen. In der Vektorgrafik können Sie mit beiden Positionsangaben Punkte beschreiben: absolute Positionen
relative Positionen
Y
Y
200, 200
300, 200
200
100, 0
200 200, 200
X 200
Abbildung 3.5:
300
X 200
300
Absolute und relative Punktpositionen
In der SVG-Pfadbeschreibung drücken Sie diesen Unterschied durch die Verwendung von großen (für absolute) und kleinen Buchstaben (für relative Positionen) aus, z.B.:
Richtung eines Pfades Sie können die Richtung für die beiden gerade gezeigten Pfade auch einfach umdrehen:
Tatsächlich hat die Richtung, in der ein Pfad verläuft, eine Bedeutung. Bemerkbar macht sich diese u. a. bei:
Kapitel 3 • Grafische Datenverarbeitung – ein kurzer Einblick
73
•
Pfeilspitzen, die an einem bestimmten Knoten angebracht werden
•
Linienmuster, die von einem bestimmten Knoten aus beginnen
•
Pfaden mit »Löchern« oder sich überlappenden Flächen
Pfadbeschreibung Zwei Punkte lassen sich über unendlich viele Wege miteinander verbinden. Der kürzeste ist dabei die einfache Linie. Für alle anderen benötigen Sie noch weitere Parameter. In der nachfolgenden Grafik sind drei Punkte auf zwei verschiedene Arten miteinander verbunden: zunächst über eine Linie, dann über eine Kurve: Y Pfadsegmente über die Tangente beschriebenes Kreissegment Kurvenpunkt mit zwei Anfassern Eckpunkt (kein Anfasser)
Tangente
Anfasser (Ziehpunkt) Anfasserverbindung
X Abbildung 3.6:
Verschiedene Pfadsegmente
WARNUNG Verstehen Sie diese Zeichnung nicht falsch, denn was Sie in einer Vektorgrafik sehen, sind nicht die Pfade, sondern deren Formatierungen! Wie im XML-Konzept liegt auch hier eine klare Trennung von Struktur und Formatierung vor. Pfade bilden nur das mathematisch berechnete Grundgerüst, auf das später die sichtbaren Eigenschaften wie Farbe, Linienstärke etc. gelegt werden. Ein Grund mehr also, Vektorgrafik mit XML zu beschreiben. Für die Beschreibung der Kurve wurden zwei weitere Punkte eingefügt – die so genannten Kontroll- oder Zieh- bzw. Anfasserpunkte. (Die letzten beiden Begriffe sind aus der Praxis entstanden: In Zeichenprogrammen werden Anfasserpunkte mit der Maus gefasst und vom Knotenpunkt weggezogen.) Sie bilden eine Tangente zu einem jeweils zu Beginn wie auch am Ende des Kurvenverlaufs befindlichen Kreissegment, an das sich der Kurvenverlauf anschmiegt. Eine dritte Tangente wird, sofern beide Anfasser in die gleiche Richtung weisen, mit Hilfe der Verbindung zwischen den Anfasserpunkten beschrieben. Diese verläuft parallel zur eigentlichen
74
Vektorgrafik im Detail
Kurventangente. Weisen die beiden Anfasser in verschiedene Richtungen, schneidet die Anfasserverbindung den Pfad (siehe unten). Bézierkurven Für die genaue Beschreibung solcher Kurven werden Funktionen eingesetzt, die der französische Mathematiker Pièrre Etienne Bézier Anfang der 60er Jahre entwickelt hat. Entsprechend werden auch die Kurven als Bézierkurven bezeichnet. Dabei werden insbesondere zwei Arten von Bézierkurven unterschieden, die auch für SVG von Bedeutung sind: •
kubische Bézierkurven
•
quadratische Bézierkurven
Vereinfacht gesprochen könnte man jetzt sagen, kubische unterscheiden sich von quadratischen Bézierkurven dadurch, dass Erste zwei und Letztere nur einen Anfasser für die Beschreibung benötigen. Tatsächlich basieren sie jedoch auf unterschiedlichen Graden binomischer Funktionen. Die Funktion für kubische Bézierkurven lautet: P(t) = P0 (1 - t)3 + 3 P1 (1 - t)2 + 3 P2 (1 - t) t2 + P3 t3 Hiermit wird eine Kurve zwischen den beiden Punkten P0 und P3 über die beiden Anfasser P1 und P2 beschrieben. t ist dabei eine Laufvariable zwischen 0 und 1. Nachfolgend sehen Sie einige kubische Bézierkurven dargestellt: P0
P3
P1
P2
Abbildung 3.7:
Kubische Bézierkurven
Die Funktion, die eine quadratische Bézierkurve beschreibt, lautet: P(t) =P0 (1 - t)2 + 2 P1 (1 - t) t + P2 t2 Hiermit wird eine Kurve zwischen den beiden Punkten P0 und P2 über einen Anfasser P1 beschrieben. t ist dabei eine Laufvariable zwischen 0 und 1.
Kapitel 3 • Grafische Datenverarbeitung – ein kurzer Einblick
75
Betrachten Sie auch hier die Zusammenhänge anhand der Grafik: P0
P2
P1
Abbildung 3.8:
Quadratische Bézierkurven
Elliptische Kurven Eine optimierte Beschreibung speziell geformter Kurvensegmente sind elliptische Kurven. Diese werden über eingängige Parameter wie X- und Y-Radius der Ellipse, Drehung der X-Achse usw. berechnet. Da dieser Berechnung unterschiedliche Algorithmen zugrunde liegen können, macht die SVG-Spezifikation Vorgaben für die softwaretechnische Umsetzung. Diese finden Sie im Abschnitt Implementation Requirements. Flächen Um eine Fläche (z.B. ein Polygon) zu erhalten, setzen Sie meist mehrere Pfadsegmente zusammen. Dabei muss der gesamte Pfad einen identischen Anfangs- und Endpunkt haben. Man spricht hier auch von geschlossenen Pfaden. Für SVG spielt das kaum eine Rolle, weil hier auch nicht geschlossene Pfade mit einer Flächenfüllung belegt werden können. Bei zahlreichen Zeichenprogrammen, wie Macromedia Freehand, ist das jedoch anders. Wenn Sie sich hier wundern, dass eine zugewiesene Füllungsfarbe partout nicht erscheint, kann es eigentlich nur daran liegen, dass der Pfad nicht vollständig geschlossen ist. BUCHTIPP Eines der bekanntesten Bücher zu diesem Thema ist: Foley, James D.: Computer Graphics: Principles and Practice. 2. ed. in C. Reading, Mass. u.a.: Addison-Wesley 2000.
3.4
Farben Ein wichtiger Teilaspekt in einer Grafik ist natürlich die Farbe. Sie gibt ihr den eigentlichen Reiz. Nur, was ist so neu am Thema »Farben«, dass man ihm ein eigenes Kapitel widmet? Tatsächlich sind Farben für die Grafik nicht nur reizvoll, son-
76
Farben
dern auch problematisch. Denn zu unterschiedlich sind Ein- und Ausgabegeräte, als dass hier ein Bild immer gleich erscheinen würde. Ein Hauptproblem liegt in den zugrunde liegenden unterschiedlichen Farbräumen. Während Monitore mit den drei Lichtkanälen Rot, Grün und Blau (RGB) arbeiten, benötigen Drucker in der Regel die vier Druckfarben Cyan, Magenta, Gelb und Schwarz (CMYK). Erste bezeichnet man als additive Farben, da sie weißes Licht aufbauen, und Letztere als subtraktive, da sie weißes Licht bis zum Schwarzen hin absorbieren. additive Farben (RGB)
subtraktive Farben (CMY)
rot gelb
grün
Abbildung 3.9:
cyan magenta
cyan
blau
blau
magenta
grün
rot
gelb
Additive kontra subtraktive Farben
Somit wäre Schwarz als Druckfarbe eigentlich nicht notwendig, wird aber dennoch verwendet, um ein sattes Schwarz zu erzielen. Das Schwarz, das sich aus den drei Farben Cyan, Magenta und Gelb zusammensetzt, geht im Druck eher ins Grünliche. Für CMYK gibt es eine Norm: die Euroskala für den Offsetdruck. Für RGB hingegen war bis vor nicht allzu langer Zeit »Standardisierung« ein Fremdwort. Kein Wunder, denn nahezu jedes farbbildgebende elektronische Medium wie Fernseher oder Computerbildschirm stellt Farben über die drei Lichtkanäle dar. Spezifische RGB-Farbräume gibt es ebenso für Fernsehnormen, wie etwa NTSC, PAL und HDTV, wie für Softwarestandards, darunter Apple RGB und SGI RGB. Mit der Entwicklung eines einheitlichen RGB-Farbraums haben sich einige Firmen, besonders Hewlett Packard und Microsoft, auseinander gesetzt. Es erwuchs ein Standard, mit dem versucht wurde (100-prozentig wird das wohl nie gelingen), wichtige Faktoren, die für die Farbdarstellung eine Rolle spielen, zu berücksichtigen. Dieser Standard trägt den Namen sRGB. Sein Gamut (das ist der Farbumfang der darstellbaren Farben eines Farbraums) wurde an die Phosphorfarben des hochauflösenden High Definition Television (HDTV) angepasst. Damit wurde beispielsweise verhindert, dass die Gamut-Transformationen, die notwendig sind, um einen Farbraum in einen anderen zu transformieren, gerade für Ausgabegeräte
Kapitel 3 • Grafische Datenverarbeitung – ein kurzer Einblick
77
wie PC-Bildschirme allzu aufwändige Berechnungen nach sich ziehen. Die nachfolgende Grafik zeigt den Unterschied des sRGB-Gamuts zum RGB-Gamut bisher vorherrschender Kathodenröhren-Bildschirme. Dabei wurde als Grundlage das von der Commission Internationale de l’Eclairage (CIE) 1931 herausgegebene Farbdiagramm verwendet, das alle für das menschliche Auge sichtbaren sFarben umfasst:
grün
0.9
520 nm 0.8
550 nm
0.7
sRGB-Gamut 0.6 575 nm 0.5 520 nm 0.4
600 nm
0.3
630 nm
RGBGamut
700 nm
rot
0.2
0.1
480 nm 460 nm 400 nm
0.0 0.0
0.1
0.2
0.3
0.4
0.5
0.6
0.7
0.8
blau Abbildung 3.10: sRGB-Gamut vs. RGB-Gamut
(X- und Y-Werte beschreiben die Chromatizität, also den Sättigungsgrad von Farben. Dabei liegt ganz in der Mitte der so genannte Weißpunkt, in dem die Sättigung am geringsten ist. Das »Hufeisen« mit den Nanometerangaben gibt die Wellenlängen der elektromagnetischen Strahlung für die Ausgangsfarben wieder.) Der Unterschied zwischen den beiden Gamuts ist relativ gering und so gilt sRGB heute als der Transformationsfarbraum in der Bildschirmfarbwelt. Gleichzeitig wurde damit ein Standardfarbprofil geschaffen, das eine Brücke schlägt zu den heutigen Farbmanagement-Systemen und besonders den ICC-Farbprofilen, auf
78
Farben
die ich im Laufe des Buches noch einmal zu sprechen komme. SVG unterstützt nämlich den sRGB-Farbraum. Mehr zum Thema sRGB finden Sie auf der offiziellen Site unter http:// www.srgb.com.
Kapitel 4 SVG – der Standard 4.1 4.2 4.3 4.4
Geschichtliches Die SVG-Recommendation vom W3C Blick auf die Konkurrenz – die Vector Markup Language (VML) Warum SVG und nicht Flash?
80 80 81 85
80
Geschichtliches
Wie XHTML ist auch SVG eine XML-Instanz. Einfache Textdateien beschreiben zweidimensionale Vektorgrafiken einschließlich deren Animationen und Interaktionen. Damit wurden die Vorteile typischer Online-Formate wie Flash oder PDF und selbst HTML in einer Sprache zusammengefasst. Mit SVG können Sie wie mit jedem guten Grafikprogramm Zeichnungen erstellen, diese mit Texten kombinieren, transformieren und Filter anwenden, die Sie normalerweise aus der digitalen (Raster-)Bildverarbeitung kennen. Ab Kapitel 6 werde ich auf die Gestaltungsmöglichkeiten näher eingehen. Ein ganz großer Vorteil aller MarkupSprachen ist die Kennzeichnung der einzelnen Daten. Dadurch können Sie gezielt auf einzelne Elemente und Eigenschaften zugreifen, diese abändern oder ersetzen. Für SVG ist das deshalb ein wesentlicher Aspekt, da in der Vektorgrafik bereits einfachste Inhalte einen relativ komplexen Grundaufbau haben. Wer sich schon einmal mit der Seitenbeschreibungssprache PostScript auseinander gesetzt hat, weiß, wie viele Seiten Source-Code ein schlichtes Rechteck hervorbringen kann. Um daran etwas zu verändern, müssen Sie sich schon gut mit der Sprache auskennen. In SVG haben Sie aussagekräftige Bezeichnungen für Elemente und Attribute. Das Tag steht für ein Rechteck, seine beiden Attribute width und height für dessen Breite und Höhe. Sie finden sich schnell zurecht und haben dazu einen wesentlich höheren Informationsgehalt als in PostScript.
4.1
Geschichtliches Was den Werdegang von SVG betrifft, so wurden erste Konzepte bereits 1998 erarbeitet: Im April reichten Adobe, IBM, Netscape und Sun beim W3C eine Note über die Precision Graphics Markup Language (PGML) ein, eine stark PostScript-orientierte Sprache, deren Vorteile sowohl in den Gestaltungsmöglichkeiten als auch bereits in der Animation von Grafiken liegen. Einen Monat später lag ein Vorschlag der Firmen Hewlett Packard, Microsoft, Macromedia und Visio zur Vector Markup Language (VML) auf dem Tisch des Konsortiums. Hiermit wurden weniger gestalterische als eher technische Aspekte berücksichtigt, wie die Einbindung mathematischer Funktionen, die sich in Vektorbeschreibungen einbinden lassen. Weitere interessante Aspekte in puncto skalierbarer Webgrafik lieferten PRP und Orange PCSL: Mit ihrer Hyper Graphics Markup Language (HGML – die Anlehnung an HTML ist unübersehbar) wollten sie das Hauptaugenmerk auf die Verbreitung von Grafiken in der Wireless-Technologie richten. Auffallend sind in diesem Konzept Funktionalitäten wie die Möglichkeit, ganze Bildausschnitte zu kopieren und an anderer Stelle einzufügen oder zu transformieren. Schließlich entstand SVG im Oktober 1998. Darin wurden die meisten Vorzüge der anderen Sprachen zusammengefasst, optimiert und ergänzt.
4.2
Die SVG-Recommendation vom W3C Die vom W3C ins Leben gerufene SVG-Working Group, zu denen zahlreiche führende Firmen der Computerindustrie gehören, arbeiten an dem Standard (darunter namhafte Firmen wie Adobe, Apple, Autodesk, Canon, Corel, HP, IBM,
Kapitel 4 • SVG – der Standard
81
Kodak, Macromedia, Microsoft, Netscape/AOL, Quark, Sun und Xerox). Seit dem 4. September 2001 hat SVG 1.0 eine offizielle Recommendation. Die Spezifikation dazu finden Sie unter http://www.w3.org/TR/SVG/. Deren über 600 DIN A4-Seiten, die bereits auf die Komplexität des Standards schließen lassen, umfassen neben den technischen Angaben zum Aufbau von SVG-Strukturen die DTD und spezielle SVG DOM-Interfaces.
4.3
Blick auf die Konkurrenz – die Vector Markup Language (VML) Eine Sprache, die immer noch viel Interesse auf sich zieht, zumal gerade Microsoft diesen Standard stark forciert hat, ist VML. Der einstige Vorgänger von SVG ist zum Teil im Office 2000-Paket implementiert. Auch wird sie vom Internet Explorer für Windows (ab Version 5.0) mit Hilfe des mitgelieferten VML-PlugIns, das allerdings benutzerdefiniert installiert werden muss, direkt geparst und angezeigt. Da kommt schnell die Frage auf: »Warum SVG und nicht VML?« Grundsätzlich ist VML eher auf Grafiken ausgerichtet, die keine besonderen künstlerischen Gestaltungsmerkmale aufweisen. Das Gestaltungsniveau entspricht ungefähr dem von MS Word oder PowerPoint: Mit Rechtecken, Kreisen, Polylinien, aber auch Bézierkurven, erstellen Sie das vektorielle Grundgerüst. Darüber können Sie neben den Standardformatierungen (Füllungen, Strichstärken etc.) auch Verläufe und rudimentäre Schattierungen anwenden. Dafür gibt es keine Filter. Ebenso sind auch keine rein über die Auszeichnung gesteuerten Animationen möglich (scriptgesteuerte schon). Auf den folgenden Seiten sehen Sie VML-Beispiele, wie Sie beispielsweise MS Word generiert (über DATEI/ALS WEBSEITE SPEICHERN).
4.3.1
Eine einfache VML-Grafik Listing 4.1:
Beispiel: »Mit VML zeichnen« (aus MS Word generierter Code)
v\:* {behavior:url(#default#VML);} Mit VML zeichnen
82
Blick auf die Konkurrenz – die Vector Markup Language (VML)
VML
Im obigen Beispiel wurden Teile des Original-Codes entfernt, um Platz zu sparen. Word generiert neben Metainformationen und Microsoft-spezifischen Properties auch ein Ersatzbild (GIF) in den Code, für den Fall, dass der Browser kein VML versteht (wie der Internet Explorer 5 für den Macintosh). Grundsätzlich wird der VML-Code über den Namensraum (xmlms:v="urn:sche mas-microsoft-com:vml") in die übergeordnete HTML-Datei eingebunden. Hier haben Sie mit ein Rechteck und mit ein Oval (genauer gesagt, einen Kreis) definiert. Der Text VML wird mit dem HTML-Tag ausgezeichnet. Beschreibungen bzw. Formatierungen werden, sofern sie aus CSS stammen, innerhalb des Attributs style gesetzt (Achtung: Hier steht der Wert immer in einfachen Hochkommata!). Außerdem gibt es VML-eigene Attribute wie im Beispiel fillcolor="yellow". Und so sieht’s im Internet Explorer aus:
Abbildung 4.1:
»Mit VML zeichnen« (im Internet Explorer 5 für Windows)
Kapitel 4 • SVG – der Standard
4.3.2
83
Pfade zeichnen mit VML Als Nächstes zeichnen Sie einen Pfad, dessen Pfadbeschreibung übrigens der von SVG sehr ähnlich sieht, wie Sie in Abschnitt 6.2 sehen werden: Listing 4.2:
Beispiel »Pfade zeichnen mit VML«
v\:* {behavior:url(#default#VML);} Pfade zeichnen mit VML
In VML verwenden Sie innerhalb des Elements das Child-Element . Mit definieren Sie grundsätzlich eine beliebige Form. Dabei enthält es einige Formatierungsattribute, die später auf vererbt werden, darunter auch strokeweight für die Strichstärke und strokecolor für dessen Farbe. benötigt , da es selbst nicht gerendert wird. Und so sieht’s im Internet Explorer 5 aus:
Abbildung 4.2:
»Pfade zeichnen mit VML«
84
4.3.3
Blick auf die Konkurrenz – die Vector Markup Language (VML)
Das Koordinatensystem ändern Schließlich skalieren Sie den Pfad, indem Sie die Koordinateneinheiten von verändern. Das geschieht mit dem Attribut coordsize, das abhängig ist von den Properties width und height. (Beachten Sie hier bitte, dass mit coordsize die Maßeinheiten in Formatierungen wie Strichstärken nicht mit skaliert werden.) Mit coordorigin legen Sie darüber hinaus auch noch einen anderen Koordinatenursprung fest. Das wirkt sich hier allerdings nur aus, wenn Sie auch festlegen, dass die verwendeten Einheiten absolut sein sollen: und zwar mit der Property position:absolute: Listing 4.3:
Beispiel »Das Koordinatensystem ändern«
v\:* {behavior:url(#default#VML);} Das Koordinatensystem aendern
In diesem Beispiel wurde zusätzlich eine Hintergrundfarbe mit definiert. Dafür müssen Sie das Attribut fillok="false" zuweisen, da der Pfad sonst automatisch eine weiße Füllungsfarbe erhält, was Sie in einem nichtgeschlossenen Pfad zumeist vermeiden wollen. Und so sieht’s im Internet Explorer 5 aus. In Abschnitt 5.7 werden Sie das SVG-Ansichtsattribut viewBox kennen lernen, das ähnlich aussieht wie coordsize und coordorigin. Mit diesem werden jedoch auch die Einheiten für Formatierungen entsprechend skaliert.
Kapitel 4 • SVG – der Standard
Abbildung 4.3:
4.3.4
85
»Das Koordinatensystem ändern«
Kurzes Fazit Mit VML lassen sich bereits relativ komplexe Grafiken umsetzen. Auch Transformationen wie Spiegeln, Rotieren usw. sind von der Spezifikation vorgesehen, werden aber leider vom Internet Explorer nicht umgesetzt. Ein Feature von VML ist die Definition von Formeln, die Sie in Pfadbeschreibungen einbinden können, um einzelne Pfadabschnitte gezielt zu transformieren. Vergleichbares gibt es in SVG 1.0 noch nicht, ist aber für Version 2.0 bereits angedacht. VML ist eine Sprache, die als Note beim W3C eingereicht wurde und wohl nie über diesen Status hinauskommen wird. Ob diese Sprache außerhalb von Microsoft-Produkten jemals weiter implementiert wird, ist, gerade nachdem das weitaus bessere SVG in Gang gekommen ist, fraglich.
4.4
Warum SVG und nicht Flash? Viele Webgrafiker, die sich mittlerweile auf einen Standard eingestellt haben, wollen sich nicht wieder umorientieren. Was spricht für SVG, wovon sich beispielsweise auch alteingesessene Flash-Spezialisten überzeugen lassen? Gerade das Animationstool Macromedia Flash ist zunächst ein Argument gegen SVG, denn in der Tat gibt es für den XML-Standard noch kein vergleichbares Programm. Macromedia selbst ist im Moment auch noch weit entfernt von dem Gedanken, SVG in das weit verbreitete Tool zu integrieren. Es gibt dennoch Gründe, auf SVG als Standard zurückzugreifen, denn es bietet inhaltliche wie praktische Vorzüge gegenüber dem Konkurrenten. Einige wichtige sind nachfolgend aufgeführt.
86
4.4.1
Warum SVG und nicht Flash?
Tool Zwar bietet Macromedia ein ausgezeichnetes Tool für Flash an, dafür sind Sie darauf aber auch angewiesen. Außerdem ist es kostenpflichtig. SVG können Sie in jedem Texteditor erstellen und modifizieren.
4.4.2
Strukturierung Flash liegt im verkapselten, wenig strukturierten Binärformat vor, während SVG textbasiert und XML-strukuriert ist. In der Folge sind bei SVG Zugriffe über Scriptsprachen einfacher. Allerdings liegt im offen gelegten Textformat auch einer der ganz großen Nachteile von SVG: Die Tatsache, dass jeder schnell auf die Quelldaten zugreifen kann, ist in der Grafik natürlich nicht wünschenswert. Deshalb gibt es bereits die Vorgabe für zukünftige SVG-Versionen, dass Verschlüsselungsmechanismen integriert werden sollen.
4.4.3
Generierung mit Hilfe von Scriptsprachen Für Flash bzw. Shockwave gibt es einige wenige PHP-Funktionen, mit denen Modifizierung und Generierung einfacher Grafiken und Animationsmechanismen möglich sind. SVG-Grafiken lassen sich mit Hilfe vieler Scriptsprachen wie JavaScript, Perl, PHP, ASP und JSP genauso generieren wie jedes andere XMLDokument auch. Außerdem sind XSL-Transformationen nur für SVG möglich.
4.4.4
Eingebundene Script- oder Programmiersprachen In Flash können Sie ausschließlich die Flash-eigene Scriptsprache ActionScript, die JavaScript allerdings sehr ähnlich ist, einbinden. SVG unterstützt die standardisierte Scriptsprache ECMAScript sowie JavaScript.
4.4.5
Externe Bilddaten In Flash werden Bilder immer eingebettet, nie referenziert. Das wiederum kann problematisch sein in Bezug auf die Nachführung von Bildern. Nehmen Sie Veränderungen am Bild vor, müssen Sie Flash-Dateien neu abspeichern. In SVG gibt es das Tag . Mit diesem referenzieren Sie externe Bilder genauso in ein SVG-Dokument wie mit in ein HTML-Dokument. (Sollte es aber erwünscht sein, lassen sich auch in SVG Bilder innerhalb des CDATA-Abschnitts einbetten.)
4.4.6
Farben Flash unterstützt nur einen programminternen RGB-Farbraum. SVG hingegen unterstützt bereits den standardisierten Farbraum sRGB. Außerdem können ICCProfile referenziert werden, mit denen sich Farben in andere Farbräume transfor-
Kapitel 4 • SVG – der Standard
87
mieren lassen. Verbunden mit einem Farbmanagement-System, erhalten Grafiken damit auf verschiedenen Ausgabegeräten ein gleiches farbliches Aussehen. Mit zukünftigen Versionen sollen in SVG darüber hinaus auch Farbdefinitionen in CMYK und PANTONE sowie die Definition indizierter Farbtabellen möglich sein.
4.4.7
Animationen Animationen werden in Flash ausschließlich über Frames erzeugt. Wie in einem Kinofilm werden die Grafiken als Einzelbilder festgelegt und danach zeitlich gesteuert abgespielt. SVG kann das auch. Nur gibt es hier zusätzlich die wesentlich elegantere Lösung der Interpolation von Veränderungen. Angegeben werden nur Anfangs- und Endzustand. Was dazwischen passiert, löst die Software. In der Folge haben Sie mit SVG wesentlich kürzeren und besser strukturierten Code. HINWEIS Einen sehr ausführlichen Vergleich zwischen SVG und Flash mit besonderem Augenmerk auf die Bereiche Kartografie und GIS finden Sie unter http://www.carto.net/papers/svg/comparison_flash_svg.html. Darüber
hinaus beschreibt Steve Probets unter http://broadway.cs.nott.ac.uk/projects/SVG/flash2svg/ die wesentlichen Unter-
schiede zwischen Flash- und SVG-Animationen, um beispielsweise auch Programmierern zu helfen, Konvertierungsprogramme für »Flash to SVG« (kurz Flash2SVG) zu entwickeln. Die Online-Variante eines solchen (Beta-)Tools finden Sie unter http://www.ep.cs.nott.ac.uk/~sgp/ swf2svg.html:
Abbildung 4.4:
Convert Flash into SVG (Steve Probets)
Kapitel 5 Der Einstieg in SVG 5.1 5.2 5.3 5.4 5.5 5.6 5.7 5.8 5.9 5.10
Tags Das Tag Eine erste SVG-Grafik Koordinatensystem Maßeinheiten Das benutzerdefinierte Koordinatensystem Gesteuerte Ansichten Strukturelemente Referenzelemente Anzeige von Grafiken und anderen Ressourcen in Abhängigkeit von Programm- und Ressourcenvorgaben ()
90 91 92 93 94 95 95 100 104
106
90
Tags
SVG ist ein Grafikformat. Somit können Sie die Grafiken auf zwei Arten nutzen: •
als eingebundene Datei, in einem übergeordneten Dokument (z.B. einer HTML-Site)
•
als eigenständige Datei, die wie eine HTML-Seite adressiert und verlinkt werden kann
Generell tragen alle SVG-Dateien das Suffix .svg (z.B. beispiel.svg) und für GZIP-komprimierte Dateien .svgz.
5.1
Tags In SVG haben Tags nichts mit Formatierung zu tun! Sie haben hier ausschließlich die Aufgabe, Elemente zu strukturieren bzw. zu beschreiben, um welche Art von Vektoren oder Animationen es sich handelt. Einzige Ausnahme sind Server-Elemente, die zum Auszeichnen grafischer Effekte wie Verläufe, Füllmuster und Filter dienen. Hiermit werden Formatierungen definiert, auf die später die anderen Elemente zugreifen können (daher Server). Alle anderen grafischen oder textlichen Formatierungen werden den Elementen über Attribute sowie CSS-Stylesheets beigefügt. Ebenso attribuiert werden die eigentlichen Formbeschreibungen, die besagen, wie genau letztlich das Rechteck, der Kreis, der Pfad auszusehen hat. Nachfolgende Baumdarstellung zeigt die Struktur eines SVG-Dokuments: svg
Titeltext
offset
height
linearGradient
stop
g
defs
title
stop
color
text
rect
Text
offset
animation
Abbildung 5.1:
width
attributeName
begin
Baumdarstellung einer SVG-Struktur
Die SVG-Spezifikation unterscheidet vor allem fünf Typen von Tags: Grafikelemente (graphics elements) Darunter sind Tags zu verstehen, die »zeichnen«: , , , , , , , , und .
Kapitel 5 • Der Einstieg in SVG
91
Containerelemente (container elements) Darunter sind Tags zu verstehen, die Grafikelemente und auch Containerelemente enthalten: , , , , , , , , und .
Referenzelemente für Grafiken (graphics referencing elements) Darunter sind Tags zu verstehen, die Grafiken oder Bilder referenzieren: und .
Elemente für die Textauszeichnung (text content elements) Darunter sind Tags zu verstehen, die zu rendernde Texte auszeichnen: , , , und .
5.2
Das Tag Das Root-Tag, mit dem jedes SVG-Dokument beginnt, heißt . Es kann darüber hinaus innerhalb des Dokuments verwendet werden, um SVG-Grafiken zu schachteln. (Sie werden später ein Beispiel sehen, in dem Ansichten in verschachtelten SVG-Fragmenten gesteuert werden.) Interessant sind die beiden Attribute width und height. Mit diesen wird ein Rechteck definiert, das ausgehend von der linken oberen Fensterecke den maximal sichtbaren Bereich für das SVG-Dokument beschreibt. Jedes Grafikelement, z.B. ein Rechteck, das größer ist als dieser Bereich oder sich außerhalb dieses Bereichs befindet, wird in der Ansicht wie von einem Bild-Passepartout ausmaskiert. Die Information geht nicht verloren. Beispielsweise können Sie immer noch durch Navigieren mit der Verschiebehand (Panning) im SVG-Viewer den gesamten Inhalt des Dokuments in diesen Sichtbereich schieben. Das Grundgerüst einer SVG-Grafik sieht folgendermaßen aus: Listing 5.1:
