Kapitel druckenKapitel drucken

Modul: Grafik

Vektorgrafikformat SVG

Objekte

In einer SVG-Grafik bestimmt ein Ortsvektor die genaue Lage des Objekts. Der Koordinatenursprung befindet sich — wenn nichts anderes bestimmt wurde — am linken oberen Bildrand. Ist das Grafikobjekt ein Rechteck, zeigt der Ortsvektor auf die linke obere Ecke des Rechtecks. Beim Kreis und Ellipse ist es der Mittelpunkt (cx,cy), der die Lage bestimmt. Das "c" ist keine mathematische Konstante, sondern steht für "circle".

Abbildung: SVG-Objekte Rechteck, Kreis und Ellipse (0,0) (x,y) height width (cx, cy) r (cx, cy) rx ry


Die Objekteigenschaften sind durch Attribute spezifiziert, z. B. Breite und Höhe beim Rechteck sowie der Radius beim Kreis. Die Ellipse wird durch zwei Radien festgelegt. Die Tags für Kreis und Ellipse aus der Abbildung lauten ohne Attribute für Farbe und Rand:

<circle description="Beispielkreis" cx="200" cy="250" r="100"/>
<ellipse description="Beispiel-Ellipse" cx="800" cy="300" rx="120" ry="70"/>

Die Abbildung unten zeigt drei Beispiele für Rechtecke und die Attribute, die die Lage und Form spezifizieren. Das magentafarbene Rechteck ist kreisförmig gerundet und das grüne Rechteck ellipsenförmig gerundet. Dies wird durch die Angabe von Rundungsradien rx und ry größer als null erreicht. rx und ry sind die Radien der Ellipse in x- und in y-Richtung, nach denen die Rundung ausgeformt wird. Sind rx und ry gleich, so ist die Ellipse ein Kreis und die Rundung folgerichtig kreisförmig.

Abbildung: Rechtecke mit abgerundeten und nicht abgerundeten Ecken x="50" y="10" width="200" height="100" x="700" y="100" width="200" height="100" rx="20" ry="20" x="200" y="200" width="200" height="100" rx="40" ry="20"

Neben Pflichtangaben zur Festlegung der Objektform gibt es eine Fülle optionaler Attribute, beispielsweise für die Füllfarbe und die Farbe und Strichstärke des Randes. So wird das hellblaue Rechteck erzeugt durch

    <rect x="50" y="10" width="200" height="100" fill="lightblue" stroke="black" stroke-width="1"/>

Dabei steht stroke für den Rand des Rechtecks bzw. allgemein für den Rand eines beliebigen Grafikelements. Der Wert von stroke ist die Farbe des Randes. Ohne die Angabe der Farbe wird kein Rand gezeichnet.

Das ist bei der Füllfarbe anders. Wird fill="..." weggelassen, wird schwarz gefüllt.

Neben Rechteck, Kreis und Ellipse kennt SVG Pfade und Text. Pfade gibt es als einfache Linie, Polygonzug, elliptischen Bogen und Bézier-Kurve.

SVG-Datei zum Ausprobieren: Nutzer.svg