Inhaltsverzeichnis

1.1 SVG 1
1.2 Verwendung des Buches und der Beispiele 3
1.3 Arbeiten mit den Beispieldateien im Texteditor 4

2.1 Die XML-Deklaration 7
2.2 "Wohl geformte" und "gültige" XML-Dokumente 9
2.2.1 Elemente 9
2.2.2 Attribute 10
2.3 Die Wurzel, das Element <svg> 12
2.4 Graphiken referenzieren mit dem <image>-Element 13
2.5 Pfade mit dem <path>-Element 14
2.6 Painter's Model und Aufbau der Graphik 16
2.7 Kommentare 16

4.1 Bildschirmdarstellung vs. Papierkartendruck 33
4.1.1 Mehr Farben 33
4.1.2 Probleme beim Einsatz von Mustern und Schraffuren 34
4.1.3 Interaktivität 35
4.2 Maße und Basiskoordinatensystem in SVG 35
4.2.1 Einheiten 35
4.2.2 Ursprüngliches Koordinatensystem, Viewport und viewBox 37
4.2.3 Sichtbarer Bereich: das Attribut viewBox 39
4.2.4 Flächen eingrenzen: die Attribute width und height 40
4.2.5 Einpassen der Graphik: das Attribut preserveAspectRatio 43
4.3 Vordefinierte Grundformen 45
4.3.1 Rechtecke mit <rect> 45
4.3.2 Kreise mit <circle> 46
4.3.3 Ellipsen mit <ellipse> 47
4.3.4 Segmente mit <line> 47
4.3.5 Linienzüge mit <polyline> 47
4.3.6 Polygone mit <polygon> 48
4.3.7 Texte mit <text> 48
4.4 Grundlegende Eigenschaften von Elementen 48
4.5 Objekttransformationen 49
4.5.1 Verschieben von Objekten mit translate 49
4.5.2 Spiegeln und Skalieren mit scale 49
4.5.3 Rotieren von Objekten mit rotate 52
4.5.4 Scherung mit skewX oder skewY 53
4.5.5 Es geht auch komplizierter: die Matrixtransformation 54
4.6 Ein erstes Diagramm 55
4.7 Möglichkeiten, Styles zu definieren 56
4.7.1 Cascading Stylesheets (CSS) 57
4.7.2 Formate definieren in CSS 57
4.7.3 Internes Stylesheet 59
4.7.4 Externes Stylesheet 59
4.7.5 Styling mit dem <!ENTITY>-Element 62
4.8 Besondere Eigenschaften für linienhafte Elemente 64
4.8.1 Abgerundete Ecken für Flüsse und Straßen 64
4.8.2 Gestrichelte Linien 65
4.8.3 Deckkraft ändern mit stroke-opacity 66
4.9 Wiederverwenden mit ENTITY 66
4.10 Verringern der Dateigröße durch Komprimierung 68
4.11 Dateigrößenoptimierung 68

5.1 Anzeigeoptionen für Text 71
5.2 Codiert und doch lesbar: Unicode 71
5.3 Schriftarten nach Belieben 73
5.4 Einbetten und Definieren von Schriften und Zeichen 73
5.5 Fette und "dekorierte" Schrift 77
5.6 Formatierung einzelner Buchstaben oder Wörter 77
5.7 Gesperrter Text 78
5.8 Textrichtung 79
5.9 Wiederverwenden von Text 80
5.10 SVG ist mehrsprachig 81
5.11 Text an Pfaden 82

6.1 Kurven, Inseln und Exklaven 85
6.1.1 Gerade Linien und ausgeschnittene Flächen 85
6.1.2 Kurven mit dem <path>-Element 88
6.1.3 Kreissektorendiagramme mit Bogenkurven 90
6.2 Zusammenfassung der Pfadkommandos 93
6.3 Komplexe Liniensignaturen 93
6.4 Marker für Koordinatenachsen 98
6.4.1 Pfeile am Koordinatensystem 98
6.4.2 Stützpunkte in Liniendiagrammen 100

7.1 Thematische Flächensignaturen 101
7.2 Farbverläufe 103
7.3 Clipping und Masking 106

8.1 SMIL vs. Scripting und Flash 109
8.2 Animationstypen 110
8.2.1 Animation von interpolierbaren Werten mit 110
8.2.2 Werte setzen mit 114
8.2.3 Farben animieren mit 115
8.2.4 Animierte affine Transformationen mit 115
8.2.5 Animationen entlang von Pfaden: , 117
8.2.6 Animation von Filtereffekten 119
8.3 Gemeinsame Attribute für Animationen 121
8.3.1 Zu animierendes Attribut bestimmen mit attributeName 121
8.3.2 Ausgangs- und Zielzustände mit from, to, values und by 121
8.3.3 Ende der Animationen mit fill 122
8.3.4 Mehrere Animationen an einem Element steuern mit additive 122
8.3.5 Animationen wiederholen mit repeatCount 123
8.3.6 Attributart mit attributeType 123
8.4 Zeit und Events 123
8.4.1 Zeit bei Animationen 123
8.4.2 Mehrere Zeitpunkte für Übergänge mit keyTimes und calcMode 124
8.4.3 Geschwindigkeitsveränderungen beeinflussen mit keySplines 126
8.4.4 Event-bezogene Animationen 128
8.4.5 Verkettung von Animationen 130
8.5 Einschränkungen von Animationen 131
8.5.1 Viewer und Rechenleistung 131
8.5.2 Einsatz von Animationen bei Karten und Diagrammen 131

