SVG Tutorial

Das folgende SVG Beispiel bewirkt die gleiche Ausgabe, wie das vorhergegangene, jedoch werden die CSS-Eigenschaften global, zu Beginn der Grafik festgelegt.

Beispiel Quellcode

<?xml version="1.0" encoding="ISO-8859-1" standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>das defs-Element und das style-Element</title>
  <desc>Stylevorschriften mit CSS zu Begin des Dokuments</desc>

  <!-- Bereich für Definitionen: Style-Vorschrifen, Symbole, etc. -->
  <defs>
    <style type="text/css">
    <![CDATA[
      rect {fill:yellow; stroke:black; stroke-width:.1cm;}
      .blauTransparent {fill:blue; stroke:black; opacity:.4;}
    ]]>
    </style>
  </defs>

  <!-- zwei gleich angemalte Rechtecke -->
  <rect x="50" y="50" width="125" height="100" />
  <rect x="225" y="50" width="125" height="100" />

  <!-- ein überlappender Kreis mit Transparenz -->
  <circle cx="200" cy="100" r="95"
    class="blauTransparent" />
</svg>
      

Zuerst muß mit dem defs-Element am Anfang des SVG Dokuments ein Container (Bereich) definiert werden. Innerhalb dieses Bereichs können unter anderem folgende Definitionen vorgenommen werden:

• Scriptanweisungen, siehe Scripting,
• Filter, siehe Filtereffekte,
• Gradienten, siehe Farbverläufe und Muster,
• Symbole, siehe Dokumentstruktur II, und natürlich
• Stylevorschriften.

Weitere Informationen zum Element defs finden Sie im Kapitel Dokumentstruktur II.

Stylevorschriften werden innerhalb des defs-Container mit dem style-Element eingeleitet. Mit dem Attribut type muß der MIME-Typ der verwendeten Stylesprache angegeben werden.
Die in unserm Falle verwendete Stylesprache CSS (Cascading Stylesheets) wird durch den MIME-Type text/css eindeutig identifiziert.

Vor der eigentlichen Notierung der Style-Vorschriften muß allerdings noch ein CDATA-Bereich definiert werden. Laut XML Spezifikation werden Daten innerhalb eines CDATA-Bereichs von der interpretierenden Anwendungssoftware nicht als XML-Code interpretiert, d.h. der SVG-Viewer versucht gar nicht erst, diesen Teil des Quellcodes am Bildschirm darzustellen.

Die erste Style-Vorschrift sorgt dafür, dass alle rect-Elemente innerhalb der Grafik gelb gefüllt und mit einer 4 Pixel breiten, schwarzen Randlinie dargestellt werden.
Die zweite Style-Vorschrift definiert eine sogenannte allgemeine Unterklasse des Namens blauTransparent, mit folgenden Formatvorschriften: blaue Füllfarbe, schwarze Randline, eine Transparenz von 0.4. Mit Hilfe des Attributs class, dem als Wert den Namen der Unterklasse zugeordnet wird, können die Formatierungen dieser Unterklasse einem Element zugeordnet werden.

Der Sprachumfang von Cascading Style Sheets ist nicht Thema dieses Tutorials. Ich verweise auf Informationen zu CSS bei Stefan Münz's SelfHTML, www.sur.ping.de oder natülich beim W3C.