Kurven in SVG-Pfaden entstehen über Bézier-Befehle mit Kontrollpunkten. Wie kubische (C) und quadratische (Q) Kurven funktionieren, was die Smooth-Varianten S und T automatisch ergänzen und wie du mit den Kontrollpunkten die Form gezielt steuerst.

Gerade Linien in SVG sind schnell verstanden: ein Punkt, noch ein Punkt, dazwischen eine Strecke. Sobald es aber rund werden soll, fangen die Kurven an. Und Kurven in SVG funktionieren nicht über einen Radius, wie Du es vielleicht von Kreisen erwartest, sondern über sogenannte Bézier-Kurven. Diese Kurven werden von unsichtbaren Hilfspunkten geformt, den Kontrollpunkten. Beim Bau des Editors habe ich gemerkt, dass genau dieser Punkt am Anfang für die meiste Verwirrung sorgt. Deshalb nehme ich mir hier die Zeit, das Prinzip in Ruhe zu erklären und danach die vier Kurvenbefehle C, Q, S und T durchzugehen.

Wenn Du die grundlegenden Pfadbefehle noch nicht kennst, lies zuerst die SVG-Path-Grundlagen. Eine kompakte Liste aller Befehle findest Du in der Befehlsübersicht.

Was ein Kontrollpunkt ist

Eine Bézier-Kurve verbindet zwei Punkte: einen Startpunkt und einen Endpunkt. Zwischen diesen beiden Punkten könnte man einfach eine Gerade ziehen. Der Reiz der Bézier-Kurve liegt darin, dass sie gebogen wird, und zwar von einem oder mehreren zusätzlichen Punkten, die selbst nicht auf der Kurve liegen. Das sind die Kontrollpunkte.

Stell Dir einen Kontrollpunkt wie einen Magneten vor. Die Kurve läuft von Start nach Ende, aber der Magnet zieht sie zu sich hin. Je weiter der Kontrollpunkt vom direkten Weg entfernt liegt, desto stärker wölbt sich die Kurve in seine Richtung. Wichtig dabei: Die Kurve berührt den Kontrollpunkt nie. Sie wird nur von ihm geformt. Der Kontrollpunkt bestimmt außerdem die Richtung, in der die Kurve den Start- beziehungsweise Endpunkt verlässt und erreicht. Die Verbindungslinie zwischen einem Ankerpunkt und seinem Kontrollpunkt ist immer die Tangente der Kurve an dieser Stelle.

Im Editor siehst Du das direkt: Ankerpunkte sind die Punkte, die tatsächlich auf dem Pfad liegen, Kontrollpunkte sind kleine Quadrate, die über eine dünne Führungslinie mit ihrem Ankerpunkt verbunden sind. Ziehst Du so ein Quadrat, verändert sich die Wölbung der Kurve live mit.

Die kubische Bézier: der C-Befehl

Der wichtigste und flexibelste Kurvenbefehl ist die kubische Bézier, geschrieben mit C. Kubisch bedeutet: Diese Kurve hat zwei Kontrollpunkte, einen am Anfang und einen am Ende. Zusammen mit dem impliziten Startpunkt und dem angegebenen Endpunkt kommen also insgesamt vier Punkte ins Spiel.

Der Startpunkt selbst steht nicht im C-Befehl. Er ergibt sich immer aus dem aktuellen Punkt, also dorthin, wo der vorherige Befehl geendet hat. Im C gibst Du dann genau sechs Zahlen an: zwei für den ersten Kontrollpunkt, zwei für den zweiten Kontrollpunkt und zwei für den Endpunkt.

M 20 100 C 40 20, 120 20, 140 100

Zerlegen wir das:

M 20 100 setzt den Stift auf den Startpunkt (20, 100).
C 40 20 ist der erste Kontrollpunkt. Er liegt weit oben, zieht die Kurve also gleich am Start nach oben.
120 20 ist der zweite Kontrollpunkt. Auch er liegt oben, kurz vor dem Ende.
140 100 ist der Endpunkt, auf gleicher Höhe wie der Start.

Das Ergebnis ist ein sauberer Bogen nach oben, eine Art flacher Hügel. Weil beide Kontrollpunkte oben sitzen, wölbt sich die Kurve gleichmäßig nach oben und kommt symmetrisch wieder herunter. Würdest Du den zweiten Kontrollpunkt stattdessen nach unten setzen, etwa auf 120 180, bekämst Du eine geschwungene S-Form.

