SVG Basiselemente

Einleitung

Hinweis

Für den größten Teil der Erklärungen hier benutze ich den SVG-Editor SVGEdit und auf meinem PC Notepad++. Die hier dargestellten Beispiele wurde aus Gründen der Abwärtskompatibiltät nicht als SVG-Grafiken sondern als Bitmap-Grafiken im PNG-Format eingebunden.

Übersicht

Die grundlegenden SVG-Zeichnungselemente sind

Linie
Rechteck (einschließlich Quadrat)
Kreis
Ellipse
Pfad
Text

Linie

Wenn man mit SVGEdit eine einfache Linien zeichnet und sich dann mit einem Klick auf den SVG-Button den SVG-Code anzeigen lässt, dann sieht man folgendes:

<svg width="400" height="300" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
 <g>
<title>Layer 1</title>
<line id="svg_1" y2="94" x2="217" y1="95" x1="83" stroke="#000000" fill="none"/>
 </g>
</svg>

Abgesehen vom Vorspann und einem Title für den Layer enthält die Datei im Kern diese Anweisung:

<line id="svg_1" y2="94" x2="217" y1="95" x1="83" stroke="#000000" fill="none"/>

die besagt, dass eine Linie von a nach b gezeichnet werden soll. Wenn man die Linie etwas dicker macht (5 Pixel und die Linienfarbe auf rot setzt, dann ergibt sich:

<line stroke-width="5" id="svg_1" y2="94" x2="217" y1="95" x1="83" stroke="#ff0000" fill="none"/>

Linien können nicht nur waagerecht, wie in diesem Beispiel, sondern auch senkrecht oder diagonal verlaufen.

Rechteck

Wenn man an Stelle einer einfachen Linie ein Rechteck zeichnet, dann wird an statt line für Linie rect für Rechteck verwendet und zusätzlich zum Startpunkt werden die Abmessungen angegeben:

<rect fill="none" stroke="#ffff00" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="98" y="73" width="248" height="172" id="svg_1"/>

Bild "SVG Format:basis-formen-rechteck-abgerundet.png"

Eine Erweiterung des einfachen Rechtecks ist das Rechteck mit abgerundeteten Ecken. Der Rundunggrad wird durch die zusätzlichen Parameter rx und ry angegeben, so dass der SVG-Code dann so aussieht:

<rect fill="none" stroke="#ff0000" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" ry="15" rx="15" x="49" y="40" width="248" height="172" id="svg_1"/>

Ellipse

Auch Ellipsen werden mit diesen einfachen Parametern beschrieben:

<ellipse fill="none" stroke="#000000" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" cx="284" cy="99" id="svg_2" rx="70" ry="70"/>

Beim der Ellipse werden Mittelpunkt, Breite und Höhe angegeben. Wenn bei einer Ellipse Breite und Höhe gleich sind, dann sieht sie aus wie ein Kreis.

Kreis

Ein Kreis wird nicht etwa in Analogie zu Quadrat und Rechteck von der Ellipse abgeleitet sondern mit einer speziellen Anweisung erstellt. Auch Kreise und Ellipsen werden mit diesen einfachen Parametern beschrieben:

<circle fill="none" stroke="#000000" stroke-dasharray="null" cx="101" cy="100" r="67.89698" id="svg_1"/>

Beim Kreis reichen Mittelpunkt und Radius, bei der Ellipse Mittelpunkt, Breite und Höhe. Wenn bei einer Ellipse breite und Höhe gleich sind, dann sieht sie aus wie ein Kreis.

Polyline

Das SVG-Basiselement Polyline ergibt sich aus einer Aneinanderreihung einzelner Punkte. Die Punkt werden durch ihre jeweiligen x,y-Korrdiinaten dargestellt. Der SVG-Code kann dan so aussehen:

<polyline fill="none" stroke="red" stroke-width="3" points="27,146 58,146 58,128 90,128 90,146 121,146 121,103 152,103 152,146 184,146 184,77" id="svg_2"/>

Bild "SVG Format:basis-formen-polyline-fill.png"

Ein Polyline-Objekt kann auch gefüllt sein, an Stelle von fill="none" steht dann fill="Farbwert". Ob eine derartige Füllung sinnvoll ist, hängt von der jeweiligen Linienziehung ab.

Polygon

Polygone sind bei SVG regelmäßige geometrische Formen, bei denen drei oder mehr Punkte durch Linien verbunden sind. So können z.B. auch Dreiecke Poylgone sein. Der SVG-Befehlsumfang hat auch für diese Formen eine spezielle Anweisung. Der Beispielcode für ein SVG-Polygon sieht so aus:

<polygon id="svg_3" fill="#FF0000" points="137,81 106,134 42,134 11,81 42,28 106,28 137,81 " stroke="#000000" stroke-width="2"/>

Bild "SVG Format:basis-formen-mehr-polygone.png"

Die nebenstehende Grafik zeigt noch weitere Möglichkeiten, wie Polygone aussehen können. Wie man sieht kann so ein Polygon auch dazu verwendet werden, einen Stern zu zeichnen.

Text

Zur Darstellung von Text habe extra SVG Texte angelegt.

Pfade

Die Verwendung von Pfaden ist ebenso wichtig wie umfangreich und wird auf der Seite SVG Pfade dargelegt.