SVG/ Pfade

SVG:

Pfade - beliebige Formen spezifizieren

Ein Pfad ist wahrscheinlich das meist verwendete Zeichenwerkzeug, welches in SVG Verwendung findet. Um einen Pfad anzugeben, wird das Element path verwendet. Es hat die spezifischen Attribute d und pathLength.

Attribut d


SVG
1.1	1.7	8	1.5	3.2	4	?	?	2

Das Attribut d enthält die eigentlichen Pfaddaten, das sind Kommandos, meist gefolgt von lokalen Koordinaten oder Parametern. Der Wert ist also eine kompliziertere Zeichenkette, die im weiteren Text genauer erläutert wird.

Das Attribut ist animierbar. Allerdings gibt es spezielle Einschränkungen an die Struktur der Attributwerte für Animationen, die im weiteren Text noch erläutert werden.

Kommandos sind einzelne Buchstaben, Koordinaten oder Parameter oder eine bestimmte Anzahl von Zahlen oder einer vielfachen Menge von Zahlen hinter dem Kommando. Sind für ein Kommando etwa mindestens n weitere Koordinaten oder Parameter notwendig, so kann jeweils auch ein ganzzahliges Vielfaches von n an Koordinaten oder Parametern notiert werden. Zu jedem dieser n Koordinaten oder Parameter gehört dann ein Kurvenstück oder -segment, wobei das Kommando bestimmt, wie dieses dargestellt wird. Eines oder mehrere dieser Kurvensegmente können auch Pfadfragment(e) genannt werden, wenn sie im d-Attribut aufeinanderfolgen. Ein Pfad kann auch mehrere Unterpfade enthalten, die nicht miteinander verbunden sind. Trotzdem handelt es sich bei allen Unterpfaden, die in einem Attribut d notiert werden, um einen Pfad, was Folgen haben kann, wenn sich ein Pfad selbst überkreuzt. Je nachdem, was der Autor angibt, wie der Pfad gemalt werden soll, kann das Resultat für einen oder mehrere sich kreuzende Pfade deutlich unterschiedlich aussehen.

Ein einfaches Beispiel für eine Pfadangabe:

<path d="M 20 20 L 18 22 C 24 28 14 25 10 40 Q 20 45 15.33 60" />

Sieht kryptisch aus? Richtig, das ist es auch. Folgende Liste bietet eine Kurzübersicht über verfügbare Kommandos. Kommandos werden in großen oder kleinen Buchstaben angegeben. Große Buchstaben entsprechen absoluten Koordinatenangaben. Kleine Buchstaben entsprechen relativen Angaben, relativ zum letzten Punkt des Pfades (also wirklich Punkt und nicht Kontrollpunkt).

Kommando	Parameter	Funktion	Beschreibung
M, m	(x y)+	Legt die Position des Zeichenstiftes fest und beginnt einen neuen Pfad oder Unterpfad.	Legt die Position des Zeichenstiftes fest, x für waagerecht und y für senkrecht. Es folgt mindestens ein Koordinatenpaar, bei mehreren wird ein Linienzug mit geraden Verbindungslinien angenommen.
L, l	(x y)+	Zeichnet eine gerade Linie	Zeichnet eine gerade Linie von der aktuellen Position zu den angegebenen (x,y) Koordinaten, welche die neue Position festlegen. Weitere Koordinatenpaare können angegeben werden, das ergibt dann einen Linienzug.
H, h	x+	Zeichnet eine horizontale Linie	Zeichnet eine horizontale Linie von der aktuellen Position, die vertikale Position bleibt gleich. Weitere Koordinaten führen wieder zu einem Linienzug.
V, v	y+	Zeichnet eine vertikale Linie	Zeichnet eine vertikale Linie von der aktuellen Position, die horizontale Position bleibt gleich. Weitere Koordinaten führen wieder zu einem Linienzug.
C, c	(x1 y1 x2 y2 x y)+	Zeichnet eine kubische Bézierkurve	Zeichnet eine kubische Bézierkurve von der aktuellen Position nach (x,y) unter der Verwendung von (x1,y1) als dem Kontrollpunkt am Anfang der Kurve und (x2,y2) als dem Kontrollpunkt am Ende der Kurve. Angabe von weiteren Kontrollpunkten und Punkten führt zu einem Kurvenzug. Die Anzahl der (Kontroll-)Punkte muss immer exakt stimmen. Funktionsprinzip einer kubischen Bézierkurve
S, s	(x2 y2 x y)+	Kurzversion zur Fortsetzung einer kubischen Bézierkurve.	Aus dem letzten Kontrollpunkt und Punkt des vorherigen kubischen Bézierkurvensegmentes wird eine stetig differenzierbare Fortsetzung des Pfades berechnet. Ist das vorherige Segment keine kubische Bézierkurve, so wird der fehlende Kontrollpunkt als identisch mit dem Ausgangspunkt angenommen. Angabe von weiteren Kontrollpunkten und Punkten führt zu einem Kurvenzug. Die Anzahl der (Kontroll-)Punkte muss immer exakt stimmen.
Q, q	(x1 y1 x y)+	Zeichnet eine quadratische Bézierkurve	Zeichnet eine quadratische Bézierkurve von der aktuellen Position nach (x,y) unter Verwendung von (x1,y1) als Kontrollpunkt. Angabe von weiteren Kontrollpunkten und Punkten führt zu einem Kurvenzug. Die Anzahl der (Kontroll-)Punkte muss immer exakt stimmen. Funktionsprinzip einer quadratischen Bézierkurve
T, t	(x y)+	Kurzversion zur Fortsetzung einer quadratischen Bézierkurve	Aus dem letzten Kontrollpunkt und Punkt des vorherigen quadratischen Bézierkurvensegmentes wird eine stetig differenzierbare Fortsetzung des Pfades berechnet. Ist das vorherige Segment keine quadratische Bézierkurve, so wird der fehlende Kontrollpunkt als identisch mit dem Ausgangspunkt angenommen. Angabe von weiteren Kontrollpunkten und Punkten führt zu einem Kurvenzug.
A, a	(rx ry x-axis-rotation large-arc-flag sweep-flag x y)+	Zeichnet einen Ellipsenbogen	Zeichnet einen elliptischen Kreisbogen von der aktuellen Position nach (x, y). Die Größe und die Ausrichtung der Ellipse werden bestimmt durch zwei Radien (rx, ry) und einer X-Achsen-Rotation, die bestimmt, wie die gesamte Ellipse relativ zum Koordinatensystem gedreht wird. Da es dann noch die Möglichkeit gibt, wie herum der Bogen gemalt wird und ob ein kleiner oder großer Bogen gemalt wird, gibt es auch noch Boolesche Parameter large-arc-flag sweep-flag. Die Werte sind 0 oder 1. large-arc-flag 1 bewirkt, dass der große Bogen gemalt wird, der Wert 0 entspricht dem kleinen Bogen. sweep-flag 1 entspricht einer positiven Malrichtung, 0 einer negativen. Im Bedarfsfalle, wenn es keinen Ellipsenbogen gibt, der nach den Angaben Anfangs- und Endpunkt verbindet, werden die Angaben vom Darstellungsprogramm umskaliert. Das Kommando ist in den tiny-Profilen nicht verfügbar. Hinsichtlich der (kontinuierlichen) Animation ist bei diesem Kommando bei diversen Darstellungsprogrammen mit Problemen zu rechnen, wobei das korrekte Verhalten auch nicht unbedingt dem entsprechen mag, was viele Autoren intuitiv erwarten werden.
Z, z	(keine)	Schließt den (Unter-)Pfad ab	Zeichnet eine Linie von der aktuellen Position zur ersten Koordinate des aktuellen (Unter-)Pfades.

W3C path Referenz

Die Trennung der Zahlen im Attribut voneinander kann auf verschiedene Weise stattfinden. Einige sehr kompakte Notationen, die in der Spezifikation erlaubt sind, können noch ein paar Bytes sparen, werden aber am ehesten kleine Implementierungsprobleme in Darstellungsprogrammen aufdecken. Sofern der Autor nicht daran interessiert ist, Implementierungsprobleme zu finden, empfiehlt es sich, Zahlen mit Leerzeichen zu separieren. Alternativ kann auch ein Komma mit optionalen Leerzeichen davor und danach verwendet werden. Es kann sich also anbieten, die beiden Zahlen eines Koordinatenpaares mit Komma zu trennen und die Koordinatenpaare voneinander mit Leerzeichen oder umgedreht. Das verbessert die Lesbarkeit des Quelltextes und gegebenenfalls das Lokalisieren von Stellen, wo der Autor etwas ändern möchte. Zwischen Kommandos und Zahlen brauchen keine Leerzeichen gesetzt werden und ein Komma wäre dort falsch. Zeilenumbrüche statt Leerzeichen sind auch in Ordnung und können ebenfalls die Lesbarkeit des Quelltextes verbessern.

Insbesondere bei umfangreicheren Pfadangaben kann es für die gesamte Dateigröße entscheidend sein, wie geschickt oder ungeschickt die Pfaddaten notiert werden. Sind in einem Pfad aufeinanderfolgende Punkte auch räumlich benachbart, so sind meist relative Angabe mit kleinen Kommandos effektiver als absolute Angaben. Auch die Anzahl der angegebenen Stellen bei einer Zahl ist relevant sowohl für die Genauigkeit bei Skalierung als auch für die Dateigröße. Wenn drei statt sechs gültige Ziffern ausreichen, um die graphische Information zu vermitteln, kann das bei großen Pfaden eine Reduktion der Dateigröße um die Hälfte ausmachen. Entsprechend kann es sich lohnen, das Koordinatensystem so zu wählen, dass die meisten Koordinaten zum Beispiel zwischen 0 und 999 liegen. Mittels viewBox oder Transformationen von Gruppen kann dann dies Koordinatensystem an den gewünschten Anzeigebereich angepasst werden.

Als Sonderfall ist ein (Unter-)Pfad anzusehen, der keine Ausdehnung hat, etwa d="M0 0l0 0". Ein solcher ist darzustellen, wenn das Präsentationsattribut stroke-linecap nicht 'butt' ist. Die Darstellung besteht dann nur aus den Linienenden.

