SVG-Bézierkurven: Knicke ohne neue Knoten beheben

Um einen unbeabsichtigten Knick am Übergang zweier gewöhnlicher kubischer Béziersegmente zu entfernen, lässt du ihren gemeinsamen Ankerpunkt an Ort und Stelle und richtest die benachbarten Griffe auf einer Geraden auf gegenüberliegenden Seiten dieses Ankers aus. Ihre Längen dürfen unterschiedlich sein, während die Kurven dieselbe Tangentenrichtung haben. Gleich lange gespiegelte Griffe erfüllen eine zusätzliche Bedingung; sie sind nicht für jeden optisch glatten Übergang erforderlich.

Prüfe die Quellform, bevor du diese Änderung vornimmst. Eine spitze Blattform am Blattende, Kerbe oder Ecke in einer Schrift kann beabsichtigt sein. Die folgende Reparatur betrifft einen unerwünschten Richtungswechsel, während Start, Übergang, Ende und Segmentanzahl fest bleiben.

Finde die beiden Griffe, die den Übergang steuern

Ein kubischer SVG-Befehl hat zwei Kontrollpunkte und einen Endpunkt:

C firstControlX firstControlY secondControlX secondControlY endX endY

Das Segment beginnt am aktuellen Punkt. Sein erster Kontrollpunkt steuert die Richtung beim Verlassen dieses Starts; sein zweiter steuert die Annäherung an den Endpunkt. Das MDN-Tutorial zu Pfaden veranschaulicht diese Kontrollpunkte und die kubische Syntax. Folge bei Koordinatenpaaren mit kleingeschriebenen Befehlen dem Leitfaden zu relativen SVG-Pfadbefehlen, um den Bezugspunkt nachzuvollziehen, bevor du Griffe änderst.

Prüfe an einem gemeinsamen Anker den letzten Kontrollpunkt des vorherigen Segments und den ersten Kontrollpunkt des nächsten. Wenn diese Griffe entlang verschiedener Geraden zeigen, ändert der Übergang seine Richtung. Ein weiterer Knoten in der Nähe löst diese Beziehung nicht von selbst.

Repariere das ursprüngliche Beispiel mit zwei Segmenten

Speichere dieses vollständige SVG als join-example.svg und öffne es in einem Browser. Es ist eine eigene gekrümmte Bildmarke mit einem bewusst eingebauten Knick bei (150, 100).

<svg xmlns="http://www.w3.org/2000/svg" width="900" height="600"
     viewBox="0 0 300 200">
  <path fill="none" stroke="#137f74" stroke-width="5"
    d="M30 150 C60 150 100 100 150 100
       C170 50 240 50 270 50"/>
</svg>

Der eingehende Kontrollpunkt ist (100, 100), direkt links vom Übergang. Der ausgehende Kontrollpunkt ist (170, 50), oberhalb und rechts davon. Die Kurve kommt horizontal an und geht in einer anderen Richtung weiter.

Ändere nur den ersten Kontrollpunkt des zweiten Segments in (175, 100):

<path fill="none" stroke="#137f74" stroke-width="5"
  d="M30 150 C60 150 100 100 150 100
     C175 100 240 50 270 50"/>

Beide benachbarten Griffe liegen jetzt auf der horizontalen Geraden durch den Übergang. Der eingehende Griff ist 50 Einheiten lang, der ausgehende 25. Die Tangentenrichtung stimmt überein, obwohl ihre Längen unterschiedlich sind.

Für ein gespiegeltes Paar ändere diesen Kontrollpunkt stattdessen in (200, 100). Beide Griffe erstrecken sich dann 50 Einheiten vom gemeinsamen Anker. Das ändert die Form des zweiten Segments stärker als die Bearbeitung mit ungleichen Griffen. Vergleiche deshalb beide mit der Kontur, die du erhalten möchtest.

Jede Variante hat zwei kubische Segmente und drei Ankerpunkte auf der Kurve: Start, Übergang und Ende. Die Kontrollpunkte sind separate Koordinaten. Der Vergleich ist ein eigenes Browser-Rendering, kein nachgezeichnetes PerfectVector-Ergebnis oder Screenshot des Knotenwerkzeugs eines Editors.

