Eines der einfachsten SVG Elemente ist <line>. Hier eine blaue Linie der Länge 200 px mit Strichstärke 4 px. Beachte, dass der x1 Wert standardmässig Null ist und somit nicht spezifiziert werden müsste.
<svg version="1.1" width="200" height="4">
<line x1="0" y1="2" x2="200" y2="2" stroke="#00f" stroke-width="4"/>
</svg>Die Strichstärke (stroke-width) muss dabei eingerechnet werden. Wir starten also nicht bei (0/0) sondern bei (0/2), damit die Linie nicht durch die Seitenbegrenzung abgeschnitten wird.
Diese Linie hätten wir auch mit einem Pfad zeichnen können:
<path d="m0 2h200" stroke="#00f" stroke-width="4"/>Wir sehen, dieser Pfad ist nicht unbedingt selbstredend, aber hübsch komprimiert. Man kann ihn etwa so paraphrasieren: Gehe (move) 0 nach rechts und 2 nach unten «m0 2», zeichne jetzt eine horizontale Linie um 200 px nach rechts «h200» und schon ist der Pfad erstellt!
Bei Verwendung der Attribute absolut zum Koordinatensystem (was hier auf das Gleiche herauskommt) ist die Interpretation oft etwas einfacher:
<path d="M0 2H200" stroke="#00f" stroke-width="4"/>Gehe (Move) zu (0/2) und zeichne eine Horizontale Linie bis (200/2). Eine andere Syntax ist d="M0,2H200"; ich beschränke mich hier indes auf die am häufigsten auftretende komprimierte Darstellungsart, die beim Umwandeln in Pfade in der Regel erzeugt wird.
End- und Anfangspunkt des Pfades sind sogenannte Knoten, an denen ein Pfad weitergeführt oder mit einem anderen Pfad vereinigt werden kann. Im Gegensatz zur Linie können wir diesen Pfad leicht verändern und z.B. mit einer Krümmung versehen!
Dieser veränderte Pfad enthält jetzt folgende Daten:
<path d="M2 2C100 30 100 180 200 2" fill="none" stroke="#00f" stroke-width="4"/>Er startet diesmal mit «M2 2», damit links nichts abgeschnitten wird und macht nun eine kubische Bézierkurve (Curveto oder besser Cubic). «C100 30» ist der erste Kontrollpunkt für die Krümmung (100/30). Dieser Punkt wird von einigen Editoren «Knoten-Anfasser» genannt; er lässt sich in diesen Programmen meistens manuell verändern. Anschliessend geht es mit dem neuen Kontrollpunkt (100/180) weiter zum Endknotenpunkt (200/2).
Anmerkung. Die oben erwähnte Bézierkurve aus vier Punkten hat algebraisch folgende Darstellung. Wenn \(A\) und \(D\) die beiden Knotenpunkte bezeichnen, \(B\) und \(C\) die beiden Kontrollpunkte sind, erhalten wir den Punkt \(X\) einer Bézierkurve in Abhängigkeit vom Parameter \(t\) \[ X(t)=(1-t)^3\cdot A+3(1-t)^2\, t\cdot B+3(1-t)\, t^2 \cdot C+t^3\cdot D\quad\mathrm{mit}~t\in[0,1]. \] Ist \(t=0\), sind wir im Punkt \(A\), für \(t=1\) im Punkt \(D\). In der Nähe von \(A\) (\(t\) klein) wird neben \(A\) der Punkt \(B\) wirksam, je weiter es zu \(D\) geht, der Punkt \(C\). Der Übergang ist total stetig und wunderbar! Mit vier Punkten (d.h. zwei Kontrollpunkten) haben wir somit eine «kubische Bézierkurve». Diese sind meistens in Zeichnungsprogrammen implementiert und entsprechen dem C-Befehl im Pfad. Beim Q-Befehl gibt es nur drei Punkte und dies entspricht einer quadratischen Bézierkurve \(X(t)=(1-t)^2\cdot A+2(1-t)\, t\cdot B+t^2\cdot C\).
Im Prinzip können die meisten Figuren in Pfade umgewandelt werden. Dies ist z.B. für spezielle Schriftarten sinnvoll, die lokal kaum verfügbar sein werden. Allerdings werden diese Pfade mitunter komplexer.
Wir zeichnen jetzt ein schlichtes Rechteck.
<svg version="1.1" width="204" height="104">
<rect x="2" y="2" width="200" height="100" fill="none" stroke="#000" stroke-width="4"/>
</svg>Dieselbe Grafik kann auch mit dem Pfad
<path d="M2 2H202V102H2Z" fill="none" stroke="#000" stroke-width="4"/>erzeugt werden. Der Pfad d="M 2,2 H 202 V 102 H 2 Z" beginnt bei (2/2) und zeichnet zuerst eine Horizontale Line bis (202/2), anschliessend eine Vertikale Linie bis (202/102), nun eine Horizontale Linie zurück zu (2/102) und von diesem Punkt geht es Zurück zum Anfangspunkt (2/2).
Im Gegensatz zur ersten Variante des Rechtecks befinden sich nun an jeder Ecke Knotenpunkte, an die weitere Pfade leicht angedockt werden können. Darüber hinaus macht es eigentlich wenig Sinn, das Rechteck in einen Pfad umzuwandeln, es sei denn, man hat extrem komplexe Grafiken, welche der Browser mit Pfaden etwas schneller darstellen wird. Ansonsten muss beachtet werden, dass die Lesbarkeit der Information vor allem bei grösseren zusammenhängenden Pfaden geringer wird.
Dies wird besonders beim einfachen Element <circle> deutlich, denn aus
<svg version="1.1" viewBox="-10 -10 20 20">
<circle cx="0" cy="0" r="8" stroke="#00f"/>
</svg>
wird ein Pfad mit einem elliptischen Bogen
<svg version="1.1" viewBox="-10 -10 20 20">
<path d="m8 0a8 8 0 0 1-8 8 8 8 0 0 1-8-8 8 8 0 0 1 8-8 8 8 0 0 1 8 8z" stroke="#00f"/>
</svg>.
Zurück zur Grafikseite sqrt.ch/grafik