Es gibt den C-Befehl auch in der relativen Kleinschreibung c. Dann werden alle sechs Zahlen als Verschiebung relativ zum aktuellen Punkt interpretiert, nicht als absolute Koordinaten. Das ist praktisch, wenn Du eine Form verschieben willst, ohne alle Zahlen neu zu rechnen.

Die quadratische Bézier: der Q-Befehl

Die quadratische Bézier, geschrieben mit Q, ist die kleinere Schwester der kubischen. Sie hat nur einen einzigen Kontrollpunkt, der für die gesamte Kurve gilt. Dadurch braucht sie auch weniger Zahlen: nur vier. Zwei für den Kontrollpunkt und zwei für den Endpunkt.

M 20 100 Q 80 20, 140 100

Hier startet die Kurve bei (20, 100), wird von dem einen Kontrollpunkt (80, 20) nach oben gezogen und endet bei (140, 100). Weil es nur einen Kontrollpunkt gibt, ist eine quadratische Kurve immer symmetrisch um diesen Punkt herum. Sie kann keine echte S-Form bilden, dafür braucht es die zwei Kontrollpunkte der kubischen Variante.

Quadratische Kurven sind ideal für einfache, gleichmäßige Bögen, zum Beispiel für Sprechblasen, weiche Ecken oder Schriftzeichen. Sie sind leichter im Kopf zu behalten, weil man nur einen Kontrollpunkt im Blick behalten muss. Auch hier gibt es die relative Form q.

Die Smooth-Varianten: S und T

Jetzt wird es interessant, denn oft möchtest Du mehrere Kurven aneinanderhängen, sodass der Übergang glatt bleibt und keinen Knick bekommt. Genau dafür gibt es die Smooth-Befehle S (für kubische Kurven) und T (für quadratische Kurven).

Ein glatter Übergang bedeutet: An der Stelle, wo eine Kurve endet und die nächste beginnt, muss die Richtung gleich bleiben. Technisch heißt das, der letzte Kontrollpunkt der ersten Kurve und der erste Kontrollpunkt der zweiten Kurve müssen auf einer geraden Linie durch den gemeinsamen Ankerpunkt liegen, gespiegelt zueinander. Das von Hand auszurechnen ist mühsam, und genau diese Rechnung nehmen Dir S und T ab.

Der S-Befehl ist eine kubische Kurve, aber Du gibst nur noch vier Zahlen an statt sechs: den zweiten Kontrollpunkt und den Endpunkt. Den ersten Kontrollpunkt ergänzt SVG automatisch. Er ist die Spiegelung des zweiten Kontrollpunkts der vorhergehenden Kurve am aktuellen Punkt. Dadurch schließt die neue Kurve nahtlos an die alte an.

M 20 100 C 40 20, 100 20, 120 100 S 200 180, 220 100

Der C-Teil zeichnet den ersten Bogen. Der S-Teil setzt danach an. Sein erster Kontrollpunkt wird automatisch aus dem vorherigen zweiten Kontrollpunkt (100, 20) gespiegelt, sodass die zweite Kurve genau in derselben Richtung weiterläuft. Angegeben hast Du nur noch den zweiten Kontrollpunkt (200, 180) und den Endpunkt (220, 100).

Der T-Befehl macht dasselbe für quadratische Kurven, ist aber noch sparsamer. Weil eine quadratische Kurve nur einen Kontrollpunkt hat und dieser bei T komplett automatisch aus der vorherigen Kurve gespiegelt wird, gibst Du nur noch zwei Zahlen an: den Endpunkt.

M 20 100 Q 60 20, 100 100 T 180 100

Der Q-Teil zeichnet den ersten Bogen mit dem Kontrollpunkt (60, 20). Der T-Teil spiegelt diesen automatisch und zeichnet weiter bis (180, 100). So entsteht eine durchgehende Wellenlinie aus zwei gleichmäßigen Bögen, ohne dass Du einen einzigen Kontrollpunkt für die zweite Kurve angeben musst.