Prüfe die Richtung getrennt von der Grifflänge

Bei einer kubischen Kurve, die am Übergang J mit dem letzten Kontrollpunkt A endet, ist die Endpunktableitung 3 × (J − A). Die nächste kubische Kurve beginnt bei J mit dem ersten Kontrollpunkt B und hat die Anfangsableitung 3 × (B − J).

In unserem Beispiel ist die eingehende Ableitung in jedem Feld (150, 0):

Übereinstimmende Tangentenrichtungen nennt man G1-Stetigkeit. Übereinstimmende erste Ableitungen sind C1-Stetigkeit, mit dem üblichen Parameterintervall von null bis eins für jede dieser beiden kubischen Kurven. Die Bézier-Ableitungsnotizen von Michigan Tech leiten diese Endpunktbedingungen her.

Der Richtungstest setzt von null verschiedene Endpunktableitungen voraus. Ein Griff, der auf seinen Anker zusammengefallen ist, braucht eine separate Prüfung, weil seine erste Ableitung null ist. Kollinearität allein reicht außerdem nicht, wenn beide Griffe auf derselben Seite des Übergangs liegen: Die Laufrichtung kann sich umkehren.

Keines der ausgerichteten Beispiele verspricht übereinstimmende Krümmung am Übergang. Eine Kurve kann am Übergang dieselbe Tangentenrichtung haben und trotzdem eine Formanpassung brauchen, um der gewünschten Logosilhouette zu entsprechen. Prüfe die gesamte Biegung, nicht nur den ausgewählten Knoten.

Verwende S nur, wenn Spiegelung die gewünschte Form ergibt

Die gespiegelte Variante lässt sich kompakter schreiben:

<path fill="none" stroke="#137f74" stroke-width="5"
  d="M30 150 C60 150 100 100 150 100
     S240 50 270 50"/>

Hier leitet S den ersten Kontrollpunkt ab, indem es den letzten Kontrollpunkt der vorherigen kubischen Kurve um den aktuellen Punkt spiegelt:

reflectedX = 2 × 150 − 100 = 200
reflectedY = 2 × 100 − 100 = 100

Die übrigen Paare in S240 50 270 50 geben den zweiten Kontrollpunkt und den Endpunkt an. Das ist die Variante mit gespiegelten 50/50-Griffen. Sie kann die 50/25-Variante nicht ersetzen, ohne die Kurve zu ändern.

Die SVG-Spezifikation kubischer Befehle begrenzt diese Spiegelregel auf einen vorhergehenden Befehl C, c, S oder s. Wenn davor eine Linie oder quadratische Kurve steht, ist der implizite erste Kontrollpunkt stattdessen der aktuelle Punkt.

Zum Beispiel:

M30 150 L150 100 S240 50 270 50

Nach der Linie verhält sich das letzte Segment wie C150 100 240 50 270 50. Sein erster Griff ist auf den Start zusammengefallen. Es kann sich trotzdem biegen, weil die übrige Kontrollgeometrie nicht kollinear ist; S nach einer Linie erzwingt kein gerades Segment.

Unsere Browser-Prüfung verglich den gespiegelten S-Pfad mit seiner expliziten C-Entsprechung und prüfte anschließend dieses Beispiel aus Linie und folgendem S gegen seine eigene explizite Erweiterung. Beide Vergleiche stimmten an den erfassten Positionen überein. Das bestätigt diese Beispiele, während die Spezifikation die allgemeine Regel definiert.

Führe dieselbe Reparatur in einem Knoteneditor aus

Arbeite an einer Kopie, wähle den Pfad aus und zeige die Griffe um den verdächtigen Übergang an. Bestätige, dass es einen gemeinsamen Anker gibt. Zwei separate Endpunkte, die sich lediglich überlappen, brauchen möglicherweise eine Topologiereparatur, bevor du Griffrichtungen änderst.

In Inkscape unterscheidet der Leitfaden zu Knotentypen glatte Knoten, deren Griffe auf einer Geraden liegen, von symmetrischen Knoten, deren Griffe zusätzlich gleich lang bleiben. Verwende den Knotentyp, der zur Kontur passt, statt jeden Übergang symmetrisch zu erzwingen.