Angaben wie d="M100,100m 100,-100m-100,-100l400,400" sind ebenfalls möglich, der Startpunkt wird dann jeweils verschoben, bis etwas gemalt werden soll, also hier das Kommando l folgt.

Zur Animation des Attributes d:
Aufgrund der Struktur des Attributwertes ist d nicht additiv und eine Animation mit calcMode paced ist nicht sinnvoll. Ferner müssen die Animationswerte für d immer exakt dieselbe Abfolge von Kommandos haben und pro Kommando muss die Anzahl der angegebenen Koordinaten und Parameter gleich bleiben. Bei SVG tiny 1.2 können ferner bei verschiedenen Animationswerten große und kleine Kommandos variiert werden, weil die kleinen Kommandos vor der Animation vom Darstellungsprogramm in große umzurechnen sind. Ferner kann bei SVG tiny 1.2 bei einer diskreten Animation der Pfad in jedem Animationswert anders aufgebaut sein und unterliegt nicht den Beschränkungen von SVG 1.1.

Attribut pathLength


SVG
1.1	-	9	-	-	-	?	?	?

BeispielpathLength: kubische Pfade als Kreisnäherung mit gestricheltem Rand

pathLength gibt an, welche Pfadlänge der Autor für den angegebenen Pfad berechnet hat. Der Wert ist eine (positive) Zahl für die Pfadlänge in lokalen Einheiten. Ein negativer Wert ist in SVG 1.1 ein Fehler, der zum Abbruch der Darstellung führt, in SVG tiny 1.2 wird in dem Falle nur das Attribut ignoriert.

Das Attribut ist animierbar.

Die explizite Berechnung der Pfadlänge ist teilweise für einige Pfadsegmente nur numerisch möglich, weswegen es da Abweichungen zwischen den Ergebnissen des Autors und dem jeweils verwendeten Darstellungsprogramm geben kann. Das Darstellungsprogramm sollte dann die Darstellung zum Beispiel von gestrichelten Linien entlang des Pfades entsprechend anpassen. Nachvollziehbar ist dies zum Beispiel mit Opera.

Beispiel:
kubische Pfade als Kreisnäherung mit gestricheltem Rand
Mit kubischen Pfaden werden ineinanderliegende Kreise angenähert. Zumindest im tiny-Profil lässt sich die Figur mit einem Pfad nicht besser realisieren, weil es da keine elliptischen Pfadsegmente gibt. Für exakte Kreise wäre die Pfadlänge exakt bekannt, hier 1500π.
Aufgrund der kubischen Beispiele stimmt dies sowieso nicht ganz genau, für das Beispiel wird das großzügig auf 4500 abgerundet, das weicht nur um weniger als 5 Prozent vom richtigen Wert ab.
Besser wäre offenbar 4712.4 als Schätzung. Jenseits von Demonstrationsbeispielen ist es für Autoren immer ratsam, möglichst präzise zu schätzen.

Aufgrund der Verhältnisse der Durchmesser 8:4:2:1 der genäherten Kreise ergibt sich für das Muster von stroke-dasharray ein schönes Muster mit dem Wert 50 (oder eben genauer 50π/3), bei dem wird der Strich des kleinsten Kreises gerade in drei gleichgroße gemalte und 3 weitere ebenso große nicht gemalte Teile zerlegt, die Striche der größeren Kreise werden entsprechend der Verhältnisse der Durchmesser in mehr gleichgroße Teile zerlegt.

Zum Vergleich wird darunterliegend der gleiche Pfad ohne das Attribut verwendet und ein entsprechend optimierter Wert für stroke-dasharray verwendet. Dort ist das Strichmuster rot. Wird davon etwas sichtbar, hat das Darstellungsprogramm offenbar einen Fehler.

Opera hat einen für viele Versionen bekannten Fehler für stroke-dasharray und geschlossene Unterpfade. Der wird hier kompensiert durch das Anhängen des Anfangspunktes des Pfades mit einem M-Kommando, dies hat keinen Einfluss auf die korrekte Darstellung, kompensiert aber den Opera-Fehler.

Kurven mit speziellen Programmen erzeugen

Nun sind vermutlich nur wenige Autoren bereit und motiviert, kompliziertere Kurven per Hand mit einem Texteditor einzutippen.

Stattdessen bieten sich Programme wie Inkscape an. Diese haben eine graphische Nutzeroberfläche und weitere Hilfen, um mit einem Zeigergerät wie einer Maus oder auch einer Kombination aus elektronischem Stift und einem Tablett Pfade zu malen. Obwohl solche Programme recht nützlich sind, bleibt es dem Autor meist nicht erspart, nach der Erstellung eines Dokumentes den Quelltext gründlich aufzuräumen. Das reduziert nicht nur meist dramatisch die Dateigröße, sondern verbessert auch die Zugänglichkeit. Offen bleibt dabei die Frage, warum solche Programme dem Autor nicht gleich dabei helfen, zugängliche Dokumente zu erstellen und zu optimieren.

'Hallo Welt!' mit Inkscape als Kalligraphie

Beispiel: 'Hallo Welt!' mit Inkscape als Kalligraphie.

Nachdem das Dokument mit Inkscape erstellt wurde, wurde dies nicht als 'Inkscape-Dokument', sondern als schlichtes SVG-Dokument abgespeichert. Dann wurden die Pfade um die unnötigen Nachkommastellen bereinigt, style-Attribute entsorgt, title und desc ergänzt, die Version von 1.0 auf 1.1 hochgesetzt, das Profil tiny angegeben, ein Rechteck als Hintergrund gesetzt.

Eine weitere Methode besteht darin, eine geeignete Pixelgraphik, etwa das Bild einer Digitalkamera in Pfade zu konvertieren. Dazu dienen zum Beispiel Programme wie Potrace. Potrace läuft als eigenständiges Programm, ist aber auch in Inkscape verfügbar. Eine solche Konversion wird auch Vektorisierung genannt.

Ein erfolgversprechendes Vorgehen bei der Vektorisierung besteht im ersten Schritt darin, ein geeignetes Bild auszuwählen. Dieses sollte aus einem eindeutigen Hauptmotiv bestehen und möglichst einheitlichem Hintergrund. Hoher Kontrast ist ebenfalls von Vorteil. In einem zweiten Schritt kann dieses Bild mit einem Programm wie Gimp manipuliert werden, also störende Details und unregelmäßigen Hintergrund entfernen, gegebenenfalls Kontrast erhöhen. Im dritten Schritt wird mit Potrace die Vektorisierung vorgenommen, wobei zwischen mehreren Strategien gewählt werden kann: Vektorisierung nach Farbe, Kontrast, Anzahl der verschiedenen Farbschichten, aufeinander gestapelt oder unabhängig voneinander etc. Was davon sinnvoll ist, hängt vom Bild ab, aber natürlich auch davon, was der Autor erreichen will.

Zum Beispiel mit Inkscape kann nun das Resultat weiter bearbeitet werden, Pfade können automatisch vereinfacht werden. Die Vereinfachung besteht darin, die Anzahl der Punkte und Kontrollpunkte zu reduzieren und ihre Werte so zu manipulieren, dass ein einfacherer, glatterer Umriss entsteht. Es gibt auch Hilfen, mit denen manuell Punkte und Kontrollpunkte verändert und manipuliert werden können.

Ist das Ergebnis dann zufriedenstellend, kann dies als einfache SVG-Datei abgespeichert werden. Mit einem kurzen Blick in den Quelltext und auf die Dateigröße wird offenbar, dass ein solches Ergebnis aufgrund der Dateigröße nicht besonders brauchbar ist und die Genauigkeit der Pfadangaben deutlich zu hoch für die gewünschte Anwendung ist. Zudem hat Inkscape die unangenehme Angewohnheit, Eigenschaften im Attribut style abzulegen, statt in Präsentationsattributen, was für einfachere Darstellungsprogramme, die auf SVG tiny ausgelegt sind, eine Zugänglichkeitsbarriere darstellt.

Der nächste Schritt besteht also darin aufzuräumen. Dies kann rein manuell mit einem Texteditor geschehen. Effektiver ist es natürlich, sich dafür ein entsprechendes Programm oder Skript zu schreiben, welches die Genauigkeit der Angaben reduziert und Eigenschaften in Präsentationsattribute konvertiert, gegebenenfalls auch nur die Pfade zur Weiterverwendung extrahiert. Je nach Motiv, Inhalt, Geschick und Zielrichtung lässt sich die Dateigröße so meist auf einige Prozent bis schlimmstenfalls fünfzig Prozent reduzieren. Jeff Schiller bietet etwa das Skript 'scour' an, welches zum Beispiel Dateien von Inkscape ordentlich aufräumt, allerdings die Pfade nicht rundet oder vereinfacht.

Vogel

Beispiel: Vogel.

Die Abstrahierung des Motivs oder die Optimierung ist bei diesem Motiv nur so weit fortgeschritten, dass noch deutlich die Vorgehensweise von Potrace bei der Vekorisierung an der Art der Kurven zu erkennen ist. Potrace erkennt nicht das Motiv selbst, sondern wählt nach Grauwerten oder hier Farben aus, vereinfacht und umrandet gleichartige Gebiete mit jeweils einem Kurvenzug. Das Programm versteht also nicht, was aus menschlicher Sicht wichtig oder relevant ist, daher sind die erzeugten Pfade oft nicht direkt mit dem zu vergleichen, was ein Mensch als Struktur erkennen und malen würde. Bei einer weiteren Optimierung oder Abstrahierung müsste so vorgegangen werden, dass die Pfade wirklich Bestandteilen des Motivs zugeordnet werden, die von Menschen als relevant angesehen werden. Dies entspricht also einem weiteren Aufspalten von Unterpfaden in selbständige Pfade, eventuell dann weitere Vereinfachungen, an einigen Stellen auch Präzisierungen und Anpassungen der Kurvenform.

