SVG Tutorial

In den bisher vorgestellten Beispielen wurden Füll- und Linienfarben der Elemente entweder mit Hilfe von Attributen oder durch die Angabe von CSS-Eigenschaften festgelegt.
In diesem Kapitel werden wir uns nun ausführlicher mit der Formatierung der Elemente durch CSS-Eigenschaften, dem Styling, beschäftigen.

Folgende 4 Gründe sprechen für die Verwendung von Style-Vorschriften (Formatvorschriften, Style-Sheets), anstelle der Verwendung von Attributen, für die Formatierung von Elementen.

1. Durch Style-Vorschriften werden die Anweisungen für die Formatierung eines Elementes klar von den Anweisungen der eigentlichen Darstellung getrennt.
2. Style-Vorschriften bieten mehr Formatierungsmöglichkeiten als Attribute.
3. Style-Vorschriften können global festgelegt werden, d.h. Sie können zum Beispiel dafür sorgen, dass alle Rechtecke immer rot gefüllt dargestellt werden, indem Sie zu Beginn der SVG-Grafik eine Style-Vorschrift definieren.
4. Style-Vorschriften können in eine separaten Datei ausgelagert werden, die dann von mehreren beliebigen SVG-Grafiken verwendet werden kann. Durch eine Anweisung zu Beginn eines SVG-Dokuments kann eine Style-Datei unkompliziert in dieses SVG-Dokument eingebunden werden.

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 style-Attribut</title>
  <desc>Stylevorschriften mit CSS direkt im Element</desc>

  <!-- zwei gleich angemalte Rechtecke -->
  <rect x="50" y="50" width="125" height="100"
    style="fill:yellow; stroke:black; stroke-width:.1cm;" />
  <rect x="225" y="50" width="125" height="100"
    style="fill:yellow; stroke:black; stroke-width:.1cm;" />

  <!-- ein überlappender Kreis mit Transparenz -->
  <circle cx="200" cy="100" r="95"
    style="fill:blue; stroke:black; opacity:.4;" />
</svg>
    

Jedes Element im obigen Beispiel wird mit CSS-Eigenschaften formatiert, die mit Hilfe des Attibuts style direkt für das jeweilige Element festgelegt werden.

Die beiden Rechtecke werden gelb gefüllt und mit einer schwarzen Randlinie der Stärke von 0,1 cm am Bildschirm dargestellt. Sie erhalten also dieselbe Formatierung.
Der Kreis, der die beiden Rechtecke überlappt, erhält eine blaue Füllfarbe und eine schwarze Randline der voreingestellten Stärke (1px).
Außerdem wird für den Kreis mit der Eigenschaft opacity eine Transparenz von 0,4 festgelegt, so dass die überdeckten Teile der beiden Rechtecke durchscheinen.

Die Transparenz oder Durchsichtigkeit eines Elements wird mit dem Attribut oder der Eigenschaft opacity in einer Skala von 0 bis 1 eingestellt, wobei 0 "völlig durchsichtig" und 1 "keine Transparenz" bedeutet. Siehe auch Kapitel Painting.