3.5Grundelemente

Nachdem in den letzten Kapiteln das Grundgerüst einer SVG-Datei erstellt wurde, kann dieses nun mit Grafikobjekten gefüllt werden. SVG bietet hierfür beispielsweise folgende primitive Grundformen an:

• <rect> - Rechteck
• <circle> - Kreis
• <ellipse> - Ellipse
• <line> - Linie
• <polyline> / <polygon> - Polylinie / Polygon
• <path> - Pfad

3.5.1Das Rechteck

Ein Rechteck wird in SVG durch folgende Eigenschaften definiert:

• x - horizontale Position der linken oberen Ecke
• y - vertikale Position der linken oberen Ecke
• width - Breite
• height - Höhe
• rx - Abrundung der Ecken in der Horizontalen
• ry - Abrundung der Ecken in der Vertikalen

 Anzeigebeispiel

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <rect x ="10" y ="10" width ="100" height ="50" rx ="15" ry ="15" />
</svg>

3.5.2Der Kreis

Mit diesen Attributen läßt sich in SVG ein Kreis beschreiben:

• cx - horizontale Position des Mittelpunktes
• cy - vertikale Position des Mittelpunktes
• r - Radius

 Anzeigebeispiel

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <circle cx ="40" cy ="40" r ="20" />
</svg>

3.5.3Die Ellipse

Eine Ellipse kann beinahe identisch beschrieben werden wie ein Kreis, nur daß es anstatt eines Radius zwei Werte gibt, welche die Breite und Höhe repräsentieren. Die Attribute einer Ellipse lauten:

• cx - horizontale Position des Mittelpunktes
• cy - vertikale Position des Mittelpunktes
• rx - Breite
• ry - Höhe

 Anzeigebeispiel

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <ellipse cx="50" cy="30" rx="40" ry="20" />
</svg>

3.5.4Die Linie

Eine Linie wird folgendermaßen definiert:

• x1 - horizontaler Startpunkt
• y1 - vertikaler Startpunkt
• x2 - horizontaler Endpunkt
• y2 - vertikaler Endpunkt

 Anzeigebeispiel

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <line x1="5" y1="5" x2="200" y2="100" style="stroke:black;stroke-width:3;" />
</svg>

Das hier zum ersten Mal auftauchende style-Attribut wird später noch etwas genauer erläutert. Hier findet es nur Verwendung, damit sich durch die Angabe einer Linienfarbe und -dicke die Linie besser erkennen läßt.

3.5.5Die Polylinie / Das Polygon

Diese beiden Grafikelemente unterscheiden sich nur minimal voneinander. Beide besitzen eine Punktemenge, die ein Objekt beschreibt. Bei einer Polylinie wird jedoch der Startpunkt nicht mit dem Endpunkt dieser Menge verknüpft, während dies bei einem Polygon der Fall ist. Das einzige Attribut dieser beiden Elemente lautet:

• points - enthält alle Punkte der Polylinie / des Polygons

 Anzeigebeispiel

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <polyline points="10,10 20,40 140,50 55,62 12,70 120,80"
            style="stroke:black;stroke-width:3;fill:none" />
</svg>

 Anzeigebeispiel

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <polygon points="10,10 20,40 140,50 55,62 12,70 120,80"
           style="stroke:black;stroke-width:3;fill:none" />
</svg>

SVG erlaubt mehrere korrekte Schreibweisen für die Angabe der Punktemenge:

• Punkte dürfen aus postiven und negativen Zahlen bestehen.
• Das Trennzeichen einer Dezimalzahl ist grundsätzlich der Punkt.
• Die einzelnen Koordinaten werden durch ein Komma oder ein Whitespace-Zeichen voneinander getrennt.

Zu erwähnen sei noch kurz das Attribut fill-rule, welches Füllmethoden für Polygone oder Polylinien bereitstellt, falls sich einzelne Linien überschneiden. Dabei werden Polylinien so behandelt, als wären der erste und der letzte Punkt der Linie miteinander verbunden. fill-rule kann die Werte evenodd und nonzero annehmen. Die  Abbildung 3-7 aus der SVG-Spezifikation zeigt wie die beiden Modi verschiedene Objekte unterschiedlich darstellen.

3.5.6Der Pfad

Der Pfad (<path>) ist ein sehr mächtiges und gleichzeitig auch ziemlich kompliziertes Element, mit dem sich komplexe Formen, Animationsstrecken oder Maskenregionen erstellen lassen. Analog zu den Polylinien und Polygonen exisitiert beim Pfad ebenso ein Attribut (d), das die Punkte des Pfades beinhaltet. Jedoch werden dabei nicht nur die Punkte angegeben, sondern auch spezielle Befehle, die den Viewer darüber unterrichten wie er die Punkte zu interpretieren hat. So kann es sich bei einem Punkt z.B. um den Beginn oder das Ende einer Kurve oder aber einer Linie handeln. Deshalb muß die Punktemenge nach einer gewissen Regel formatiert werden.  Tabelle 3-2 listet die Kommandos auf, mit deren Hilfe sich solche Formatierungen durchführen lassen.

Übrigens muß hier unbedingt auf Groß- und Kleinschreibung geachtet werden, da Kleinbuchstaben relative Angaben, Großbuchstaben hingegeben absolute Angaben definieren.

 Anzeigebeispiel

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path d="M60 10 L110 80 L10 80 Z" style="stroke:black;stroke-width:3;fill:none;" />
</svg>

SVG erlaubt auch hier verschiedene Schreibweisen für den Inhalt des d-Attributs:

• x- und y-Koordinaten können wie bei Polylinien oder Polygonen angegeben werden (siehe  Die Polylinie / Das Polygon).
• Befehlsketten der Form L0 10 L50 20 L12 34 können in L0 10 50 20 12 34 umgewandelt werden, da der Betrachter den letzten Befehl so lange auf die Punkte anwendet bis er einen neuen erhält.

Zum Abschluß dieses Unterabschnitts soll noch kurz auf Bézier-Kurven eingegangen werden, die sich mit dem CurveTo-Befehl erstellen lassen.  Abbildung 3-9 zeigt eine solche Kurve.

 Anzeigebeispiel

Die etwas dicker gezeichnete Kurve wird durch das <path>-Element aus  Listing 3-10 dargestellt.

<path d="M20 200 C20 150 200 250 200 200" style="fill:none;stroke-width:3;stroke:black;" />

Bei den Punkten P1 und P2 handelt es sich um den Start- und den Endpunkt der Kurve. P1 wird im d-Attribut durch M20 200, P2 durch die letzten beiden Koordinaten 200 200 beschrieben. Durch die hier zusätzlich eingezeichneten Kontroll- oder Ablenkungspunkte C1 und C2 wird die Richtung der Kurve bestimmt. Die Krümmung wird umso stärker, je weiter sich die Ablenkungspunkte von den Ursprungspunkten entfernen und schwächer, wenn sie sich ihnen nähern. Es sei darauf hingewiesen, daß die Kurve niemals durch diese beiden Punkte verlaufen kann.