9.1 Script-Sprachen und SVG 134
9.1.1 Script-Blöcke 135
9.1.2 Externe Script-Dateien und Encoding 136
9.1.3 Script und Script-Aufrufe in Event-Attributen 138
9.2 Kartengenerierung mit Originaldaten 139
9.2.1 Basisbeispiel: Text und Rechtecke 139
9.2.2 Attributwerte neu setzen: Farben ändern 141
9.2.3 Weitere DOM-Methoden: Text ändern 142
9.2.4 Neue Objekte hinzufügen: .createElementNS() und .appendChild() 144
9.2.5 Grundkarte 145
9.2.6 Grunddaten 146
9.2.7 Daten bearbeiten 150
9.2.8 Script-Logik greift auf die Graphik zu 151
9.2.9 Objekte über das DOM ermitteln 153
9.2.10 Legenden bei interaktiven Karten 155
9.2.11 Eine Funktion - mehrere Karten 163
9.3 Syntaxfehler und deren Behandlung 166
9.3.1 Adobe SVG Viewer 3.x (ASV) im Mircrosoft Internet Explorer 6.x 167
9.3.2 Mozilla Firefox 1.5 (FF) 168
9.3.3 Batik Squiggle 169
9.3.4 Opera 170
9.3.5 Safari (Apple) 171
9.3.6 Entwicklungsumgebungen für Scripting 171
9.4 Scripting zusammengefasst 171

10.1 Existierende Elemente nutzen 175
10.1.1 Flächenskalierung und n-te Wurzel bei Kreissymbolen 175
10.1.2 Manipulationen mit .setAttributeNS() 176
10.2 Existierende Elemente umordnen 178
10.2.1 Versetzen mit .removeChild() und .appendChild() 179
10.2.2 Austauschen mit .replaceChild() 180
10.2.3 .nextSibling, .previousSibling und .nodeType 180
10.3 Neue Signaturen schaffen 182
10.3.1 Listenwerte sortieren, um Symbole nach Größe zu ordnen 182
10.3.2 Neue Elemente gezielt einbinden mit .insertBefore() 183
10.4 Symbole mit <use> und Filtern 186
10.5 Komplexe Symbol- und Diagrammgenerierung 187
10.5.1 Datenaufbereitung und mathematische Summenprobleme 188
10.5.2 Vorlage statisches Tortendiagramm 189
10.5.3 Fahrplan zum Bauen ganzer Tortendiagramme 190
10.6 Zwischenbilanz DOM-Methoden 194

12.1 Probleme mit dem Zoom und Pan 205
12.1.1 SVG-spezifische, kartographisch-logische Prämissen 205
12.1.2 Technische Hürden bei Zoom und Pan 206
12.2 Methoden für Zoom und Pan in SVG 209
12.2.1 Zoom und Pan mit Viewerfunktionen 209
12.2.2 Pan über Windrose 210
12.2.3 Übersichtskarten mit Ausschnittsdarstellung 211
12.2.4 Pan mittels sensitiver Bereiche in der Hauptkarte 212
12.2.5 Zoomstufe mittels Schieber 212
12.2.6 Zoom-In- und Zoom-Out-Buttons 213
12.3 Zur Umsetzung von Zoom und Pan 213
12.4 Steuerung über die viewBox eines verschachtelten
12.4.1 Pan 214
12.4.2 Zoom 215
12.4.3 Eine Übersichtskarte 217
12.4.4 Kartenkoordinaten und Bildschirmkoordinaten anzeigen 220
12.4.5 Ersatz für .getScreenCTM() für den Adobe SVG Viewer 3.x 223
12.4.6 Drag'n'Drop mit dem Rechteck der Übersichtskarte 225
12.4.7 Den Kartenausschnitt im Rahmen behalten 229
12.4.8 Mögliche Ergänzungen und Hinweise 231
12.5 Karte bildet das Hauptkoordinatensystem 232
12.5.1 Zoom und Pan beeinflussen 233
12.5.2 Fixierung der Interfaceelemente als 237
12.5.3 Fixierung der Interfaceelemente als
12.5.4 Kartenkoordinaten und Bildschirmkoordinaten anzeigen 238
12.5.5 Interfaceelemente anordnen 240
12.5.6 Interaktive Übersichtskarte 243
12.5.7 Den Kartenausschnitt im Rahmen behalten 244
12.5.8 Dynamischer graphischer Maßstab 248
12.5.9 Schieberegler für Zoom 248
12.6 Level of Detail (LOD) und Daten nachladen 251
12.6.1 getURL() und parseXML() 253
12.6.2 XMLHttpRequest() 254
12.6.3 Gemeinsamkeiten beim Nachladen 255

13.1 document 261
13.2 Knoten 263
13.2.1 Allgemeine Methoden für Knoten 264
13.2.2 Container-Knoten 267
13.2.3 Textknoten 267
13.2.4 Path-Knoten 268
13.2.5 Animationsknoten 269
13.3 Events, das Objekt evt 269

14.1 Daten in fremden Namensräumen 271
14.2 Datenstrukturierung im Script-Bereich 271
14.2.1 Durchnummerierte Listen: Arrays 272
14.2.2 Assoziative Listen 273
14.2.3 Zusatzangaben bei Listen 275