Bézierkurven
Sie können im <path>-Element quadratische und kubische Bézierkurven definieren. Dafür bestimmen Sie neben dem Start- und Endpunkt einen bzw. zwei Kontrollpunkte, welche der Kurve die Richtung und die Steigung vorgeben.
Quadratische Bézierkurve
<path d="M 0,450 Q 150, 250 200,450" stroke="red" />
<path d="M 0,450 q 150,-200 200,0" stroke="red" />
Als erstes definieren Sie nach dem Befehl M (“bewegen nach”) den Startpunkt. Mit Q/q geben Sie an, dass eine quadratische Bézierkurve gezeichnet werden soll. Abhängig von der Groß- oder Kleinschreibung des Befehls können Sie bestimmen, ob Sie absolute (Q) oder relative Werte (q) für die Punkte verwenden möchten.
Weiche quadratische Kurve
Um einen fließenden Übergang zwischen zwei Kurven zu generieren, können Sie den Befehl T/t benutzen. Dabei müssen Sie nur noch den Endpunkt der zweiten Kurve angeben. Der Kontrollpunkt wird automatisch durch Punktspiegelung erzeugt. Der Endpunkt der ersten Kurve fungiert als Fixpunkt, woran der erste Kontrollpunkt gespiegelt wird und wodurch der neue Kontrollpunkt entsteht.
<path d="M 0,150 q 75,-75 150,0 t 150,0" stroke="red" />
<path d="M 0,150 Q 75,75 150,150 T 300,150" stroke="red" />
Kubische Bézierkurve
Bei der kubischen Bézierkurve geben Sie zwei Kontrollpunkte an. Der Befehl für diese Kurvenart lautet C/c (“Kurve nach”).
<path d="M 0,100 C 0,0 150,0 150,100" stroke="green" />
<path d="M 0,100 c 0,-100 150,-100 150,0" stroke="green" />
Nach dem Startpunkt definieren Sie die beiden Kontrollpunkte und den Endpunkt. Verwenden Sie den Großbuchstaben C, müssen Sie die absoluten Werte der Punkte angeben. Wollen Sie die relativen Werte verwenden, so benutzen Sie den Kleinbuchstaben c.
Kurznotation / Weiche Kurve nach
Für einen glatten, nahtlosen Übergang zweier Kurven können Sie S/s verwenden. Wie bei der quadratischen Kurve wird der zweite Kontrollpunkt der ersten Kurve am Endpunkt gespiegelt und erzeugt so den ersten Kontrollpunkt der zweiten Kurve. Sie müssen also nach dem Befehl S/s noch die absoluten bzw. relativen Werte des zweiten Kontrollpunkts und des Endpunkts der zweiten Kurve angeben.
<path d="M 0,100 C 0,0 150,0 150,100 S 300,200 300,100" stroke="green" />
<path d="M 0,100 c 0,-100 150,-100 150,0 s 150,100 150,0" stroke="green" />