Eine weitere Methode der Vektorisierung besteht darin, das Bild der Digitalkamera in ein Programm wie Inkscape zu laden und dann mit diesem das Motiv nachzumalen, also als Hilfe und Vorlage zu verwenden. Das hat den Vorteil, dass der Mensch die relevanten Strukturen besser erkennen und nach Relevanz betonen kann, um die mit der Vektorisierung einhergehende Abstrahierung des Motivs gezielt nach eigenem Verständnis zu gestalten.

Für diverse Probleme ist es natürlich effektiver, gleich selbst ein Programm oder Skript zu schreiben, um die gewünschten Pfade in einer sinnvollen Genauigkeit zu erzeugen. Dazu ist es dann notwendig, einiges Hintergrundwissen über die in SVG verwendeten Pfade zu haben. Darum geht es im nächsten Abschnitt.

Pfadkommandos im Detail

Veranschaulichung der Interpolation einer Geraden oder linearen Bézierkurve.

Veranschaulichung der Interpolation einer quadratischen Bézierkurve.

Veranschaulichung der Interpolation einer kubischen Bézierkurve.

In obiger Kurzbeschreibung ist ja bereits zu lesen, wozu die jeweiligen Pfadkommandos dienen. Um dies wirklich effektiv in eigenen Skripten und Programmen nutzen zu können, lohnt sich ein genauerer Blick auf die Syntax und die Mathematik, welche die Kurvenstücke beschreiben.

Neben den einfachen geraden Linien gibt es auch gekrümmte Kurven, nach Pierre Étienne Bézier (1910/1999) benannt, der diese Art von Kurven, beziehungsweise deren Parametrisierung erstmals beschrieb. Eine Gerade ist auch eine Bézierkurve, eine lineare, weil in der Parametrisierung der Laufparameter nur linear oder affin eingeht. Entsprechend geht bei einer quadratischen Kurve der Laufparameter auch noch quadratisch ein, bei einer kubisch auch noch kubisch. Es gibt auch noch Bézierkurven höherer Ordnung, für diese gibt es in SVG allerdings keine Pfadkommandos. Die gekrümmten Kurvensegmente haben neben Anfangs- und Endpunkt noch ein (quadratisch) oder zwei (kubisch) Kontrollpunkte, welche bestimmen, wie die Kurve vom Anfangs- zum Endpunkt verläuft.

Die genaue Parametrisierung ist im jeweiligen Unterabschnitt für das jeweilige Pfadkommando angegeben. Die animierten SVGs zeigen eine Veranschaulichung, wie die Kurven aus Hilfslinien entstehen (oben in der tabellarischen Kurzfassung der Kommandos gibt es für quadratische und kubisch Kurven ähnliche, im Format image/gif umgesetzte Animationen). Die Konstruktion einer Kurve erfolgt hierbei mittels einiger Hilfslinien. Üblicherweise werden die Punkte P(i) genannt, mit i einer Zahl, 0 für den Anfangspunkt, dann folgen gegebenenfalls die Kontrollpunkte, als letztes der Endpunkt. Bei einer Parametrisierung der beteiligten Kurven sei s der Laufparameter von 0 bis 1.

Konstruktion einer quadratischen Kurve:
Eine Hilfslinie entsteht, indem die Position s der Verbindungslinie von P(0) nach P(1) mit der Position s der Verbindungslinie von P(1) nach P(2) verbunden wird. Auf dieser Hilfslinie ist der zu s gehörige Punkt der quadratischen Kurve dann die zu s gehörige Position auf der Hilfslinie.

Konstruktion einer kubischen Kurve:
Eine Hilfslinie H entsteht, indem die Position s der Verbindungslinie von P(0) nach P(1) mit der Position s der Verbindungslinie von P(1) nach P(2) verbunden wird. Eine weitere Hilfslinie I entsteht, indem die Position s der Verbindungslinie von P(1) nach P(2) mit der Position s der Verbindungslinie von P(2) nach P(3) verbunden wird. Eine weitere Hilfslinie J entsteht, indem die Position s auf I mit der Position t auf J verbunden wird.

Die s-Positionen auf I und J bilden quadratische Kurven. Auf der Hilfslinie J ist der zu s gehörige Punkt der kubischen Kurve dann die zu s gehörige Position auf der Hilfslinie J.

Direktes ineinander Einsetzen ergibt dann übrigens auch die bei den jeweiligen Pfadkommandos angegebene Formel zur Parametrisierung der jeweiligen Kurve. Es ist also nicht unbedingt notwendig, die Konstruktion mit Hilfslinien auszuführen. Traditionell gibt es allerdings für Rechner effektive Verfahren gerade Linien zu malen. Zusammen mit dem weiter unten erläuterten Algorithmus nach De Casteljau ergibt sich so auch die Möglichkeit, eine gekrümmte Kurve durch viele Gerade effektiv anzunähern.

Eine Parametrisierung eines Kurvensegmentes ist auch hilfreich, um das Kurvensegment zu analysieren, Fortsetzungen ohne Knick zu bestimmen, Markierungen anzubringen oder gegebenenfalls andere Kurven zu berechnen, die diese unter einem definierten Winkel schneiden. Es gibt viele weitere Anwendungen, die eine mathematische Herangehensweise erfordern, um zügig ein korrektes Ergebnis zu erhalten. Generell gilt, dass es für dasselbe Kurvensegment nicht nur eine Parametrisierung gibt, sondern viele. Für gerade, quadratische und kubische Kurvensegmente werden die üblichen Parametrisierungen nach Bézier gewählt. Die Darstellung ist unabhängig von der Parametrisierung, solange diese nicht zum Beispiel innerhalb derselben Animation gewechselt wird. Eine Richtungsinformation ist hilfreich, wenn ein Kurvensegment durch ein weiteres ohne Knick fortgesetzt werden soll (stetig differenzierbare Fortsetzung). Interessant ist dies auch, wenn an beliebiger Stelle eine Richtungsmarkierung wie ein Pfeil angebracht werden soll, ebenso, wenn nach einem Pfadsegment gesucht werden, das ein vorgegebenes unter einem bestimmten Winkel schneiden soll. Die Richtung ergibt sich im Regelfall aus der Ableitung der Parametrisierung, wie sich die Krümmung des Kurvensegmentes aus der zweiten Ableitung ergibt.

Eine Linie in Richtung der Linie beim Punkt P ergibt sich aus der Ableitung A als Linie von P nach P + c A mit c größer als 0. Eine senkrechte Linie ergibt sich durch Vertauschung der Komponenten von A und einem Vorzeichenwechsel einer der Komponenten.