Ein wichtiger Hinweis: Die Spiegelung funktioniert nur, wenn direkt davor ein passender Kurvenbefehl steht. Vor einem S sollte ein C oder ein S stehen, vor einem T ein Q oder ein T. Steht davor etwas anderes, zum Beispiel eine gerade Linie, dann nimmt SVG an, es gäbe keinen Kontrollpunkt zum Spiegeln, und der fehlende Kontrollpunkt fällt einfach mit dem aktuellen Punkt zusammen. Die Kurve wird dann oft flacher als erwartet.

Die vier Befehle im Vergleich

Befehl	Typ	Kontrollpunkte	Parameter	Bedeutung der Zahlen
`C`	kubisch	2	6	Kontrollpunkt 1, Kontrollpunkt 2, Endpunkt
`Q`	quadratisch	1	4	Kontrollpunkt, Endpunkt
`S`	kubisch, smooth	2 (erster automatisch)	4	Kontrollpunkt 2, Endpunkt
`T`	quadratisch, smooth	1 (automatisch)	2	Endpunkt

Der Startpunkt kommt bei allen vier Befehlen aus dem aktuellen Punkt und wird nie mit angegeben. Jeder dieser Befehle existiert zusätzlich in einer relativen Kleinschreibung (c, q, s, t), bei der die Koordinaten als Verschiebung vom aktuellen Punkt gerechnet werden.

Kontrollpunkte im Editor steuern

In der Theorie klingt das abstrakt, in der Praxis wird es schnell greifbar. Wenn Du im Editor einen Pfad auswählst, der eine Kurve enthält, erscheinen neben den Ankerpunkten die Kontrollpunkte als kleine Quadrate. Von jedem Ankerpunkt läuft eine dünne Führungslinie zu seinem Kontrollpunkt. Diese Linie ist Deine Tangente: Sie zeigt Dir, in welche Richtung die Kurve den Punkt verlässt.

So gehst Du praktisch vor:

Ziehe ein Kontrollpunkt-Quadrat weiter vom Ankerpunkt weg, um die Wölbung an dieser Stelle zu verstärken. Zieh es näher heran, um die Kurve flacher zu machen.
Drehe den Kontrollpunkt um den Ankerpunkt, um die Richtung der Kurve zu ändern. Die Kurve folgt der Führungslinie.
Achte bei zusammengesetzten Kurven darauf, dass die beiden Führungslinien an einem gemeinsamen Ankerpunkt möglichst auf einer Geraden liegen. Nur dann ist der Übergang glatt. Ein Knick entsteht immer dann, wenn die Linien in unterschiedliche Richtungen zeigen.

Wenn Du einen glatten Anschluss brauchst, bietet es sich oft an, statt eines zweiten C einen S-Befehl zu setzen. Dann übernimmt der Editor die Spiegelung, und Du musst nur noch einen Kontrollpunkt statt zwei justieren.

Typische Fehler

Der häufigste Fehler bei den Smooth-Varianten ist ein unerwarteter Knick statt eines glatten Übergangs. Er entsteht meist, weil vor dem S oder T kein passender Kurvenbefehl steht. Wenn Du zum Beispiel eine gerade Linie mit L zeichnest und danach direkt ein S setzt, hat SVG keinen Kontrollpunkt zum Spiegeln, und die Kurve startet flach. Prüfe in solchen Fällen, ob der Befehl davor wirklich ein C, S, Q oder T ist.

Ein zweiter Klassiker ist die falsche Anzahl an Zahlen. Ein C mit nur vier statt sechs Werten führt zu einem Fehler oder zu einer verschobenen Kurve, weil SVG die Werte falsch zuordnet. Zähl im Zweifel nach: C braucht sechs, S und Q je vier, T zwei.

Und drittens sitzen Kontrollpunkte manchmal so extrem weit außen, dass die Kurve über sich selbst hinausschwingt und eine kleine Schlaufe bildet. Das ist kein Fehler von SVG, sondern eine logische Folge der Kontrollpunkt-Position. Ziehst Du den Punkt im Editor wieder etwas näher an den Pfad heran, verschwindet die Schlaufe.

Wenn Du diese drei Dinge im Kopf behältst, sind Bézier-Kurven kein Rätsel mehr, sondern ein präzises Werkzeug. Am schnellsten lernst Du das Gefühl dafür, indem Du im Editor einfach ein paar Kontrollpunkte ziehst und beobachtest, wie sich die Kurve verhält. Nach ein paar Minuten wird aus dem Magnet-Bild eine echte Intuition.

Bézier-Kurven in SVG verstehen: kubisch, quadratisch, smooth