Bildoben  
aptico-Home | AGB-(c) | SVG-Tutorial Inhalt
Schatten

SVG Tutorial

  svg tutorial index  |  Kapitel 3

3.2 Grundgeruest einer SVG-Grafik

Der einzige Inhalt der folgenden Beispielgrafik ist ein Kommentar.
Sie sehen also nichts, d.h. möglicherweise können sie, durch einen schwachen Farbunterschied, den Umriss der Grafik erkennen. Sie sehen also eine leere Grafik.

Wenn Sie mit der rechten Maustaste in diese (oder jede beliebige) SVG Grafik klicken, erscheint bei Verwendung des Adobe SVG Viewers ein spezielles SVG Kontextmenü, das folgende Möglichkeiten bietet.

  • Einzoomen - Grafik vergrößert darstellen
  • Auszoomen - Grafik verkleinert darstellen
  • Orginalansicht - Grafik in Orginalansicht darstellen
  • Bessere Qualität - Einstellung des User Agents bezüglich der Darstellung der Grafik
  • Unterbrechen - für Animationsabläufe
  • Ton aus - für Grafiken mit integriertem Sound
  • Suchen - Text innerhalb der Grafik suchen
  • Weitersuchen - Text innerhalb der Grafik weitersuchen
  • SVG kopieren - Quellcode der SVG Grafik in die Zwischenablage kopieren
  • SVG anzeigen - SVG Grafik in einem neuen Fenster anzeigen
  • Quelle anzeigen - Quellcode der SVG Grafik in einem neuen Fenster anzeigen
  • SVG speichern unter - Quellcode der SVG Grafik auf einem Datenträger speichern
  • Hilfe - Eine weitergehende Hilfe zum Kontextmenü
  • Über Adobe SVG Viewer - Versionsnummer und mehr

Beispiel Quellcode


   Grafische Darstellung:   SVG-Darstellung (nur SVG-fähige Browser!)    Screenshot JPG-Grafik
<?xml version="1.0" standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">

  <!-- .. ich bin ein Kommentar in einer leeren Grafik ... -->

</svg>
      

SVG Grafiken werden immer mit der XML-Deklaration eingeleitet, die das Dokument als XML-Dokument ausweist.

Die folgende Zeile des SVG-Grundgerüstes ist die Dokument-Typ-Deklaration.
Eine Dokument-Typ-Definition (DTD) wird von den Erstellern einer auf XML basierenden Auszeichnungssprache als normatives Text-Dokument für diese Sprache festgelegt.
In dieser DTD sind sowohl jedes Element und jedes Attribut , wie auch Verschachtelungsregeln der Elemente und weitere Eigenheiten der Auszeichnungssprache festgelegt.

Damit ein Anwendungsprogramm weiß, welche Regeln für ein bestimmtes XML-Dokument (in unserem Falle einem SVG-Dokument) gelten, muß angegeben werden, auf welche DTD es sich bezieht.

In der Dokument-Typ-Deklaration eines SVG-Dokuments wird zuerst der allgemeine Name, der Public Identifier:"-//W3C//DTD SVG 20010904//EN", und zusätzlich noch der reale Speicherort, der Document Identifier: "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" der Document Type Definition (DTD) angegeben.

Das anschließende svg-Element ist das eigentliche Wurzelelement einer SVG-Grafik bzw. eines SVG-Dokuments. Das Wurzelelement ist das Element, das in einer auf XML basierenden Sprache alle anderen Element einschließt.

Das Attribut xmlns mit dem Wert "http://www.w3.org/2000/svg" legt einen eindeutigen Namensraum (name space) für die Elemente der Auszeichnungssprache SVG fest, und muß immer in dieser Form notiert werden.
Da es jeder Person möglich ist, mit Hilfe von XML Auszeichnungssprachen zu erstellen, könnte es möglich sein, dass Element- oder Attributnamen von SVG auch in anderen, auf XML basierenden Auszeichnungssprachen vorkommen.
Die Angabe eines eindeutigen Namensraums, in Form einer URL besagt, dass alle verwendeten Elemente eindeutig zur Auszeichnungssprache SVG gehören.

Durch das Attribut xmlns:xlink mit dem Wert "http://www.w3.org/1999/xlink" wird der Namensraum für xlink angegeben. Im Namensraum von xlink sind die SVG Elemente zur Referenzierung von Objekten definiert, wie z.B. Hyperlinks.
Der Firefox Browser von Mozilla (Version >= 1.5Beta) benötigt diese Angabe um SVG Grafiken, die xlink-Element enthalten, korrekt darstellen zu können.
Um Fehler zu vermeiden, ist es grundsätzlich eine gute Idee, den xlink Namensraums immer im svg-Element anzugeben.

Mit den Attributen width und height wird die Breite und Höhe der gesamten Grafik festgelegt.
Als Werte sind Zahlen mit optionaler Maßangabe möglich. Wird keine Maßangabe angegeben, wird Pixel verwendet.

Mögliche Maßangaben in SVG sind:

  • em - relative Maßangabe, bezieht sich auf die verwendete Schriftgröße
  • ex - relative Maßangabe, bezieht sich auf die Größe des großen X der verwendeten Schrft
  • px - Pixel, default-Einheit
  • pt - Punkt
  • pc - Pica
  • cm - Centimeter
  • mm - Millimeter
  • in - Inch
  • % - Prozentangabe

Kommentare werden, wie in HTML bzw. XML, mit der Zeichenfolge <!-- eingeleitet und enden mit der Zeichenfolge -->. Kommentare werden nicht am Bildschirm dargestellt.

Verwenden sie Kommentare großzügig, um den Quellcode Ihrer SVG-Grafik mit erläuterndern Anmerkungen zu versehen. Wenn Sie sich selbst erstellte, unkommentierte Quelltexte einige Zeit nach ihrer Erstellung wieder anschauen, werden Sie feststellen wie nützlich Kommentierungen gewesen wären ... ;-).
Daher empfehle ich den ausgiebigen Gebrauch von Kommentaren in SVG-Quellcodes.




index  |  Kapitel 3  |  3.1  <<  | 3.2 |  >>  3.3   Verschachtelung von SVG-Elementen