SVG-Bogenflags: Richtige Kurven mit A-Befehlen

Die beiden Flags in einem SVG-Befehl A wählen, welcher Bogen seinen Start- und Endpunkt verbindet. Setze large-arc-flag auf 0 für den kürzeren Weg oder auf 1 für den längeren. Setze sweep-flag auf 0 oder 1, um die Richtung entlang der Ellipse zu wählen. Halte Endpunkte und Radien unverändert, ändere nur diese zwei Ziffern, und du kannst alle vier Möglichkeiten sehen. Die SVG-2-Pfadspezifikation definiert diese Auswahl aus vier Bögen.

Das ist nützlich, wenn eine gekrümmte Logokante, ein Abzeichenring oder ein Oberflächenornament nach einer Codeänderung in die falsche Richtung gebogen ist. Wenn die Quelle ein PNG ist, kann Vektorisierung dir zuerst bearbeitbare Formen liefern; der Befehl A ist eine separate, bewusste Geometrieänderung.

Lies die sieben Werte nach A

Ein absoluter Bogenbefehl verwendet diese Reihenfolge:

A rx ry x-axis-rotation large-arc-flag sweep-flag x y

rx und ry sind die Radien der Ellipse. x-axis-rotation dreht diese Ellipse im aktuellen Koordinatensystem. Die beiden Flags sind jeweils 0 oder 1. Schließlich ist x y der Endpunkt. Der Start ist der aktuelle Punkt des vorhergehenden Befehls, oft M x y. Das kleine a verwendet einen relativen statt eines absoluten Endpunkts; MDNs Pfadtutorial erklärt die Befehlsformen.

Zum Beispiel beginnt M70 370 A140 110 0 0 1 280 420 bei (70, 370), verwendet Radien von 140 und 110, lässt die Ellipse ungedreht, wählt den kürzeren Weg mit sweep 1 und endet bei (280, 420). Die Zahlen gelten im Benutzerkoordinatensystem des SVGs. Sie sind nicht automatisch eine Zusage für eine physische Druckgröße.

Sieh die vier möglichen Bögen

Wir renderten dieses eigene Testbeispiel aus einer SVG-Datei. Jede Ansicht verwendet denselben Start (70, 370), dasselbe Ende (280, 420), die Radien 140 110 und die Drehung 0. Nur die Flags ändern sich. Orange markiert den Start und Grün das Ende. Das ist eine browserartige Darstellung unserer eigenen Pfadbefehle, keine Konvertierungsausgabe von PerfectVector.

Die Bezeichnungen „oben“ und „unten“ beschreiben diesen Start, dieses Ende und diese Koordinatenanordnung. Sie sind keine universellen Bedeutungen von 0 und 1. Eine andere Endpunktplatzierung oder eine transformierte Gruppe kann den sichtbaren Bogen anders positionieren. Das sweep-Flag wählt die Richtung des zunehmenden oder abnehmenden Winkels entlang der gewählten Ellipse; in einer typischen SVG-viewBox mit nach unten gerichteter y-Achse erscheint sweep 1 häufig im Uhrzeigersinn. Der interaktive Bogeneditor des SVG-Tutorials hilft, die Richtungsänderung bei unveränderten übrigen Eingaben zu beobachten.

Um eine Ansicht zu reproduzieren, speichere dies als arc.svg und öffne es im Browser:

<svg xmlns="http://www.w3.org/2000/svg"
     width="380" height="600" viewBox="0 0 380 600">
  <path d="M70 370 A140 110 0 0 1 280 420"
        fill="none" stroke="#1b64d8"
        stroke-width="12" stroke-linecap="round" />
  <circle cx="70" cy="370" r="9" fill="#ff704e" />
  <circle cx="280" cy="420" r="9" fill="#0c8078" />
</svg>

Ändere anhand der obigen Tabelle nur die beiden Ziffern nach der Drehung 0. Wenn du gleichzeitig einen Radius oder Endpunkt änderst, kannst du nicht mehr erkennen, welche Bearbeitung den Weg verändert hat.

Korrigiere eine Kurve in der falschen Richtung

1. Finde das Segment. Identifiziere im d-Wert des Pfads den vorhergehenden Startpunkt, den Befehl A und seinen Endpunkt. Ein Pfad kann mehrere Bogensegmente enthalten; bearbeite nur das falsche.
2. Prüfe die Entscheidung lang oder kurz. Wenn eine kleine Kurve plötzlich fast die ganze Ellipse umrundet, ändere large-arc-flag von 1 zu 0. Wenn ein geplanter Ringabschnitt zu einer kurzen Verbindung zusammenfällt, versuche 1.
3. Prüfe Seite oder Laufrichtung. Halte alles andere unverändert und schalte sweep-flag um. Das verschiebt den Bogen häufig auf die andere Seite der Sehne zwischen den Endpunkten.
4. Prüfe die gesamte Grafik. Ein korrigiertes Segment kann weiterhin in einem ungünstigen Winkel an das Nachbarsegment anschließen oder über die viewBox hinausreichen. Öffne die Datei erneut in der gewünschten Anzeigegröße und passe dann benachbarte Geometrie oder Zeichenfläche nach Bedarf an.

Wenn kein Flagpaar zur gewünschten Silhouette passt, liegt das Problem wahrscheinlich nicht an einem Flag. Radien und Endpunkte bestimmen die möglichen Ellipsen; die Flags wählen nur daraus aus. Der Bogenleitfaden von NaN zeigt, wie eine Änderung von Radius oder Endpunkt die zugrunde liegende Ellipse verändert.

Drehung und Radiusgrenzen

