Das Buch zur Seite

Titel: Einsteigerseminar SVG - Webgrafiken mit XML

Autorin: Helma Spona
ISBN: 3-8266-7181-3
Seiten: ca. 400
Preis: € 9,95
Status: verfügbar

Bestellen bei Amazon

Vorwort

Das vorliegende Buch, widmet sich dem Thema SVG, dem neuen Vektorgrafikformat für das Internet. Allerdings geht es nicht darum, wie Sie Grafikprogramme bedienen, die solche Grafiken erstellen, sondern vielmehr geht es darum, Ihnen die Syntax und die Fähigkeiten des SVG-Grafikformats näher zu bringen.
Damit sind Sie dann in der Lage

  • eigene SVG-Grafiken auch mit einem Texteditor zu erstellen
  • per Skriptcode SVG-Grafiken zu manipulieren und darauf zuzugreifen
  • eigene Software zu entwickeln, die SVG-Dateien erstellen oder manipulieren kann.

Ziel ist es, das SVG-Format aus Sicht des Softwareentwicklers zu erläutern. Der Schwerpunkt liegt somit auf den Elementen von SVG, die interessant für Software- und Internet-Entwickler sind. Dies soll jedoch an praktischen und nützlichen Beispielen erfolgen und nicht so sehr in trockene Theorie ausarten.

