SVG Grundformen

Auf verschiedene Weisen kann man in SVG das selbe Ergebnis erzielen. Das fängt bei den Grundformen im Grunde schon an. In den folgenden Beispielen möchte ich verschiedene Wege vorstellen. Mehr aber aus dem Grunde um zu zeigen das SVG sehr leistungsfähig ist. Anhand der Beispiele möchte ich aber auch gleich auf weitere Funktionen in SVG aufmerksam machen auch wenn sie im betreffenden Falle nicht unbedingt sinnvoll erscheinen. Im Prinzip ist jede Grundform durch einen Pfad ersetzbar und man könnte mit dieser Methodik alleine sämtliche Formen erstellen.

Quadrat zeichnen

Zuerst habe ich das Quadrat mit einem Rechteck gezeichnet. Das stellt die normale Vorgehensweise dar. Alternativ habe ich einen Pfad für das Quadrat verwendet. Aber es würde sich auch ein Polygon wie auch eine Linie dafür eignen.

<rect x="5" y="5" width="90" height="90" fill="maroon" />
<path d="M105,5 h90 v90 h-90 Z" fill="green" />
<polygon points="5,105 5,195 95,195 95,105" fill="navy" />
<line x1="105" y1="150" x2="195" y2="150" stroke="gray" stroke-width="90" />

Kreis zeichnen

Zuerst habe ich wieder die zutreffende Funktion für einen Kreis verwendet. Danach habe ich ein Rechteck mit abgerundeten Ecken genommen. Auch durch eine Ellipse wo beide Radien denselben Wert haben gelangt man zu einem Kreis. Und wenn man 2 Kreisbögen um 180° durch einen Pfad aufbaut erhält man auch einen Kreis.

<circle cx="50" cy="50" r="45" fill="maroon" />
<rect x="105" y="5" rx="45" ry="45" width="90" height="90" fill="green" />
<ellipse cx="50" cy="150" rx="45" ry="45" fill="navy" />
<path d="M150 105 a45,45 0 0,1 0,90 A45,45 0 0,1 150,105" fill="gray" />

Ellipsen

Auch Ellipsen sind mit Pfaden darstellbar. Je nach Breite und Höhe der beiden Radien ergebn sich leichte Unterschiede im Aubau des Pfades.

<ellipse cx="50" cy="50" rx="45" ry="30" fill="maroon" />
<path d="M105 50 a45,30 0 0,1 90,0 a45,30 0 0,1 -90,0" fill="green" />
<ellipse cx="50" cy="150" rx="30" ry="45" fill="navy" />
<path d="M150 105 a30,45 0 0,1 0,90 a30,45 0 0,1 0,-90" fill="gray" />

Polygone und Polylinien

Polygone und Polylinien sind durch Pfade ebenso ersetzbar. Im Grunde stellen sich auch nur minimale Unterschiede dar, wenn man Pfade mit absoluten Werten verwendet.

<polyline points="5,5 95,95 5,95 95,5" stroke="maroon" stroke-width="3" fill="none" />
<path d="M105,5 L195,95 L105,95 L195,5" stroke="green" stroke-width="3" fill="none" />
<polygon points="5,105 95,195 5,195 95,105" stroke="navy" stroke-width="3" fill="none" />
<path d="M105,105 L195,195 L105,195 L195,105 Z" stroke="gray" stroke-width="3" fill="none" />

Linien

In diesem Beispiel ersetzen wir vier Linien durch zwei Angaben mit Pfaden. Der Unterschied bei den Pfaden liegt darin das einmal absolute Angaben verwendet werden und das letzte Beispiel auf relativen Werten besteht. Der Vorteil der Angabe der relativen Werte wäre das wenn man die Form verschieben möchte nur den Startwert anpassen müsste. Sicher wäre so eine Verschiebung in den beiden anderen Fällen auch leicht mit dem transform Attribut mit entsprechenden Werten für translate möglich.

<line x1="5" y1="5" x2="95" y2="95" stroke="maroon" stroke-width="3" />
<line x1="5" y1="95" x2="95" y2="5" stroke="maroon" stroke-width="3" />
<line x1="50" y1="5" x2="50" y2="95" stroke="maroon" stroke-width="3" />
<line x1="5" y1="50" x2="95" y2="50" stroke="maroon" stroke-width="3" />
<path d="M105,5 L195,95 M105,95 L195,5 M150,5 V95 M105,50 H195" stroke="green" stroke-width="3" />
<path d="m5,105 l90,90 m-90,0 l90,-90 m-45,0 v90 m-45,-45 h90" stroke="navy" stroke-width="3" />

Gleichseitiges Dreieck

Um ein gleichseitiges Dreieck zu erstellen benötigt man nur etwas Mathematik.

<polygon fill="maroon" points="25,175 175,175 100,45.09618943" />

Dreieck

Ein weiteres Dreieick

<polygon fill="maroon" points="25,175 175,175 100,25" />

Rechtwinkliges Dreieck

Da ein rechtwinkliges Dreieck auch eine Form ist die man häufiger benötigt stelle ich zwei Methoden vor.

<polygon fill="maroon" points="25,175 175,175 100,100" />
<path fill="navy" d="M25,25 L175,25 L100,100 Z" />

Achteck

Näherungsweise kann man mit Polygonen oder Pfaden auch Achtecke erstellen. Zumindest kann man mit Angabe von ganzen Zahlen zu einem vernünftigen Ergebnis kommen.

<polygon points="100,1 30,30 1,100 30,170 100,199 170,170 199,100 170,30" transform="rotate(22.5,100,100)" fill="maroon" />
<path d="m300,1 l-70,29 l-29,70 l29,70 l70,29 l70,-29 l29,-70 l-29,-70 z" transform="rotate(22.5,300,100)" fill="navy" />

Sechseck

Auch für Sechsecke existieren vernünftige Näherungswerte um mit ganzen Zahlen diese Form erstellen zu können.

<polygon id="hex" points="0,30 15,4 45,4 60,30 45,56 15,56" fill="maroon" />
<path d="m60,30 l15,-26 l30,0 l15,26 l-15,26 l-30,0 z" fill="navy" />

Relative und Absolute Pfade

Bewusst habe ich auf dieser Seite relative und absolute Angaben für Pfade verwendet. Auch in gemischter Form wurden diese Angaben verwendet. Kleine Buchstaben entsprechen relativen Angaben und große Buchstaben besitzen absolute Koordinatenwerte. Meiner Ansicht nach sind die relativen Werte in der Regel vorteilhafter.