SVG Path – Bézier-Kurven für glatte frei formbare Linien
Bezierkurven sind Pfade mit Kontrollpunkten, die eine Kurve zum nächsten Punkt beschreiben. So entstehen die eleganten und zugleich exakten Freiformkurven der Computergrafik. Die kubische Bezierkurve wird z.B. auch in Illustrator und Photoshop für die Beschreibung von Schriften eingesetzt.
Kubische Bézierkurven – Basis für ein präzises Design
Glatte Kurven entstehen, wenn die Punkte eines Pfades miteinander verbunden werden und die Kontrollpunkte oder »Handles« die Kurve in eine Richtung ziehen. Die Kontrollpunkte bestimmen die Krümmung der Kurve bis zum nächsten Punkt.
In der Vektorgrafik mit grafischer Benutzeroberfläche – Illustrator, Photoshop, Inkscape – zeichnen wir Freistellpfade meist mit der kubischen Bézierkurve. In »Handarbeit« sind aufwändige Formen fast immer zu komplex – bei komplizierten Formen ist ein grafischer Editor unersetzlich.
Gute Einführung in die Berechnung von Bézierkurven für diejenigen, die Bézierkurven programmieren wollen: Bézier curves – a primer von Mike "Pomax" Kamermans
Kubische Bézierkurven – jeder Punkt hat ein Handle
P0 P1
┌─┴─┐ ┌─┴─┐
▼ ▼ ▼ ▼
<path d="M 50 200 C 150 50, 300 250, 400 100" stroke="black"/>
▲ ▲ ▲ ▲
└─┬─┘ └─┬─┘
C0 C1
Kurvenpunkte mit Großbuchstaben werden als absolute Werte interpretiert, bei Kleinbuchstaben wird der Punkt relativ zum vorangegangenen Punkt gerendert.
Startpunkt Endpunkt
| |
┌-----┴---┐ ┌------┴------┐
| | | |
▼ ▼ ▼ ▼
Mx y Cx y, x y, x y
▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲
└-┬┘ └--┬-┘ └---┤ └---┤
| | | └-- Endpunkt der Kurve
| | └--Kontrolpkt
| └-- Kontrolpkt des Endpunkts
| des Startpunkts
|
└-- Startpunkt der Kurve
Kurvensegmente aneinanderfügen
<path d=" M 50 150 C70 250 , 130 250 ,150 150 M150 150 C170 50 , 230 50 , 250 150 M250 150 C270 250 , 330 250 ,350 150 M350 150 C370 50 , 430 50 , 450 150 M450 150 C470 250 , 530 250 ,550 150" fill="hsla(0,0%,75%,0.5)" stroke="black" stroke-width="2" />
Jetzt wird Segment an Segment gehangen: Der Endpunkt eines Segments ist der Startpunkt M des nächsten Segments.
Der Pfad in diesem Beispiel ist gefüllt. Bezierkurven brauchen genauso wie Polylines fill="none", damit die Kurve nicht gefüllt wird.
Quadratische Bézierkurven – einfach für mathematische Anwendungen
Quadratische Kurven haben einen Anfangspunkt P0 und einen Endpunkt P1. Ein einzelner Kontrollpunkt C entscheidet über die Rundung der Linien. Quadratische Kurven brauche weniger Daten und sind performanter. Für komplexe Formen sind sie weniger geeignet.
<path d="M100 400
Q250 100, 450 300"
fill="none" stroke="green" stroke-width="1"/>
Die Sinuskurve als quadratische Bézierkurve ist kompakter als die kubische Bézierkurve. Die Kontrollpunkte haben jeweils den Präfix Q.
<path d="M0 250
Q50 150, 100 250,
Q150 350, 200 250
Q250 150, 300 250
Q350 350, 400 250
Q450 150, 500 250" stroke="green" fill="none" stroke-width="2" />
Freihand-Bézier
Beim Zeichnen mit der Feder in Grafikprogrammen setzt man i.d.R. immer dort einen Punkt, wo sich die Richtung der Kurve ändert und zieht so weit, das die gewünschte Rundung entsteht.
