SVG Tutorial

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="410" height="110" xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>das rect-Element</title>
  <desc>9 (8 sichtbare) Rechtecke</desc>

  <!-- vier Rechtecke in der ersten Zeile -->
  <rect x="10" y="10" width="90" height="40" />
  <!-- das folgende Rechteck wird nicht dargestellt -->
  <rect x="110" y="10" width="90" height="40"
    fill="none" />
  <rect x="210" y="10" width="90" height="40" rx="5" ry="10"
    fill="none" stroke="black" />
  <rect x="310" y="10" width="90" height="40" rx="5"
    fill="none" stroke="black" />

  <!-- die vier Rechtecke in der zweiten Zeile -->
  <rect x="10" y="60" width="90" height="40"
    fill="#ff0000" />
  <rect x="110" y="60" width="90" height="40" ry="5"
    fill="blue" stroke="black" />
  <rect x="210" y="60" width="90" height="40"
    fill="red" stroke="blue" stroke-width="4" />
  <rect x="310" y="60" width="90" height="40"
    style="fill:#33cc33; stroke:rgb(0,0,0);" />

  <!-- das Rechteck, welches die gesamte Grafik umrahmt -->
  <rect x="1" y="1" width="408" height="108"
    fill="none" stroke="blue" />
</svg>
      

Ein Rechteck wird mit dem rect-Element erzeugt. Dieses ist ein Element, das in der Regel ohne ein schließendes </rect>-Tag verwendet werden muß, da es keinen Inhalt besitzt.

Nach den Regeln von XML sind Elemente ohne schließendes Tag nicht zulässig. Die Regeln von XML schreiben für Elemente ohne Inhalt folgende Syntax vor, bei der der Schrägstrich direkt vor der schließenden spitzen Klammer des Tags eingefügt wird:
<rect />

Um ein Rechteck zu definieren, sind mindestens 2 Attribute im rect-Element zu platzieren.
Das Attribut width legt die Breite des Rechtecks fest, das Attribut height die Höhe.
Mit diesen zwei Angaben kann das Rechteck von der Anwendungssoftware (dem SVG Viewer) konstruiert bzw. gezeichnet werden.
Mit den Attributen x und y legen Sie, wie auch im svg-Element, den Koordinatenpunkt für die linke, obere Ecke des Rechtecks fest. Wenn Sie diese Attribute nicht verwenden, wird die Voreinstellung 0 verwendet, d.h. die linke obere Ecke des Rechtecks liegt dann auf dem Koordinatenpunkt (0,0).

Das Attribut fill erwartet eine RGB-Farbangabe oder das Schlüsselwort none, und legt die Füllfarbe für das Element fest.
Voreingestellter Wert für das Attribut fill ist black.
Da standardmäßig keine Rahmenlinie der Form angezeigt wird und dem Attribut fill der Wert none zugewiesen ist wird das zweite Rechteck der obigen Beispielgrafik nicht angezeigt.

RGB-Farbangaben können in SVG entweder durch eine festgelegtes Farbwort (black, white, green, ...), durch eine Raute gefolgt vom Farbwert in hexadezimaler Darstellung (z.B. #ff0000 für rot) oder durch eine dezimale Farbangabe (rgb(255,0,0) ebenfalls für rot) definiert werden.
Eine übersicht aller Farbworte und -werte finden Sie in Stefan Münz's SelfHTML.

Die Rahmenlinie wird durch das Attribut stroke erzeugt, das ebenfalls eine Farbangabe oder das Schlüsselwort none als Wert erwartet.
Voreingestellter Wert ist none.
Beachten Sie: Rahmenlinien eines Elements werden also nur dargestellt, wenn Sie dem Element das Attribut stroke mit einer Farbangabe zuordnen.

Das Attribut stroke-width bietet Ihnen die Möglichkeit, die Stärke der Rahmenlinie zu bestimmen.
Voreingesteller Wert für stroke-width ist 1px.

Die voreingestellte Maßangabe in einem SVG-Dokument ist px (Pixel).
In unserem Beispiel wurde bei der Bestimmung der Rahmenlinienstärke keine Maßangabe angegeben. Die Rahmenlinie des vorletzten Rechtecks in der obigen Beispielgrafik wird also in einer Stärke von 4 Pixeln dargestellt.

Umfassende Informationen zu Füllungen und Rahmenlinien finden Sie im Kapitel Painting.

Rechtecke können mit abgerundeten Ecken dargestellt werden.
Die Radien für die Abrundung, die sich auf die x-Achse (Breitenlinie) und die y-Achse (Höhenlinie) des Rechtecks beziehen, werden durch die Attribute rx und ry festgelegt.
Wenn Sie nur rx oder nur ry verwenden werden beide Achsen um den zugewiesenen Wert abgerundet.

Eine weitere Möglichkeit Angaben zur Darstellung eines Elements festzulegen, ist die Verwendung von CSS (Cascading Stylesheets) einer Sprache zur Definition von Formatvorlagen für Elemente von Auszeichnungssprachen.
Die CSS-Angaben werden dem Attribut style als Wert zugewiesen.
SVG unterstützt die Angaben aus CSS 2 (ebenfalls ein W3C Standard). Außerdem können eine Vielzahl von SVG-Attributen auch als Style-Vorschrift verwendet werden, wie z.B. fill oder stroke.

In den Beispielen dieses Buches werden häufig CSS-Angaben zur Formatierung für Elemente verwendet, da hierdurch die Trennung von Element und Formatierung möglich ist.
Außerdem können CSS-Angaben auch global definiert werden. Siehe Kapitel 4 Styling.

Weitere Informationen zu CSS finden Sie in Stefan Münz's SelfHTML oder bei www.sur.ping.de