Bei Parametrisierungen kann es auch an der Parametrisierung selbst liegen, wenn die Ableitung 0 wird, in solchen Fällen kann die zweite Ableitung verwendet werden, um die Richtung zu bestimmen (Regel von L'Hospital). Dieses Problem tritt bei Bézierkurven auf, wenn ein Kontrollpunkt mit dem zugehörigen Anfangs- beziehungsweise Endpunkt zusammenfällt. Statt die Regel von L'Hospital nun jedes Mal explizit anzuwenden, gilt für Bézierkurven: Sofern nicht alle Punkte zusammenfallen, ergibt sich dann die Richtung aus der Richtung zum nächsten (Kontroll-)Punkt des gleichen Segmentes, welches vom aktuellen verschieden ist.

Pfad oder Unterpfad beginnen: M, m

Pfad mit Unterpfaden, nur mit M, m konstruiert

Pfade mit und ohne Unterpfade, gleichsinnige und gegensinnige Umläufe

Mit den Kommandos 'M' oder 'm' beginnt jedes Pfadkommando. Da es keine früheren Pfaddaten gibt, bezieht sich das relative Kommando 'm' einfach auf den aktuellen Ursprung. Darauf folgt mindestens ein Koordinatenpaar, welches angibt, wo der Pfad beginnt. Im weiteren Verlauf können neben anderen Kommandos auch weitere Kommandos 'M' oder 'm' in einem Pfad auftauchen. Die bedeutet dann, dass der vorherige Unterpfad beendet ist und ein neuer Unterpfad an der Stelle begonnen wird, die durch das folgende Koordinatenpaar angegeben ist.

Folgen auf 'M' oder 'm' mehrere Koordinatenpaare, so werden die in der angegebenen Reihenfolge zu einem Linienzug verbunden. Gibt es nur einen Pfad ohne weitere Unterpfade, so entspricht das dem Element polyline, welches dann zu bevorzugen ist.

Beispiel:

<path fill="none" stroke="#ff0"
d="M0,0 200,0 200,20 10,20
M190,10 0,10 0,40 190,40
m-180,-10 190,0 0,30 -190,0
m180,-10 -190,0 0,30 190,0
m-180,-10 190,0 0,30 -190,0
m180,-10 -190,0 0,30 190,0
m-180,-10 190,0 0,30 -190,0
m180,-10 -190,0 0,30 190,0
m-180,-10 190,0 0,30 -190,0
m180,-10 -190,0 0,20 200,0
M-10,0 -10,190 M210,190 210,0" />

Pfad mit Unterpfaden, nur mit M, m konstruiert.

Schon bereits ein weiterer Unterpfad macht einen Unterschied. Bei Überschneidungen kann das Resulat ein anderes sein als das von zwei Pfaden oder Formen.

Beispiel: Pfade mit und ohne Unterpfade, gleichsinnige und gegensinnige Umläufe.

Pfade der Länge 0

Pfade der Länge null werden genau dann gemalt, wenn das Präsentationsattribut stroke-linecap auf 'round' oder 'square' steht (dies kann in den Implementierungsanmerkungen der SVG-Spezifikationen nachgelesen werden). Für den Wert 'butt' wird nichts dargestellt. Für 'round' wird ein Kreis mit einem Durchmesser der stroke-width dargestellt. Für 'square' wird ein Quadrat mit der Kantenlänge der stroke-width dargestellt. Die Kanten des Quadrates sind dann zu den (lokalen) x- und y-Richtungen ausgerichtet.

Dies ermöglicht es, sehr kompakt eine Reihe von 'Punkten' als Kreise oder Quadrate mittels eines Pfades mit Unterpfaden der Länge null zu notieren.

In folgendem Beispiel werden einige mögliche Pfade der Länge 0 ausprobiert. Ist jeweils ein unterliegender roter Kreis zu sehen, ist das verwendete Darstellungsprogramm fehlerhaft.

Beispiel: Pfade der Länge 0.

Pfad oder Unterpfad beenden: Z, z

Pfade mit und ohne Z - Einfluss auf die Darstellung

Fortsetzung von Pfaden hinter dem Kommando Z

Mit dem Kommando 'Z' oder 'z' (was dasselbe bewirkt und keine weiteren folgenden Koordinaten oder Parameter erwartet) wird eine gerade Linie zurück zum Anfangspunkt eines Unterpfades gezogen und somit der Unterpfad geschlossen. Der Anfangspunkt ist gegeben durch das Koordinatenpaar, welches auf das vorherige Kommando 'M' oder 'm' folgt. Sofern auf ein 'Z' oder 'z' kein weiteres 'M' oder 'm' folgt, sondern anderes Kommando, so ist folglich die aktuelle Position die des Anfangspunktes gegeben durch das Koordinatenpaar, welches auf das vorherige Kommando 'M' oder 'm' folgt. Die graphische Repräsentation eines geschlossenen Pfades kann sich leicht von der unterscheiden, die sich ergibt, wenn einfach der Endpunkt gleich dem Anfangspunkt explizit angegeben wird. Das hängt mit den Präsentationsattributen stroke-linecap und stroke-linejoin zusammen. Ein mit 'Z' oder 'z' geschlossener Unterpfad hat keine Linienenden, die Kurvensegmente sind zusammengefügt. Ohne dieses Kommando hat es Linienenden. Es wird also jeweils das andere Attribut verwendet.

Pfade mit und ohne Z - Einfluss auf die Darstellung.

Nach einem Kommando z kann auch ein anderes Kommando als M oder m folgen. In folgendem Beispiel folgt ein L. Folglich geht der Pfad am Anfangspunkt weiter. Hier ist eine Spielerei mit diskreter Drehsymmetrie dargestellt, der wiederholt genutzte Anfangspunkt liegt im Drehzentrum bei 0.

Fortsetzung von Pfaden hinter dem Kommando Z.

Gerade Linienstücke: L, l, H, h, V, v

Sudoku-Spielfeld - kompakte Darstellung mit 'H', 'h', 'V', 'v'

Spielerei mit Unterpfaden, bestehend aus Quadraten - Beispiel für Kommandos 'L' und 'l'

Mit den Kommandos 'L', 'l', 'H', 'h', 'V', 'v' können gerade Pfadsegmente angegeben werden, mit 'H', 'h' horizontale Linien, mit 'V', 'v' vertikale Linien, indem jeweils die horizontale beziehungsweise vertikale Koordinate des Endpunkts angegeben wird. Mit 'L', 'l' werden Anfangs- und Endpunkt mit einer Linie verbunden.

Eine Parametrisierung ist für ein gerades Pfadsegment recht einfach. Seien Anfangs- und Endpunkt P(0) und P(1), sei der Laufparameter s aus [0,1], so gilt für eine lineare Bézierkurve

k(s) = (1 - s)P(0) + sP(1)
mit der Ableitung
dk(s)/ds = P(1) - P(0)
und der zweiten Ableitung
d²k(s)/ds² = 0

Sudoku-Spielfeld - kompakte Darstellung mit 'H', 'h', 'V', 'v'.

Spielerei mit Unterpfaden, bestehend aus Quadraten - Beispiel für Kommandos 'L' und 'l'.

Als kleine Übung sei nun noch die Frage betrachtet, wie zwei gerade Pfadsegmente so zu verlängern sind, dass sie als ein Kurvenzug dargestellt werden können. Das läuft darauf hinaus, erst mal den Schnittpunkt von zwei Geraden zu finden.

Sei die erste Gerade K(t) gegeben durch die nicht gleichen Punkte P und Q mit dem Parameter t in der Form:
K(t) = (1-t) Q + t P = Q + (P - Q) t = Q + R t mit R = P - Q
Sei die zweite Gerade L(s) gegeben durch die nicht gleichen Punkte U und S mit dem Parameter s in der Form:
L(s) = (1-s) S + s U = S + (U - S) s = S + T s mit T = U - S

Um den Schnittpunkt zweier Geraden (in der Ebene) zu finden, wird zunächst geprüft, ob es einen solchen Schnittpunkt überhaupt gibt. Das ist der Fall, wenn sie nicht parallel sind, wenn also T und R nicht parallel sind. Mit einer Bezeichnung der Komponenten in x- und y-Richtung entsprechend sind R und T parallel, wenn Tx Ry - Ty Rx = 0 ist. Dann gibt es also keinen Schnittpunkt.

Sonst ist der Schnittpunkt V der beiden Geraden gegeben durch:
(Q - S) #R /(T #R) = s
beziehungsweise
(S - Q) #T /(R #T) = t
V = Q + R t = S + T s

Dabei sind #R = (Ry, -Rx) und #T = (Ty, -Tx) senkrecht zu R beziehungsweise T.

Sind s und t größer oder gleich 1, so ergibt Q P V S U den Kurvenzug oder auch einfacher Q V U. Sind s und t kleiner oder gleich 0, so sind die Punkte in anderer Reihenfolge zu notieren: P Q V U S oder auch einfacher P V S. Ist nur einer der Werte kleiner oder gleich 0, der andere größer oder gleich 1, so sind nur für den mit einem Wert kleiner oder gleich 0 die beiden Punkte in der Reihenfolge zu vertauschen. In den anderen Fällen liegt der Schnittpunkt auf mindestens einem der beiden Kurvensegmente und der Linienzug ist anders zu malen, zum Beispiel mit zwei Unterpfaden, entsprechend der parallele Fall.

Diese Betrachtung kann im Folgenden noch nützlich sein, wenn für zwei Pfade ein quadratisches Kurvensegment gesucht wird, mit dem die beiden Pfade ohne Knick verbunden werden sollen. Der Kontrollpunkt entspricht dann dem Punkt V, wenn s und t größer oder gleich 1 sind. Da bei vorgegebener Richtung der Pfade eine Vertauschen nicht möglich ist, stellt sich damit bereits heraus, dass es viele Fälle gibt, wo mehr als ein quadratisches Kurvensegment gebraucht wird, um zwei Pfade ohne Knick miteinander zu verbinden.

Quadratische Kurvenstücke: Q, q, T, t

Fortsetzungen eines quadratischen Pfades ohne Knicke, Kommando T

Fortsetzungen eines quadratischen Pfades ohne Knicke, Kommando t

Nichtlokalität von Kontrollpunkten in QT-Pfaden

Kurvensegmente mit quadratischem Pfad verbinden

Mittels 'Q', 'q', 'T', 't' werden quadratische Kurvensegmente angegeben. Der Kontrollpunkt gibt jeweils an, in welche Richtungen der Pfad am Anfangs- und Endpunkt geht. Die Verhältnisse der Entfernungen zwischen den Punkten haben Einfluss auf den sonstigen Kurvenverlauf.

Seien Anfangs- und Endpunkt P(0) und P(2) und der Kontrollpunkt P(1), sei der Laufparameter s aus [0,1], so gilt für eine quadratische Bézierkurve:

k(s) = (1 - s)²P(0) + 2s(1-s)P(1) + s²P(2)

Und für die Ableitungen nach s gilt folglich:
dk(s)/ds = 2(s-1) P(0) + 2(1 -2s) P(1) + 2s P(2)
oder in der Parametrisierung einer linearen Bézierkurve
dk(s)/ds = (1-s) (2P(1) - 2P(0)) + s (2P(2) - 2P(1))
mit der zweiten Ableitung
d²k(s)/ds² = 2P(0) + 2P(2) - 4P(1).

Weil P(0) = k(s=0) der Anfangspunkt ist und P(2) = k(s=1) der Endpunkt, ist somit
dk(0)/ds = -2 P(0) + 2P(1)
dk(1)/ds = -2 P(1) + 2P(2)
also:
P(1) = P(2) - dk(1)/ds/2 = P(0) + dk(0)/ds/2

Mit den Kommandos 'T' und 't' erfolgt eine automatische Fortsetzung eines vorherigen quadratischen Pfadsegmentes, welche stetig differenzierbar ist, also keinen Knick an der Verbindungsstelle aufweist. Es gibt allerdings beliebig viele solcher Fortsetzungen, in SVG ist nur eine davon automatisch verfügbar, andere sind manuell zu berechnen und mit weiteren Kommandos 'Q' oder 'q' zu notieren.

Dazu wird wie angegeben die Ableitung am Endpunkt verwendet:
A = dk(1)/ds = -2 P(1) + 2P(2)
Die stetig differenzierbare Fortsetzung ist mit einer positiven Zahl a:
P(1, neu) = P(2, alt) + a A/2, beziehungsweise mit relativen Koordinaten p(1, neu) = a A/2
Das T-Kommando entspricht a = 1.
'alt' und 'neu' stehen hier für das alte Kurvenstück und das neue, also der gewünschten Fortsetzung.

Beispiel: Fortsetzungen eines quadratischen Pfades ohne Knicke, Kommando T.
Beispiel: Fortsetzungen eines quadratischen Pfades ohne Knicke, Kommando t.

Bei einem quadratischen Pfad, der mit dem Kommando T oder t fortgesetzt wird, ist die Wirkung eines Kontrollpunktes in dem Sinne nicht lokal, als die Änderung des Kontrollpunktes des anfänglichen Q oder q den gesamten Verlauf des Pfades ändert.

In folgendem Beispiel ist zu sehen, wie mit leicht variiertem Kontrollpunkt zu Beginn des Pfades der gesamte Pfad geändert wird. Der jeweilige Kontrollpunkt ist als Kreis dargestellt, mit der gleichen Farbe gefüllt wie der zugehörige Pfad gemalt ist.

Beispiel: Nichtlokalität von Kontrollpunkten in QT-Pfaden.

Daher eignen sich quadratische Bézierkurven eher schlecht, um andere Kurven zu approximieren oder zwischen einzelnen Datenpunkten zu interpolieren oder auch zu extrapolieren. Für solche Anwendungen sind kubische Bézierkurven viel besser geeignet, weil sie wegen des zusätzlichen Kontrollpunktes viel flexibler zu handhaben sind und Änderungen an Kontrollpunkten nur in der Nähe des Kontrollpunktes Auswirkungen haben.

Wie im Abschnitt über gerade Kurvensegmente schon angesprochen, kann in einigen Fällen ein quadratisches Pfadsegment verwendet werden, um zwei Kurvenfragmente ohne Knick miteinander zu verbinden, wenn die Richtungen der Ableitungen an den zu verbindenden Enden geeignet ausgerichtet sind.

Beispiel: Kurvensegmente mit quadratischem Pfad verbinden.

Verwendet wird obige Lösung des Problems, den Schnittpunkt zweier Geraden zu finden. Die Richtung der Geraden wird jeweils bestimmt durch die Richtung der Ableitungen an den zu verbindenden Enden, beziehungsweise dort die Richtungen vom Endpunkt zum zugehörigen Kontrollpunkt (oder Anfangspunkt, je nach Typ des Segmentes). Der quadratische Kurvenzug ist grün dargestellt. Die Richtungen der zufällig vorgegebenen Kurvensegmente sind blau dargestellt. Mit Kreisen wird jeweils dargestellt, wo der Kontrollpunkt ist (rosa) oder wo die jeweiligen Pfade beginnen. Hellgrün ist zum Vergleich der Kurvenzug mit automatisch bestimmten Kontrollpunkten bei gleichen Punkten angegeben.

Kubische Kurvenstücke: C, c, S, s

Fortsetzungen eines kubischen Pfades ohne Knicke, Kommando S

Fortsetzungen eines kubischen Pfades ohne Knicke, Kommando s

Fortsetzungen eines kubischen Pfades ohne Knicke, vorne angehängt

Verbindung zweier kubischer Pfade ohne Knicke

'Sonne und Seuche'

Mittels 'C', 'c', 'S', 's' werden kubische Kurvensegmente angegeben. Der erste Kontrollpunkt gibt an, in welche Richtung der Pfad am Anfangspunkt geht. Der zweite Kontrollpunkt gibt an, aus welcher Richtung der Pfad am Endpunkt kommt. Die Verhältnisse der Entfernungen zwischen den Punkten haben Einfluss auf den sonstigen Kurvenverlauf.

Seien Anfangs- und Endpunkt P(0) und P(3) und der erste Kontrollpunkt P(1), der zweite P(2), sei der Laufparameter s aus [0,1], so gilt für eine kubische Bézierkurve:

k(s) = (1 - s)³P(0) + 3s(1-s)²P(1) + 3s²(1-s)P(2) + s³P(3)

Die Ableitungen ergeben sich daraus als:
dk(s)/ds = -3(1 - s)²P(0) + 3(1-4s +3s²)P(1) + 3(2s-3s²)P(2) + 3s²P(3)
oder in der Parametrisierung einer quadratischen Bézierkurve
dk(s)/ds = (1 - s)² (3P(1) - 3P(0)) + 2s(1-s) (3P(2) - 3P(1)) + s²(3P(3) - 3P(2))
Die zweite Ableitung ist somit
d²k(s)/ds² = (1-s) (6P(0) - 12P(1) + 6P(2)) + s (6P(3) -12P(2)) + 6P(1))

