Formen

In SVG stehen uns einige Grundformen zur Verfügung, welche direkt als einteilige Elemente notiert werden können.

Linie

Die einfachste Form ist eine Linie. Eine Linie (Element line) besteht aus zwei Koordinatenpunkten. Der erste Punkt wird über die Attribute x1 und y1 festgelegt. Der zweite Positionierungspunkt wird mit den Attributen x2 und y2 spezifiziert. Die Linienfarbe und -breite kann über die Attribute stroke und stroke-width festgelegt werden. Der Stil der Linienenden kann über das Attribut stroke-linecap festgelegt werden. Als Werte stehen round (Enden haben eine abgerundete Kappe), square (Enden haben eine eckige Kappe) und butt (Enden sind flach, Standardwert) zur Verfügung.

<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>

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

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 600 400">
    <line x1="50" y1="50" x2="400" y2="300" stroke="red" />
    <line x1="0" y1="200" x2="600" y2="200" stroke="lime" stroke-width="3" />
    <line x1="300" y1="0" x2="300" y2="400" stroke="lime" stroke-width="3" />
    <line x1="100" y1="350" x2="250" y2="100" stroke="blue" stroke-width="10" stroke-linecap="round" />
</svg>

Rechteck

Eine weitere primäre Form ist das Rechteck. Das Rechteck, welches durch das rect-Element angegeben wird, wird an Hand der linken oberen Ecke über die Attribute x und y platziert. Die Größenangabe erfolgt über die Attribute width und height. Möchten Sie ein Quadrat zeichnen, so verwenden Sie ebenfalls das rect-Element. Als Werte für die Attribute width und height müssen Sie dann einfach den gleichen Wert angeben. Um das Rechteck zu stylen, stehen Ihnen natürlich wieder einige Präsentationsattribute zur Verfügung (z. B. fill, stroke und stroke-width).

<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>

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

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 600 400">
    <rect x="50" y="50" width="200" height="100" fill="lime" />
    <rect x="300" y="100" width="250" height="250" fill="red" stroke="blue" stroke-width="10" />
</svg>

Übrigens: Möchten Sie die Ecken eines Rechtecks abrunden, so können Sie die Attribute rx und ry verwenden. Für eine „gleichmäßige“ Abrundung muss der Wert des rx-Attributs mit dem Wert des ry-Attributs übereinstimmen.

Kreis

Der Kreis ist eine weitere Grundform von SVG und wird über das Element circle angegeben. Die Platzierung eines Kreises erfolgt durch die Attribute cx und cy. Die Werte geben dabei die Position der Kreismitte an. Der Radius eines Kreises wird über das Attribut r festgelegt.

<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>

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

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 600 400">
    <circle cx="100" cy="100" r="50" fill="red" />
    <circle cx="300" cy="200" r="100" fill="blue" />
</svg>

Ellipse

Die Ellipse ist ebenfalls eine Grundform, hat jedoch im Gegensatz zu einem Kreis einen separaten Radius für die X- und Y-Achse. Um eine Ellipse zu notieren, benötigen Sie das Element ellipse. Die Positionierung erfolgt durch die Attribute cx und cy (Ellipsenmitte). Der Radius wird über die Attribute rx und ry festgelegt. Haben die Attribute rx und ry den gleichen Wert, so handelt es sich bei der Ellipse um einen Kreis und Sie könnten dann auch einfach das circle-Element verwenden.

<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>

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

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 600 400">
    <ellipse cx="100" cy="100" rx="50" ry="75" fill="red" />
    <ellipse cx="350" cy="200" rx="150" ry="100" fill="blue" />
</svg>

Polylinie

Die Polylinie (auch Polygonzug genannt, Element polyline) zählt auch zu den SVG-Grundformen und besteht eigentlich nur aus mehreren Punkten, welche über eine Linie verbunden werden. Um die Punkte festzulegen, wird das Attribut points verwendet. Im points-Attribut geben Sie nun mehrere Koordinatenpunkte (in der Form x,y) getrennt durch ein Leerzeichen an. Besteht Ihre Polylinie also z. B. aus 3 Punkten, so lautet die Angabe x1,y1 x2,y2 x3,y3. Auch hier können selbstverständlich wieder die Attribute stroke, stroke-width etc. verwendet werden.

<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>

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

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 600 400">
    <polyline points="150,50 450,350 450,50 150,50 150,350 450,50" fill="none" stroke="blue" stroke-width="5" />
</svg>

Polygon

Das Polygon ist sehr ähnlich zu der Polylinie, denn auch hier besteht die Form, welche über das polygon-Element notiert wird, aus mehreren Punkten, die über das Attribut points festgelegt werden. Anders als bei der Polylinie wird beim Polygon der letzte Punkt automatisch mit dem ersten Punkt verbunden, d. h. das Polygon wird dazu verwendet, „geschlossene“ Formen zu zeichnen, wohingegen die Polylinie zur Zeichnung von „offenen“ Formen verwendet wird.

<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>

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

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 600 400">
    <polygon points="300,50 450,150 450,250 300,350 150,250 150,150" fill="blue" />
</svg>