Halte den Anker fest, während du die Griffrichtung anpasst. Verkürze oder verlängere dann die Griffe, um die gewünschte Form um den Übergang wiederherzustellen. Vergleiche das Ergebnis bei hoher Vergrößerung und normaler Betrachtungsgröße und öffne das gespeicherte SVG erneut, um den exportierten Pfad zu prüfen.

Wenn der Pfad über die gesamte Biegung dicht gedrängte Anker enthält, reicht eine lokale Griffbearbeitung möglicherweise nicht aus. Der Leitfaden zur SVG-Knotenanzahl behandelt Vereinfachung, während der SVG-Bearbeitungsablauf umfassendere Änderungen behandelt. Erhalte bei beiden Operationen beabsichtigte Ecken.

Vergleiche die reparierte Form mit ihrer Quelle

Ein glatter Übergang ist eine Qualitätsprüfung. Er beweist nicht, dass ein nachgezeichnetes Logo dem Original entspricht. Vergleiche Silhouette, Öffnungen und bewusste Ecken mit der Checkliste zur Qualität einer Vektornachzeichnung.

Wenn nur ein PNG oder JPG der Bildmarke verfügbar ist, kann PerfectVectors Logo-Vektorisierer einen bearbeitbaren SVG-Kandidaten vorbereiten. Prüfe seine Konturen und führe dort eine lokale Griffreparatur durch, wo ein unbeabsichtigter Knick bleibt. Halte die Rasterreferenz neben dem bearbeiteten Pfad, damit Glätten kein Detail entfernt, das du erhalten wolltest.

Verwende eine vorhandene Vektor-Masterdatei. Exakte Markengeometrie oder eine stark beschädigte Quelle kann manuelle Rekonstruktion erfordern; der Leitfaden zur Logo-Vektorisierung erklärt diese Wahl. Einen einzelnen Übergang nachzubessern ist sinnvoll, wenn der Rest der Kontur bereits geeignet ist.

FAQ

Müssen beide Béziergriffe für einen glatten Übergang gleich lang sein? Nein. Griffe mit von null verschiedener Länge können unterschiedlich lang sein und dieselbe Tangentenrichtung teilen. Am gemeinsamen Anker sollten sie auf einer Geraden auf gegenüberliegenden Seiten liegen. Gleich lange gespiegelte Griffe liefern zusätzlich übereinstimmende erste Ableitungen für die beiden hier verwendeten kubischen Segmente.

Warum ändert der SVG-Befehl S meine Kurve? S leitet seinen ersten Kontrollpunkt ab. Nach C oder S spiegelt es den letzten Kontrollpunkt der vorherigen kubischen Kurve; nach anderen Befehlstypen verwendet es den aktuellen Punkt. Dieser abgeleitete Punkt kann vom expliziten Kontrollpunkt abweichen, den du beabsichtigt hast.

Sollte ich jeden Knoten eines nachgezeichneten Logos glätten? Nein. Erhalte beabsichtigte Ecken, Spitzen und Kerben. Repariere einen unerwünschten Knick lokal und vergleiche dann die gesamte Silhouette mit der Quelle. Ein tangentenstetiger Übergang allein belegt keine genaue Rekonstruktion.

Quellen

1. MDN — SVG-Pfade — Erklärt kubische Kontrollpunkte und die Syntax von Pfadbefehlen.
2. Michigan Tech — Bézier-Ableitungen — Leitet Endpunkttangenten und Bedingungen für Kurvenübergänge her.
3. W3C — Kubische SVG-Bézierbefehle — Definiert die Spiegelregel und den Ersatzkontrollpunkt für S.
4. Inkscape — Knotentypen — Unterscheidet das Verhalten spitzer, glatter, symmetrischer und automatischer Knoten.

Wenn dein Logo als Rasterbild vorliegt, bereite mit PerfectVector einen SVG-Kandidaten vor, prüfe Übergänge und Silhouette und repariere dann nur die Kurven, die es brauchen, während du bewusste Ecken erhältst.