Speziell gilt an den Endpunkten:
dk(0)/ds = -3P(0) + 3P(1)
dk(1)/ds = -3P(2) + 3P(3)

oder entsprechend umgestellt:
P(1) = P(0) + dk(0)/ds/3
P(2) = P(3) - dk(1)/ds/3

Mit den Kommandos 'S' und 's' erfolgt eine automatische Fortsetzung eines vorherigen kubischen Pfadsegmentes, welche stetig differenzierbar ist, also keinen Knick an der Verbindungsstelle aufweist. Es gibt allerdings beliebig viele solcher Fortsetzungen, in SVG ist nur eine davon automatisch verfügbar, andere sind manuell zu berechnen und mit weiteren Kommandos 'C' oder 'c' zu notieren.

Dazu wird wie angegeben die Ableitung am Endpunkt verwendet:
A = dk(1)/ds = -3P(2) + 3P(3)
Die stetig differenzierbare Fortsetzung ist mit einer positiven Zahl a:
P(1, neu) = P(3, alt) + a A/3, beziehungsweise mit relativen Koordinaten p(1, neu) = a A/3
Das S-Kommando entspricht a = 1.
'alt' und 'neu' stehen hier für das alte Kurvenstück und das neue, also der gewünschten Fortsetzung. P(2, neu) und P(3, neu) können dann natürlich beliebig gewählt werden, um die Kurve fortzusetzen.

Beispiel: Fortsetzungen eines kubischen Pfades ohne Knicke, Kommando S.
Beispiel: Fortsetzungen eines kubischen Pfades ohne Knicke, Kommando s.

Umgekehrt kann es sinnvoll sein, den Pfad nicht hinten, sondern vorne um ein Segment zu verlängern. Dazu wird die Ableitungsformel für den Anfangspunkt verwendet, also:
A = dk(0)/ds = -3P(0) + 3P(1)
Die stetig differenzierbare Fortsetzung ist mit einer positiven Zahl b:
P(2, neu) = P(0, alt) -b A/3, beziehungsweise mit relativen Koordinaten p(2, neu) = -b A/3
P(0, neu) und P(1, neu) können beliebig gewählt werden, die Daten des neuen Kurvensegmentes sind den alten voranzustellen.

Beispiel: Fortsetzungen eines kubischen Pfades ohne Knicke, vorne angehängt.

Mit einem kubischen Pfadsegment können anders als mit einem quadratischen Pfadsegment immer zwei Pfade ohne Knick miteinander verbunden werden, sofern aus den zwei Pfaden jeweils die Richtungen ermittelt werden können. Meistens es reicht dazu, dass wie angegeben die Ableitung bestimmbar ist und diese nicht 0 ist, sonst ergibt sich die Richtung entsprechend aus dem anderen Kontrollpunkt, beziehungsweise aus dem anderen Punkt des vorherigen oder des folgenden Pfadsegmentes. Da eine kubische Kurve zwei Kontrollpunkte hat, können diese also unabhängig voneinander in der Richtung des vorherigen beziehungsweise des folgenden Pfades angegeben werden, so dass dadurch immer zwei Pfade mit einem kubischen Pfadsegment ohne Knick miteinander verbunden werden können. Dabei wird vorgegangen, wie bereits beschrieben für die Fortsetzung eines Pfades ohne Knick in den vorherigen Absätzen. Das legt dann für das einzupassende Element bis auf die Parameter a und b die beiden Kontrollpunkte fest. Anfangs- und Endpunkt sind ja ohnehin bereits durch den vorherigen und den folgenden Pfad festgelegt.

Beispiel: Verbindung zweier kubischer Pfade ohne Knicke.

Gilt es, einen längeren Pfad oder Unterpfad so zu schließen, dass kein Knick entsteht, sind die Formeln für die Ableitungen ebenfalls anwendbar.

Mit den Punkten, beziehungsweise Kontrollpunkten P(i, 0) bis Pn(i, n) für Kurvensegmente 0 bis n ist die Kurve dann offenbar geschlossen, wenn gilt:
P(0,0) = P(3,n)
Und wenn an der Verbindungsstelle von Anfang und Ende kein Knick auftreten soll, ergibt sich aus den Formeln für die Ableitungen
P(2, n) = (1+v) P(0, 0) - v P(1, 0) mit einer positiven Zahl v.
Hier ist v = 1 auch wieder der Fall, der einer automatischen Fortsetzung analog zum Kommando S entspricht.

Alternativ kann auch der Kontrollpunkt zu Beginn des Pfades passend gewählt werden, durch Umstellung ergibt sich:
P(1, 0) = (1+w) P(3, n) - w P(2, n) mit einer positiven Zahl w.

Beispiel: 'Sonne und Seuche'.

Abstrakte Form und Wort/Dialekt-Spielerei. Geschlossene kubische Kurvenzüge ohne Knicke in mehreren, sich überlagernden Unterpfaden (einschließlich einfacher Animationen; Animationen werden dann in einem späteren Kapitel behandelt und müssen an dieser Stelle nicht nachvollzogen werden).
Der Titel ist in mehrfacher Hinsicht doppeldeutig (sonne und seuche - verschiedene Aussprachen oder Dialektformen des Wortes 'solche') und bezieht sich auf die Umlaufrichtungen der Pfade wie auch die daraus resultierenden Typen von Löchern, wenn sich die Pfade überschneiden, was mit einer Animation der Füllregel verdeutlicht wird. Es bezieht sich auch auf die verschiedenen Möglichkeiten, Pfade ohne Knick zu schließen.
Auf Füllregeln wird in einem späteren Kapitel noch eingegangen.
Der Titel kann natürlich auch auf die abstrakten Formen selbst bezogen werden oder eben auf verschiedene Kunstauffassungen, die nebeneinander koexistieren können wie auch Aussprachen von Wörtern oder allgemeiner Dialekte oder die Interpretationen von Kunstwerken. Die im Element desc vorhandene Beschreibung mag weitere Möglichkeiten zur Deutung eröffnen...

Elliptische Bögen: A, a

Pfadkommando A

Pfadkommando a

Mittels 'A' oder 'a' werden elliptische Bögen angegeben. Die Kommandos A und a dürfen nicht in den tiny-Versionen verwendet werden, für diese wären die dann zum Beispiel durch einen Kurvenzug mit kubischen Pfadsegmenten anzunähern.

Beispiele zur Verwendung und zur Bedeutung der Parameter von 'A', beziehungsweise 'a':

Bedeutung der Parameter der Pfadkommandos 'A' und 'a':
A rx ry x-axis-rotation large-arc-flag sweep-flag x y