Für den Fall, dass Sie noch nicht vom Erfolg von SVG überzeugt sind, sollten Sie sich einmal auf den Webseiten des W3C und von Adobe (http://www.adobe.com/svg) umsehen. Sie finden dort zahlreiche Beispiele, was sich mit SVG so alles machen lässt. Das reicht von technischen Dokumentationen und Teilekatalogen mit XML und SVG bis hin zu kompletten topografischen Karten von Großstädten wie Wien. Auch die E-Mail-Gruppe svg-developers auf http://groups.yahoo.com bekommt täglich Zulauf. SVG wird das Internet revolutionieren. Und dieses Buch wird hoffentlich dazu beitragen.

Um nicht bei Null anfangen zu müssen, sondern direkt auf die interessanten Fähigkeiten von SVG eingehen zu können, sind allerdings ein paar Voraussetzungen notwendig. Sie sollten wissen,

  • was HTML ist und wie das Internet bzw. Intranet grundsätzlich funktioniert,
  • wie Sie Ihren Editor bedienen
  • und eine grobe Vorstellung davon haben, was XML ist.

Für die Kapitel über dynamische SVG-Grafiken und Skripting sind außerdem grundlegende JavaScript-Kenntnisse erforderlich. Im letzten Kapitel geht es um die Zusammenarbeit zwischen SVG und XML. Die notwendigen Grundlagen werden hier zwar erklärt, XML- und XSL-Kenntnisse sind aber natürlich von Vorteil, da es hier nicht vornehmlich um XML gehen kann.

Die Beispiele zu diesem Buch finden Sie zum Download auf meiner Webseite: http://www.helma-spona.de. Zudem werde ich eine SVG-Seite einrichten, die SVG-Grafiken in Aktion zeigt. Die Adresse lautet: http://www.s-v-g.net. Aufgrund der Tatsache, dass mir nur ca. 400 Seiten für das Buch zur Verfügung stehen, habe ich eine Auswahl der Inhalte getroffen. Damit sollten Sie zwar einerseits in der Lage sein auch komplexe SVG-Grafiken zu erstellen, andererseits mussten jedoch seltener gebrauchte Elemente entfallen. Daher erhebt dieses Buch keinen Anspruch auf Vollständigkeit und ist nicht als Referenz zu betrachten. Wenn Sie also die SVG-Dokumentation des W3C verwenden, werden Ihnen einige Elemente begegnen, die nicht erläutert werden. Meistens erschließen sie sich jedoch von selbst, wenn Sie die hier geschilderten SVG-Grundlagen und Techniken beherrschen.

Sollten Anregungen oder Fragen zu diesem Buch haben, die nicht auf den oben genannten Webseiten beantwortet werden, können Sie sich gerne an mich wenden. Zu diesem Zweck finden Sie auf meiner Webseite http://www.helma-spona.de ein Kontaktformular.

Und nun viel Spaß beim Programmieren und Testen.

Helma Spona, Kerken

Ergänzungen und Berichtigungen

13.11.2001

 

Seite: 301

Im Listing auf dieser Seite muss die Zeile 5 lauten: <use x="0" y="0" xlink:href="#smKastenHor".
Die Beispieldateien zum Download sind bereits korrigiert. Die Korrektur im Buch erfolgt mit dem nächsten Nachdruck.

13.11.2001

 

Seite: 295

Im Listing auf dieser Seite muss die Zeile 10 lauten: <g id="tooltipp" transform="translate.
Die Beispieldateien zum Download sind bereits korrigiert. Die Korrektur im Buch erfolgt mit dem nächsten Nachdruck.

15.10.2001

 

Seite: 130/131

Auf Seite 130/131 hat sich leider ein falsches Bild eingeschlichen. Die Abbildung 5.15 ist nicht korrekt. Die beiden Seiten mit den richtigen Bildern können Sie als -> PDF-Datei downloaden (ca. 500 KB). Der Fehler wird beim nächsten Nachdruck automatisch korrigiert.

Beispiele zum Buch

Die Beispiele zum Buch können Sie hier downloaden. Damit Sie später keine Probleme beim Testen haben, sollten Sie die ZIP-Datei in ein Verzeichnis Ihrer Wahl entpacken, aber dabei die gespeicherten Unterverzeichnisse beibehalten. Da in den einzelnen Unterverzeichnissen Dateien mit gleichen Namen gespeichert sind, führt das entpacken in ein einzelnes Verzeichnis dazu, dass Dateien überschrieben werden.

Zum Entpacken benötigen Sie ein ZIP-Programm. Wenn Sie über keines verfügen (Windows Me und Linux bringen eines mit) können Sie eine 30-Tage-Testversion von Winzip herunterladen.

Sollten Sie eine Frage zum Buch oder ein Problem mit einem Beispiel haben, können Sie sich gerne an mich wenden.  Bitte schicken Sie mir dann eine Nachricht über das Kontaktformular meiner Webseite. Dort finden Sie auch ein Gästebuch, falls Sie sich dort eintragen möchten.

Download

Inhaltverzeichnis

1 SVG-Grundlagen und Anwendungsmöglichkeiten

1.1 Was ist SVG?

  • XML versus SVG
  • Für die Darstellung sorgt ein Plug-In oder der Browser
  • Animationen sorgen für Bewegung in der Grafik
  • Das DOM ermöglicht den Skriptzugriff
  • Schatten, Farbverläufe und Lichteffekte sind nicht mehr nur Rastergrafiken vorbehalten
  • Hyperlinks in SVG-Grafiken sind ebenfalls möglich
  • Zoomen ohne Qualitätsverlust

1.2 Systemvoraussetzungen zum Erstellen von SVG-Grafiken

1.3 Einsatzmöglichkeiten und Anwendungsbereiche

  • Einsatzmöglichkeiten für SVG-Grafiken
  • Zukünftige Entwicklung von SVG im Web

1.4 Zusammenfassung, Fragen und Übungen

2 Einfache SVG-Grafiken erstellen

2.1 Eine Vorlage für SVG-Dateien erstellen

2.2 Der Aufbau von SVG-Grafiken

  • Die <DOCTYPE>-Angabe im Detail
  • Der übergeordnete XML-Tag
  • Der Inhalt des <svg>-Tags
  • SVG-Grafiken in HTML-Seiten einfügen

2.3 Die Syntax von SVG-Tags

  • Syntaxunterschiede gegenüber HTML
  • SVG unterstützt verschiedene Arten von Tags
  • Erläuterungen zu wichtigen Attributen
  • Der <rect>-Tag
  • Der <circle>-Tag
  • Der <ellipse>-Tag
  • Der <line>-Tag
  • Der <text>-Tag

2.4 Rechtecke und Kreise einfügen und formatieren

  • Ein Rechteck mit abgerundeten Ecken als Seitenbanner erstellen
  • Die vertikale Navigationsleiste hinzufügen
  • Einen Kreis im Nullpunkt über die beiden Rechtecke legen
  • Elemente formatieren
  • Eine horizontale Navigationsleiste hinzufügen

2.5 Einfache Texte erstellen und formatieren

  • Text für das Seitenbanner einfügen
  • Text für die Navigationsleisten einfügen
  • Texte gruppieren und formatieren

2.6 Zusammenfassung, Fragen und Übungen

3 Das Koordinatensystem von SVG-Grafiken

3.1 Was ist das Koordinatensystem?
  • SVG bietet mehr als nur ein Koordinatensystem
  • Maßeinheiten im Koordinatensystem
  • Neue Koordinatensysteme erzeugen
  • Grafikelemente gruppieren und positionieren
  • Elemente gruppieren
  • Gruppen positionieren
  • Gruppenelemente relativ ausrichten
  • Aufbau von Gruppen - der <g>-Tag
  • Vor- und Nachteile von Gruppen

3.1 Zusammenfassung, Fragen und Übungen

4 Komplexe Grafikelemente und Formatierungen einsetzen

4.1 Linien, Dreiecke und "Freihand"-Objekte erstellen

  • Komplexe Formen mit Pfaden definieren
  • Eine einfache Linie als Pfad erstellen
  • Ein Dreieck zeichnen
  • Kurven und Kreise erstellen
  • Komplexere Objekte zeichnen
  • Pfade formatieren

4.2 Pfade richtig einsetzen

  • Die Syntax von Pfadangaben
  • Absolute und relative Koordinaten
  • Pfade automatisch schließen lassen
  • Die Pfad-Befehle im Überblick
  • Der Moveto-Befehl
  • Der ClosePath-Befehl
  • Befehle zum Erzeugen von Linien
  • Kurven mit dem A-Befehl erstellen
  • Bézierkurven erstellen

4.3 Komplexe Elemente aus Bézierkurven erstellen

  • Ein Muster erzeugen
  • Das Muster optimieren
  • Buchstaben zeichnen
  • Zeichen korrekt planen
  • Der Buchstabe "V"
  • Das "S" definieren
  • Am kompliziertesten ist das "G"
  • Die Buchstaben zusammenfügen und formatieren

4.4 Zusammenfassung, Fragen und Übungen

5 Textelemente einsetzen

5.1 Ein textbasiertes Logo erstellen

  • Einfügen des mittleren Textes
  • Erstellen des Pfades
  • Den zweiten Text um die Sichel fließen lassen
  • Text am Pfad ausrichten

5.2 Verfügbare SVG-Tags für Textelemente

  • Allgemeine Informationen zu den Tags <textPath>, <tspan> und <tref>.
  • Den <textPath>-Tag richtig einsetzen
  • Einzelne Zeichen in einem Text formatieren
  • Die Attribute des <text>-Tags
  • Textbausteine speichern und verwenden

5.3 Texte sperren und dehnen

  • Gedehnte Texte erstellen
  •  
  • Texte sperren

5.4 Spezielle Formatierungen für Texte

  • Einfache Formatierungen von Schriften
  • Die Bedeutung des Wertes inherit
  • Texte mit Textanker ausrichten
  • Sonderzeichen und Umlaute verwenden

5.5 Zusammenfassung, Fragen und Übungen

6 Filter, Transformationen und Farbverläufe

6.1 Farbverläufe definieren und zuweisen

  • Einen runden Farbverlauf definieren
  • Den Farbverlauf einem Element zuweisen
  • Einen linearen Farbverlauf definieren und zuweisen
  • Den Button fertig stellen

6.2 Mögliche Einstellungen für Farbverläufe und Muster

  • Farben in SVG-Grafiken verwenden
  • Typen von Farbverläufen
  • Allgemeine Informationen zu Verläufen
  • Farbverläufe anwenden und einsetzen

6.3 Füllmuster definieren und verwenden

  • Was sind Füllmuster?
  • Füllmuster definieren und verwenden
  • Rastergrafiken als Füllmuster nutzen

6.4 Elemente drehen und kippen

  • Texte drehen
  • Grafische Elemente drehen
  • Elemente kippen

6.5 Mit Filtern Schatten und Lichteffekte definieren

  • Was sind Filter?
  • Der <defs>-Tag der SVG-Datei
  • Schatten erstellen
  • Lichteffekte nutzen

6.6 Filter und Lichteffekte effektiv einsetzen und kombinieren

  • Der <filter>-Tag
  • Universalattribute für Filter-Elemente
  • Filter und Masken
  • Lichteffekte

6.7 Zusammenfassung, Fragen und Übungen

7 Animationen verwenden

7.1 Die SVG-Tags für Animationen

  • Welche Tags definieren Animationen?
  • Einem SVG-Element eine Animation zuweisen

7.2 Elemente an Pfaden entlang bewegen

  • Das zu bewegende Element erstellen
  • Die Animation hinzufügen
  • Die Geschwindigkeit festlegen

7.3 Farben ändern

7.4 Objekt-Attribute ändern

7.5 Möglichkeiten zur Realisation von Animationen

  • Die Universalattribute für Animationen
  • Universalattribute für den zeitlichen Ablauf
  • Attribute für <animate>, <animateMotion>, <animateColor> und <animateTransform>
  • Zeitwerte angeben
  • <animateMotion> ermöglicht es, ein Element an einem Pfad entlang zu bewegen
  • Mit <animateColor> Farben anpassen
  • Drehen, kippen und skalieren mit <animateTransform>
  • <animate> bietet sehr flexible Möglichkeiten

7.6 Zusammenfassung, Fragen und Übungen

8 Hyperlinks und externe Dateien einbinden

8.1 Externe Dateien einbinden

  • Komplette externe Grafiken verwenden
  •  
  • Externe Grafiken mit SVG-Elementen kombinieren
  •  
  • Teile einer externen SVG-Grafik nutzen

8.2 Externe Dateien richtig einsetzen

  • Unterstützte Grafikformate
  • Der <switch>-Tag
  • Festlegen ob externe Dateien notwendig sind

8.3 Hyperlinks definieren

8.4 Der <a>-Tag im Detail

8.5 Zusammenfassung, Fragen und Übungen

9 Grafik-Elemente aus Schablonen erzeugen

9.1 Schablonen für Elemente definieren

9.2 Schablonen verwenden

9.3 Schablonen effizient einsetzen

  • Symbolinstanzen formatieren
  • Texte als Symbole definieren

9.4 Zusammenfassung, Fragen und Übungen

10 Interaktive Grafiken

10.1 Skripting-Grundlagen

  • Was ist das DOM?
  • Skripte einfügen

10.2 Manipulieren von Grafikelementen

  • Die visible-Eigenschaft manipulieren
  • Formatierungen verändern
  • Animationen per Skript starten

10.3 Das Event- und Objektmodell im Detail

  • Das SVG-Event-Modell
  • Das Document Object Model, DOM

10.4 Elemente dynamisch erzeugen

10.5 Zusammenfassung, Fragen und Übungen

11 Grafiken mit externen Skripten manipulieren

11.1 Externe Skripte zur Manipulation einsetzen

  • Aufbau des Beispiels
  • Einfügen des Skriptes in die HTML-Seite
  • Zugreifen auf die Grafik per JavaScript
  • Einlesen der XML-Dateien per Skript

11.2 Interaktion zwischen SVG und der HTML-Seite

  • Aufbau der Uhr
  • Realisieren der Zeigerbewegung mit Hilfe des Timers

11.3 Zusammenfassung, Fragen und Übungen

12 SVG und XML

12.1 SVG-Grafiken in XML-Dateien integrieren

  • SVG-Dateien mit Croczilla ausführen
  • Fremde Namensräume und Objekte in SVG-Dateien verwenden
  • Den XHTML-Namensraum angeben
  • Ein Objekt eines fremden Namensraums einfügen
  • Fremde Objekte formatieren

12.2 Ausblick

12.3 Zusammenfassung, Fragen und Übungen

Lösungen

Glossar

(c) 2003, Helma Spona, Dorfstr. 120c. 47647 Kerken-Stenden