x-axis-rotation ist relevant, wenn rx und ry unterschiedlich sind: Es dreht die Ellipse, bevor der Bogen gewählt wird. Bei gleichen Radien verändert das Drehen eines Kreises dessen Umriss nicht. Probiere bei einem Logo mit geneigter ovaler Kante zuerst die beabsichtigten Radien und die Drehung aus und wähle dann die Flags. Andernfalls wählst du womöglich die richtige Seite der falschen Ellipse.

Die SVG-2-Implementierungshinweise definieren Sonderfälle. Wenn einer der Radien null ist, wird das Segment als gerade Linie behandelt. Wenn die Radien zu klein sind, um die Endpunkte zu verbinden, vergrößert der Renderer sie ausreichend, um den Bogen zu ermöglichen. Wenn Start und Ende identisch sind, wird das Bogensegment ausgelassen. Diese Regeln erklären, warum eine Flagänderung manchmal scheinbar nichts bewirkt. Sie bedeuten auch, dass eine Darstellung allein nicht beweist, dass deine eingegebenen Radien tatsächlich ohne Korrektur verwendet wurden.

Verwende eine nachgezeichnete Kurve als Ausgangspunkt, nicht als Bogenformel

Ein Rasterlogo kann einen sauberen kreisförmigen Rand zeigen, aber das rekonstruierte SVG beschreibt ihn möglicherweise mit Béziersegmenten und Ankern statt mit einem ausdrücklichen Befehl A. Ein Bildvektorisierer rekonstruiert sichtbare Formen; er leitet nicht zwangsläufig den ursprünglichen Kreismittelpunkt, die Radien oder Bogenflags des Designers ab. Wenn das ursprüngliche Vektororiginal existiert, bearbeite diese Datei, statt sie erneut nachzuzeichnen.

Wenn nur ein PNG oder JPG existiert, wandle das Bild mit PerfectVector in bearbeitbare Vektorpfade um, prüfe die rekonstruierte Kontur und entscheide dann, ob sie eine präzise geometrische Neuzeichnung benötigt. Miss bei einem Abzeichenring den beabsichtigten Mittelpunkt und die Radien im Vektoreditor und ersetze nur diesen gekrümmten Abschnitt, wenn gleichmäßige Geometrie wichtig ist. Behalte die akzeptierte Nachzeichnung für unregelmäßige Grafiken, die eine exakte Ellipse verzerren würde. Unser SVG-Bearbeitungsleitfaden behandelt die Wahl zwischen visuellem Editor und gezielter Codeänderung; der Leitfaden zur Knotenbereinigung hilft, wenn eine nachgezeichnete Kurve schwer umzuformen ist.

Diese Arbeitsteilung ist wichtig: PerfectVector kann helfen, eine reine Rasterquelle als Pfade zu rekonstruieren, während das Setzen genauer Bogenparameter und das Prüfen von Anschlüssen eine Designentscheidung bleibt. Konvertiere ein bereits sauberes SVG nicht einfach zu PNG und zeichne es erneut nach, nur um ein Flag zu ändern.

Vor der SVG-Weitergabe

• Behalte eine Kopie des Originals oder der akzeptierten Nachzeichnung.
• Bestätige Startpunkt, Endpunkt, Radien, Drehung und die beiden Flagwerte in dieser Reihenfolge.
• Vergleiche den gewählten Weg sowohl stark vergrößert als auch in der tatsächlichen Nutzungsgröße.
• Prüfe Anschlüsse und ob der lange Weg den Rand der viewBox überschreitet.
• Öffne das gelieferte SVG erneut im Zieleditor oder Browser. Ein visuell korrekter Screenshot beweist nicht, dass der Empfänger den Pfad wie vorgesehen bearbeiten kann.

FAQ

Was bedeuten large-arc- und sweep-Flags in SVG? Das large-arc-Flag wählt den kürzeren oder längeren möglichen Bogen zwischen zwei Endpunkten. Das sweep-Flag wählt die Richtung, in der das Segment entlang der Ellipse läuft. Zusammen wählen sie bei nicht degenerierter Geometrie aus vier Möglichkeiten.

Warum hat das Ändern des SVG-large-arc-Flags keinen sichtbaren Effekt? Prüfe, ob die Endpunkte gegenüberliegende Punkte der Ellipse sind, sodass beide Wege halbe Umdrehungen darstellen. Prüfe auch identische Endpunkte, einen Radius von null oder Radien, die der Renderer angepasst hat, um die Punkte zu verbinden. Ändere jeweils einen Parameter und vergleiche den gerenderten Pfad.

Kann Bildvektorisierung meinen ursprünglichen Bogenbefehl automatisch wiederherstellen? Gehe nicht davon aus. Ein Nachzeichner kann bearbeitbare Vektorformen aus Rastergrafiken rekonstruieren, aber das Ergebnis kann Bézierkurven oder viele Anker verwenden. Baue einen präzisen Kreis oder eine Ellipse im Vektoreditor neu, wenn die ursprüngliche Geometrie benötigt wird.

Quellen

1. W3C — SVG 2 Paths — Bogensyntax, Flagkombinationen und Pfadgeometrie.
2. W3C — SVG-2-Implementierungshinweise — Radiuskorrektur und Behandlung degenerierter Bögen.
3. MDN — SVG-Pfade — Absolute und relative Pfadbefehle sowie das Bogentutorial.
4. SVG Tutorial — Bogen — Interaktive Demonstrationen von Radien, Drehung und Flags.
5. NaN — SVG-Pfadbefehle: Bögen — Interaktive Erklärung der Ellipsenanpassung und Flag-Ergebnisse.

Benötigst du eine bearbeitbare Quelle, bevor du ein reines Rasteremblem umformst? Konvertiere das Bild in Vektorpfade, prüfe das Ergebnis und zeichne jeden Bogen neu, dessen genauer Radius oder Richtung wichtig ist.