Der elliptische Bogen startet am aktuellen Punkt und endet bei (x,y), bei a entsprechend relativ zum Anfangspunkt verschoben um(x,y).
rx und ry sind die halben Hauptachsen der Ellipse.
x-axis-rotation bezeichnet den Winkel in Grad, um den die Halbachse rx aus der x-Richtung gedreht wird.

In der Regel gibt es dann noch vier Möglichkeiten, Anfangs- und Endpunkt mit einem elliptischen Bogen zu verbinden. Mit large-arc-flag '1' wird von zwei Bögen jener mit der größeren Bogenlänge gewählt, für '0' der mit der kleineren.

Mit sweep-flag wird die Zeichenrichtung des Bogens gewählt.
Mit '1' wird mit positivem Winkel gedreht (In SVG ist der Winkel zwischen der x-Richtung und der y-Richtung +90 Grad, entsprechend der zwischen der x-Richtung und der negativen y-Richtung -90Grad).
Mit '0' wird mit negativem Winkel gedreht.

Für elliptische Bögen gibt es einige häufig verwendete Parametrisierungen. Die in SVG verwendete Endpunktnotation ist nur praktisch für Pfade, wie sie im Attribut d auftreten. Eine Umrechnung von den üblichen Parametrisierungen in die Endpunktnotation und umgedreht ist im Anhang der Spezifikation verfügbar.

Eine häufige Parametrisierung ist die Zentraldarstellung. Die sieht wie folgt aus:
e(s) = D(φ) (r_X cos(s), r_Y sin(s)) + c
Dabei ist D(φ) eine Drehung um den Winkel φ, r_X und r_X sind die Hauptachsen der Ellipse und c = (c_X, c_Y) der Mittelpunkt der Ellipse. Der Parameter s beginnt beim Startwinkel θ und läuft um den Winkel δ weiter.
Als Ableitung ergibt sich offenbar:
de(s)/ds = D(φ) (- r_X sin(s), r_Y cos(s))
Mittels einer Transformation kann aus e(s) das jeweilige Pfadkommando bestimmt werden.

Für elliptische Bögen gibt es auch Darstellungen in Polarkoordinaten (r, θ=s), etwa
r(s) = p/(1 + e cos(s))
und die Ableitung:
dr(s)/ds = - p e sin(s) / (1 + e cos(s))²
Alternativ kann auch einfach durch Verschieben aus der Zentraldarstellung eine Darstellung gewonnen werden:
r(s) = r_X(1 - e cos(s))
mit der Ableitung:
dr(s)/ds = r_X e sin(s)
wobei für SVG letztlich ohnehin wieder auf kartesische Koordinaten umgerechnet werden muss:
e(s) = r D(φ) (cos(s), sin(s)) + f
und die Ableitung
de(s)/ds = r D(φ) (-sin(s), cos(s)) + dr/ds * D(φ) (cos(s), sin(s))
Dabei ist r_X = p/(1-e²)
r_Y = p/(1-e²)^1/2
Oder
p = r_Y²/r_X
e = (1 - (r_Y/r_X)² )^1/2

In SVG wird die Endpunktnotation verwendet. Um von der Zentraldarstellung in die Endpunktnotation und umgekehrt umzurechnen, dient folgende Betrachtung:

Seien x₁,y₁ die absoluten Koordinaten der aktuellen Pfadposition und x₂,y₂ die der Endposition. Seien r_X und r_Y die halbe große und kleine Hauptachse der Ellipse ('Radien'). Sei φ der Winkel von der x-Achse des aktuellen Koordinatensystems zu r_X. Sei f_A der Parameter für den großen Bogen, 0 falls der Bogen nicht mehr als 180 Grad aufspannt oder 1, wenn der Bogen mehr als 180 Grad aufspannt. Sei f_S der Parameter, welcher die Drehrichtung festlegt, 1 für größer werdende Winkel im Drehsinn von SVG und 0 sonst.

Folgende Regeln gelten für kritische Werte:

Sind die Endpunkte identisch, wird kein elliptischer Bogen dargestellt.
Wenn mindestens eine der Hauptachsen 0 ist, wird der Ellipsenbogen als gerade Linie vom Anfangs- zum Endpunkt angenommen.
Es werden die Beträge der angegebenen Hauptachsen verwendet.
Wenn es keine Lösung zu den angegebenen Hauptachsen und dem Winkel gibt, so werden die Hauptachsen gleichmäßig hochskaliert, bis es eine Lösung gibt.
φ wird Modulo 360 Grad genommen.
Haben f_S oder f_A einen anderen Wert als 0, so wird 1 angenommen.

In der Zentraldarstellung sei s₁ der Anfangswinkel und s₂ der Endwinkel und ds die Differenz dazwischen.

Umrechnung von der Zentraldarstellung in die Endpunktdarstellung

(x₁,y₁) = D(φ) (r_X cos(s₁), r_Y sin(s₁)) + c
(x₂,y₂) = D(φ) (r_X cos(s₂), r_Y sin(s₂)) + c

f_A ist 1 falls der Betrag von ds größer als 180 Grad ist, sonst 0.
f_S ist 1 falls ds größer als 0 ist, sonst 0.

Umrechnung von der Endpunktdarstellung in die Zentraldarstellung

Zunächst werden Hilfsgrößen berechnet.

(x₁',y₁') = D(-φ) ((x₁ - x₂)/2,(y₁ -y₂)/2)

L = x₁'²/r_X² + y₁'²/r_y²

Falls L kleiner oder gleich 1 ist, bleiben r_X und r_Y unkorrigiert, ansonsten werden sie mit der Wurzel aus L multipliziert, damit ein Ellipsenbogen möglich ist.

R = r_X²y₁'² - r_Y²x₁'²

(c_X',c_Y') = ± ((r_X²r_Y² - R) / R ) * (r_Xy₁'/r_Y , -r_Yx₁'/r_X)

Das Vorzeichen ist +, falls f_S ungleich f_A ist und - sonst.

c = D(-φ) (c_X',c_Y') + ((x₁ + x₂)/2, (y₁ + y₂)/2)

Nun fehlt noch der Anfangswinkel und der Differenzwinkel.

Zur Berechnung sollte zunächst bekannt sein, wie ein Winkel zwischen zwei Vektoren berechnet wird. Allgemein ist der Winkel zwischen zwei Vektoren u und v (keiner von beiden 0) gleich ± arccos u*v/(|u||v|), wobei das Vorzeichen das gleiche ist wie das von u_Xv_Y - u_Yv_X

