Leitfaden für skalierbare Vektorgrafiken – Teil 1

Mit dem <rect>-Tag kann man Rechtecke und Quadrate anzeigen. Die Attribute rx und ry für das <rect>-Tag legen fest, wie stark die Ecken des Rechtecks abgerundet sind. Falls die Ecken keine Rundung aufweisen sollen, gibt man rx=“0″ an oder lässt das Attribut ganz weg.

<rect x="5" y="5" rx="5" ry="5" width="70" height="70" />

Die Attribute cx und cy des <circle>-Tags legen die x- und y-Position des Kreis-Mittelpunktes fest, zur Definition des Radius’ wird das Attribut r verwendet.

<circle cx="40" cy="40" r="35" />

Ellipsen sind nicht gleichmäßig rund, das heißt die Radiuswerte in x- und y-Richtung weichen voneinander ab. Das Attribut rx definiert den horizontalen Radius, ry den vertikalen Radius.

<ellipse cx="40" cy="40" rx="35" ry="25" />

Das Element <line> zeigt eine gerade Linie an, die von Anfangspunkt (x1, y1) und Endpunkt (x2, y2) festgelegt wird.

<line x1="5" y1="75" x2="75" y2="5" />

Ein <polygon>-Element enthält mindestens drei Seiten. Jede Seite eines Polygons wird durch ein entsprechendes Wertepaar von Eckpunkten definiert.

<polygon points="40 5, 5 75, 75 75" />

Ein <polyline>-Element kann jede beliebige Form annehmen, die aus geraden Linien besteht. Dieses Element verwendet ähnlich wie das polygon-Element ein System von Wertepaaren.

<polyline points="5 75, 40 5, 75 75, 40 5" />

Das <path>-Element wird verwendet um eine Linie aus gebogenen und geraden Segmenten festzulegen, die mithilfe des Attributs d festgelegt werden: M = move to („Bewegung nach“), L = line to („Linie zu“), C = curve to („Kurve nach“), Z = close path („Pfad abschließen“). Das Ende eines Pfades kann eine weitere Form enthalten. Dies ist nützlich, wenn man Pfeile oder Verbindungen in technischen Diagrammen darstellen möchte.

<path d="M5 5 C5 5 125 40 40 75 
L 5 40 5 15 Z" marker-end="url(#Triangle)" />

Text kann auf einfache Weise in einer SVG-Grafik angezeigt werden. Dazu wird er einfach in ein <text>-Element eingeschlossen, wobei man seine Position mithilfe der x- und y-Attribute festlegt. Man beachte, dass die Position von Formen anhand des oberen linken Punktes festgelegt wird, die Position von Text dagegen vom unteren linken Punkt aus.

<text x="10" y="20" >Results</text>

Mehrere Zeilen Text werden mit <tspan>-Elementen angezeigt, die in ein text-Element eingeschlossen sind. Die <tspan>-Elemente können absolut oder relativ positioniert werden. Absolute Positionen werden mithilfe von x- und y-Attributen festgelegt, während dx- und dy-Attribute die relative Position für jedes neue <tspan>-Element festlegen.

<text x="10" y="20">Results</text>
<tspan x="20" dy="15">first</tspan>
<tspan x="20" dy="15">second</tspan>