s₁ ist der Winkel zwischen (1,0) und ((x₁' - c_X)'/r_X, (y₁' - c_Y)'/r_Y)

ds ist der Winkel zwischen ((x₁' - c_X)'/r_X, (y₁' - c_Y)'/r_Y) und ((-x₁' - c_X)'/r_X, (-y₁' - c_Y)'/r_Y) modulo 360 Grad.

Dabei wird s₁ auf den Bereich zwischen -360 Grad und 360 Grad begrenzt, so dass falls f_S=0, dann ist ds kleiner als 0, sonst größer oder gleich.

Konversion zwischen Bézierkurven

Pfadkonversionen

Eine Konversion von linearen und quadratischen Kurven in kubische Kurven kann ganz praktisch sein. Dies ist zum Beispiel für Animationen der Fall, weil es nicht zulässig ist, Kommandos zwischen zwei Animationsschritten zu wechseln. Auch sonst kann es zu Vereinfachungen in der Handhabung führen, wenn nur kubische Bézierkurven verwendet werden. Erneut sind oben genannte Parametrisierungen und die Formel für die Ableitungen der Schüssel für die Konversion. Anfangs- und Endpunkt gleich bleiben und ebenfalls die Ableitung dort. Dann ergibt sich:

Konversion L nach Q oder C mit i, f Anfangs- und Endpunkt der Kurve:
M i L f = M i Q (i+f)/2, f
M i C (2i+f)/3, (i+2f)/3, f
Offenbar ist sogar jede quadratische Kurve mit einer Zahl a zwischen 0 und 1 und folgender Form eine Lösung des Problems:
M i L f = M i Q ( (1-a)i + a f), f
Entsprechend mit zwei Zahlen a, b und 0 <= a <= b <= 1
M i C ((1-a)i + a f), ((1-b)i + b f), f

Konversion Q nach C (p Kontrollpunkt):
M i Q p, f = M i C (2p+i)/3, (2p+f)/3, f
Auch hier gibt es weitere Möglichkeiten, die Berechnung bleibt dem Leser zur Übung überlassen.

Beispiel: Pfadkonversionen.
Konversion von einem geraden Pfadsegement zu quadratischen und kubischen Pfadsegmenten und von einem quadratischen zu einem kubischen Pfadsegment.

Weglänge

Weglänge einer Kurve abschätzen durch Verwendung von stroke-dasharray als einfachem Maßstab

Nützlich für verschiedene Anwendungen ist die Kenntnis der Weglänge einer Kurve. Dies kann zum Beispiel hilfreich sein, um die Eigenschaft stroke-dasharray gezielt einzusetzen, einschließlich des Zeichnens eines Pfades. Auch kann damit die Bewegung eines Objektes entlang des Pfades mit animateMotion entlang eines Pfades detailliert geplant werden. Ebenfalls interessant kann die Kenntnis der Weglänge werden, wenn Text entlang eines Pfades angeordnet werden soll.

Offenbar ist die Länge eines Pfades die Summe der Längen der Fragmente. Wird mittels 'M' oder 'm' zu einem neuen Unterpfad gesprungen, so trägt dieser Sprung nicht zur Pfadlänge bei.

Ist k(s) wie oben angegeben eine Parametrisierung eines Pfadsegmentes mit s von 0 bis 1, so ist die allgemeine Definition der Weglänge eines zweidimensionalen Pfades mit s von 0 bis f (von 0 bis 1), kx und ky jeweils die x- und y-Komponente des Pfades:
w(f):= ₀∫^f ds ((dkx/ds)² + (dky/ds)²)^1/2

Bei einem geraden Kurvensegment ist das Ergebnis offenbar trivial, die gesamte Weglänge ist der Betrag des Differenzvektors, kurz der Euklidische Abstand oder als Formel für den Anteil f:
w(f) = f * ((kx(0)-kx(1))² + (ky(0)- ky(1))²)^1/2

Bei einem quadratischen Kurvensegment gibt es eine nicht triviale analytische Lösung des Integrals, eine Formel, welche eine Wurzelfunktion und den Logarithmus enthält.

Bei kubischen Kurven und Ellipsenbögen hingegen ergibt sich eine Lösung mit elliptischen Integralen, die normalerweise dann eher numerisch zu lösen sind.

Mittels eines Darstellungsprogrammes des eigenen Vertrauens und der Eigenschaft stroke-dasharray kann die von diesem Darstellungsprogramm berechnete Länge für eine Kurve ebenfalls geschätzt werden, dazu wird stroke-dasharray als Maßstab verwendet. Liegt die Kurvenlänge zum Beispiel in der Größenordnung 1000, so kann angegeben werden: stroke-dasharray="90,10". Daraus ergibt sich dann eine Unterteilung in Abschnitten von 100. Ist die resultierende Abschätzung zum Beispiel 'zwischen 1250 und 1300', so kann der Maßstab verfeinert werden: stroke-dasharray="1249,1,9,1,9,1,9,1,9,1,9,1". Und so weiter, bis ein ausreichend genaues Ergebnis erreicht ist.
Praktische Probleme bei der Methode können auftreten, wenn der Pfad aus mehreren Unterpfaden besteht, weil es da je nach Darstellungsprogramm Implementierungsmängel geben kann (statt dass stroke-dasharray durchläuft, wird es mit jedem Unterpfad neu begonnen). Deswegen kann es notwendig sein, die Länge eines jeden Unterpfades einzeln zu bestimmen.

Beispiel: Weglänge einer Kurve abschätzen durch Verwendung von stroke-dasharray als einfachem Maßstab.
Es sind drei Maßstäbe übereinandergelegt. Um den letzten, hellgelben abzulesen, muss gegebenenfalls das Pfadende rechts unten im Darstellungsprogramm vergrößert werden.

Kurven teilen - Algorithmus nach De Casteljau

Algorithmus nach De Casteljau

Algorithmus nach De Casteljau mit animierter Kurve

Manchmal kann es hilfreich sein, ein Kurvensegment in zwei Teile zu teilen, etwa aufgrund der Einschränkungen, die es bei den Angaben zur Pfadanimation gibt. Dort ist die Anzahl und Folge der Kommandos für jeden Animationsschritt gleich zu wählen, so dass die Anzahl und Art der Pfadsegmente in den einzelnen Animationsschritten aneinander anzupassen sind. Dies kann durchgeführt werden, indem die Anzahl der kubischen Pfadfragmente auf das kleinste gemeinsame Vielfache erweitert wird.

Zudem kann so festgelegt werden, welche Fragmente bei einer Animation ineinander übergehen sollen. Eine solche Aufteilung eines Fragmentes einer Bézierkurve in zwei Fragmente jedenfalls geht recht effektiv und einfach mit dem Algorithmus von De Casteljau.

Dieser Algorithmus wird auch oft verwendet, um Bézierkurven mit einem Programm näherungsweise durch Geraden darzustellen, wobei dann so oft aufgeteilt wird, dass die Länge eines Fragmentes so klein wird, dass der Unterschied zu einer Geraden bei der Darstellung nicht mehr auffällt.

Das Verfahren sei hier für ein kubisches Fragment erläutert.
An der Stelle 0 < s < 1 soll das Fragment aufgeteilt werden.
Anfangspunkt sei P(0) und Endpunkt P(3).
Die Kontrollpunkte seien P(1) und P(2).

Die Notation wird nun um einen Iterationsschritt i erweitert:
P(i,0), P(i,1), P(i,2), P(i,3).
Wobei P(0,j) = P(j) sein soll.

Anschaulich werden die Geraden zwischen zwei aufeinanderfolgenden P im Verhältnis gemäß s aufgeteilt. So entsteht ein neuer Punkt und neue Kontrollpunkte, welche insgesamt und zusammen mit den alten Punkten die neuen Kurvensegmente ergeben.
Nach dem Algorithmus ist, soweit es zu den Indizes Werte gibt:
P(i+1,j) = (1 - s) P(i,j) + s P(i,j+1),
oder ausgeschrieben:
P(1,0) = (1 - s) P(0) + s P(1)
P(1,1) = (1 - s) P(1) + s P(2)
P(1,2) = (1 - s) P(2) + s P(3)
P(2,0) = (1 - s) P(1,0) + s P(1,1)
P(2,1) = (1 - s) P(1,1) + s P(1,2)
P(3,0) = (1 - s) P(2,0) + s P(2,1)

Die beiden neuen kubischen Fragmente sind dann gegeben durch die Punkte:
P(0), P(1,0), P(2,0), P(3,0) für den ersten Teil und
P(3,0), P(2,1), P(1,2), P(3) für den zweiten Teil.

Folgendes zeigt eine Beispielgraphik mit Pfad und asymmetrischer Teilung:
Algorithmus nach De Casteljau

Das Verfahren allein garantiert allerdings nicht, dass die Interpolation im Rahmen einer Animation besonders sinnvoll oder schön ist. Weil die aufgeteilten Fragmente nicht einfach mit dem Kommando S zusammengefügt werden können, werden in der Regel am Trennpunkt innerhalb der Animation Knicke entstehen.

Das sieht anders aus, wenn bei allen Kurven das s gleich gewählt wird, was recht einsichtig ist, weil jede einzelne Kurven ohnehin schon stetig differenzierbar am Trennpunkt ist, bei gleichem s sind dies dann auch die interpolierten Kurven.
Algorithmus nach De Casteljau mit animierter Kurve

Zwar könnte auch eine stetig differenzierbare Fortsetzung am Trennpunkt mit dem Kommando S/s erzwungen werden, was aber den Kurvenverlauf verändert und meistens nicht erwünscht sein wird. Wenn die Aufgabe also darin besteht, mit einer Animation eine bestimmte Kurve in eine bestimmte andere zu verwandeln, wobei während der Animation keine zuvor nicht vorhandenen Knicke entstehen sollen, so sind derartige Feinheiten bei der Zerlegung zu beachten und die Kurvenfragmente jeweils passend zu wählen. Sozusagen ist es durchaus nicht trivial, aus derAbbildung einer Mücke die eines Elefanten zu machen, ohne dabei während der Verwandlung eigenartige Artefakte zu erhalten.

Exkurs Sterne, Blüten und Bézierkurven

Um etwas praktische Erfahrung mit Pfadkommandos zu bekommen, soll auf den 'Exkurs Polygone malen' zurückgegriffen werden, dieser wird Bézierkurven fortgesetzt.

Linienzug mit Unterpfaden

Mit einem polygon-Element oder polyline-Element kann man nur einen Linienzug malen, beim path-Element können eine beliebige Anzahl von offenen und geschlossenen Linienzügen zu einem Pfad kombiniert werden. Dies läßt sich auch gut nutzen, um dekorativere und komplexere sternartige Strukturen zu malen als mit den Grundformen, selbst wenn nur gerade Linien verwendet werden:

Linienzug mit Unterpfaden:
Linienzüge können nicht nur offen oder geschlossen sein, sondern können auch aus Unterpfaden bestehen. Das Objekt hier besteht aus einem Pentagramm und einem komplizierteren Gebilde aus fünf gleichen, offenen Linienzügen, die gegeneinander um das Zentrum gedreht sind. Insgesamt ergibt sich so eine fünfzählige Drehsymmetrie.

Zwischen mehreren dieser Objekte wird in einer einfachen Animation des Pfadattributes d interpoliert.

Die Konstruktion beruht im Wesentlichen auf den Formeln für reguläre Polygone. Bei den offenen Unterpfaden wird lediglich jede dritte Linie des regulären Polygons ausgespart. Dafür werden an die verbleibenden Linienzüge ein paar Linien angehängt, deren Punkte haben einfach einen etwas anderen Radius und Winkel.

Reguläre Sterne mit quadratischen Bézierkurven

Reguläre Sterne mit quadratischen Bézierkurven:
Reguläre Sterne mit quadratischen Bézierkurven werden entlang einer logarithmischen Spirale angeordnet dargestellt. Von innen nach außen steigt die Anzahl der Ecken. Bei den verwendeten quadratischen Kurven entsprechen die Punkte einfach den Ecken des entsprechenden regulären Polygons. Der zugehörige Kontrollpunkt wird vom Winkel her mittig zwischen den Punkten angeordnet, aber mit anderem Radius. Bei einigen sitzt der Kontrollpunkt auf einem größeren Radius, bei einigen auf einem kleineren. Im ersteren Falle sind daher die Außenbereiche rund und die Ecken innen spitz. Im zweiten Falle ist es umgedreht. Wird für den Kontrollpunkt sogar ein negativer Wert für den Radius verwendet, gibt es Überschneidungen.

Sterne mit quadratischen Bézierkurven (1)

Sterne mit quadratischen Bézierkurven (1):
Sterne mit diskreter Drehsymmetrie und mit quadratischen Bézierkurven werden entlang einer logarithmischen Spirale angeordnet dargestellt. Von innen nach außen steigt die Anzahl der Ecken. Bei den verwendeten quadratischen Kurven entsprechen die Punkte einfach den Ecken des entsprechenden regulären Polygons. Der zugehörige Kontrollpunkt wird vom Winkel her mittig zwischen den Punkten angeordnet, aber mit anderem Radius. Bei einigen sitzt der Kontrollpunkt auf einem größeren Radius, bei einigen auf einem kleineren. Im ersteren Falle sind daher die Außenbereiche rund und die Ecken innen spitz. Im zweiten Falle ist es umgedreht. Wird für den Kontrollpunkt sogar ein negativer Wert für den Radius verwendet, gibt es Überschneidungen.

Sterne mit quadratischen Bézierkurven (2)

Aufgrund des zusätzlichen Punktes ist die Variationsbreite bei quadratischen Kurven natürlich viel größer als bei einfachen Polygonen:
Sterne mit quadratischen Bézierkurven (2):
Sterne mit quadratischen Bézierkurven werden entlang einer logarithmischen Spirale angeordnet dargestellt. Von innen nach außen steigt die Anzahl der Ecken. Bei den verwendeten quadratischen Kurven entsprechen die Punkte einfach den Ecken des entsprechenden regulären Polygons. Der zugehörige Kontrollpunkt wird vom Winkel her mittig zwischen den Punkten angeordnet, aber mit anderem Radius. Bei jedem zweiten sitzt der Kontrollpunkt auf einem größeren Radius, bei den anderen auf einem kleineren. Die Krümmungen zeigen also bei einer Form abwechselnd nach innen und außen, was die Drehsymmetrie des Objektes entsprechend halbiert. Wird für den Kontrollpunkt sogar ein negativer Wert für den Radius verwendet, gibt es Überschneidungen.

Sterne mit quadratischen Bézierkurven (3)

Sterne mit quadratischen Bézierkurven (3):
Sterne mit quadratischen Bézierkurven werden entlang einer logarithmischen Spirale angeordnet dargestellt. Von innen nach außen steigt die Anzahl der Ecken. Bei den verwendeten quadratischen Kurven entsprechen die Kontrollpunkte einfach den Ecken des entsprechenden regulären Polygons. Der zugehörige Punkt wird vom Winkel her mittig zwischen den Kontrollpunkten angeordnet, aber mit anderem Radius. Bei jedem zweiten sitzt der Punkt auf einem größeren Radius, bei den anderen auf einem kleineren. Die Spitzen zeigen also bei einer Form abwechselnd nach innen und außen, was die Drehsymmetrie des Objektes entsprechend halbiert.

Regulärer Stern mit quadratischen Bézierkurven

Auch hier lassen sich natürlich durch Verwendung ähnlicher Unterpfade wieder interessante Effekte erreichen:
Regulärer Stern mit quadratischen Bézierkurven
Das Objekt besteht aus symmetrischen fünfzähligen Sternen als Unterpfaden, deren Krümmung von außen nach innen immer größer wird. Zudem sind die aufeinanderfolgenden Unterpfade leicht gegeneinander verdreht und haben eine gegenläufige Umlaufrichtung. Dadurch entsteht der Eindruck eines Strudels.

Reguläre Sterne mit kubischen Bézierkurven

Mit kubischen Bézierkurven gibt es durch die zwei Kontrollpunkte natürlich noch deutlich mehr Möglichkeiten. Ausgehen kann man natürlich wieder von der Situation mit größter Symmetrie, wo also die Winkel zwischen Punkten und Kontrollpunkten alle gleich sind:
Reguläre Sterne mit kubischen Bézierkurven
Reguläre Sterne mit kubischen Bézierkurven werden entlang einer logarithmischen Spirale angeordnet dargestellt. Von innen nach außen steigt die Anzahl der Ecken. Bei den verwendeten kubischen Kurven entsprechen die Punkte einfach den Ecken des entsprechenden regulären Polygons. Die zugehörige Kontrollpunkte werden vom Winkel her mit gleichem Abstand zwischen den Punkten angeordnet, aber mit anderem Radius. Bei einigen sitzen die Kontrollpunkte auf einem größeren Radius, bei einigen auf einem kleineren. Im ersteren Falle sind daher die Außenbereiche rund und die Ecken innen spitz. Im zweiten Falle ist es umgedreht. Wird für die Kontrollpunkte sogar ein negativer Wert für den Radius verwendet, gibt es Überschneidungen.

Reguläre Sterne mit kubischen Bézierkurven (2)

Vertauscht man lediglich die Winkel für zwei benachbarte Kontrollpunkte, gibt es schon wieder deutlich andere Formen:
Reguläre Sterne mit kubischen Bézierkurven (2)
Reguläre Sterne mit kubischen Bézierkurven werden entlang einer logarithmischen Spirale angeordnet dargestellt. Von innen nach außen steigt die Anzahl der Ecken. Bei den verwendeten kubischen Kurven entsprechen die Punkte einfach den Ecken des entsprechenden regulären Polygons. Die zugehörige Kontrollpunkte werden vom Winkel her mit gleichem Abstand zwischen den Punkten angeordnet, aber mit anderem Radius und in der Reihenfolge vertauscht. Bei einigen sitzen die Kontrollpunkte auf einem größeren Radius, bei einigen auf einem kleineren. Im ersteren Falle sind daher die Außenbereiche rund und die Ecken innen spitz. Im zweiten Falle ist es umgedreht. Wird für die Kontrollpunkte sogar ein negativer Wert für den Radius verwendet, gibt es Überschneidungen.

Die Symmetrie bleibt natürlich auch erhalten, wenn man beide Kontrollpunkte um den gleichen Winkel, nur mit anderem Vorzeichen verschiebt.

Reguläre Sterne mit kubischen Bézierkurven (3)

Reguläre Sterne mit kubischen Bézierkurven (3)
Reguläre Sterne mit kubischen Bézierkurven werden entlang einer logarithmischen Spirale angeordnet dargestellt. Von innen nach außen steigt die Anzahl der Ecken. Bei den verwendeten kubischen Kurven entsprechen die Punkte einfach den Ecken des entsprechenden regulären Polygons. Die zugehörige Kontrollpunkte werden vom Winkel her mit gleichem Abstand zwischen den Punkten angeordnet, aber mit anderem Radius, zwischen einem Punktepaar innerhalb des Punkteradius, zwischen dem benachbarten Punktepaar außerhalb.

Blüten mit kubischen Bézierkurven

Blüten mit kubischen Bézierkurven
Blüten von Pflanzen haben oft eine diskrete Drehsymmetrie. Sechs kubische Bézierkurven in blütenartiger Form sind locker über den Anzeigebereich verteilt. Oft herrschen rundere Formen vor, die in der einfachsten Variante erreicht werden können, wenn man die Radien der Punkte auf 0 setzt und für die Kontrollpunkte unterschiedliche Radien und Winkel wählt, wobei dies mit der gewünschten Symmetrie wiederholt wird. Kleinere Unregelmäßigkeiten würden kleine Symmetriebrüche erzeugen, die alles etwas organischer, natürlicher aussehen ließe.

Sternexplosion

Sternexplosion
Eine unregelmäßige Kombination von kubischen Bézierkurven in Unterpfaden bildet ein komplizierteres Strahlenmuster, als ob ein regulärer Stern explodiert sei.

Knickloser symmetrischer Stern

Knickloser symmetrischer Stern
Das Objekt besteht aus symmetrischen fünfzähligen Sternen als Unterpfaden, deren Radius von außen nach innen immer kleiner wird.

Basis ist jeweils ein reguläres Polygon mit zehn Ecken, die ersten Kontrollpunkte sind jeweils automatisch mit dem Kommando S bestimmt, die zweiten liegen bei den gleichen Winkeln wie die Punkte, haben nur unterschiedliche Radien, die eine Hälfte außerhalb, die andere innerhalb des Ausgangspolgyons. So ergibt sich die fünfzählige Symmetrie einschließlich Spiegelachsen.

Knickloser Stern

Knickloser Stern
Das Objekt besteht aus symmetrischen elfzähligen Sternen als Unterpfaden, deren Radius von außen nach innen immer kleiner wird.

Basis ist jeweils ein reguläres Polygon mit zweiundzwanzig Ecken, die ersten Kontrollpunkte sind so bestimmt, daß sich eine Fortsetzung ohne Knicke ergibt, die zweiten liegen bei den gleichen Winkeln wie die Punkte, haben nur unterschiedliche Radien, die eine Hälfte außerhalb, die andere innerhalb des Ausgangspolgyons.

Blüte mit kubischen Bézierkurven

Blüte mit kubischen Bézierkurven
Das Objekt besteht aus mehreren symmetrischen Kurven, deren Radius von außen nach innen immer kleiner wird.

Basis ist jeweils ein reguläres Polygon mit zehn Ecken, die ersten Kontrollpunkte sind so bestimmt, daß sich eine Fortsetzung ohne Knicke ergibt, die zweiten liegen bei den gleichen Winkeln wie die Punkte, haben nur unterschiedliche Radien, die eine Hälfte außerhalb, die andere innerhalb des Ausgangspolgyons. So ergibt sich die fünfzählige Symmetrie einschließlich Spiegelachsen.

Blüte mit kubischen Bézierkurven (2)

Blüte mit kubischen Bézierkurven (2)
Das Objekt besteht aus mehreren symmetrischen Kurven, deren Radius von außen nach innen immer kleiner wird.

Basis ist jeweils ein reguläres Polygon, die ersten Kontrollpunkte sind so bestimmt, daß sich eine Fortsetzung ohne Knicke ergibt, die zweiten sind tangential angeordnet. So ergibt sich die siebenzählige Symmetrie einschließlich Spiegelachsen. Allerdings sind die verschiedenen Kurven um einen festen Winkel gegeneinander versetzt, die gesamte Blüte hat damit keine Spiegelachsen mehr.

Animierter Stern mit kubischen Bézierkurven

Animierter Stern mit kubischen Bézierkurven
Die Animation besteht aus mehreren symmetrischen Kurven.

Basis ist jeweils ein reguläres Polygon, die ersten Kontrollpunkte sind so bestimmt, daß sich eine Fortsetzung ohne Knicke ergibt, die zweiten sind tangential angeordnet. So ergibt sich die diskrete Symmetrie einschließlich Spiegelachsen für die Einzelkurven. Während der Interpolation ergibt sich natürlich meist eine niedrigere Symmetrie.

Animierter Stern mit kubischen Bézierkurven (2)

Animierter Stern mit kubischen Bézierkurven (2)
Die Animation besteht aus mehreren symmetrischen Kurven.

Basis ist jeweils ein reguläres Polygon, die ersten Kontrollpunkte sind so bestimmt, daß sich eine Fortsetzung ohne Knicke ergibt, die zweiten sind tangential angeordnet. So ergibt sich die diskrete Symmetrie für die Einzelkurven.

SVG: