Welche SVG-Pfadbefehle werden unterstützt?

Alle Standardbefehle: M/m, L/l, H/h, V/v, C/c, S/s, Q/q, T/t, A/a, Z/z. Sowohl absolute (oberer) als auch relative (kleiner) Varianten werden unterstützt.

Wie werden Kontrollpunkte dargestellt?

Für Kubik-Bezier-Kurven (C / c) sind zwei blaue Kontrollpunkte mit jedem Anker durch gestrichelte Linien verbunden, die Ihnen genau zeigen, wie die Kurve geformt ist. Für quadratische Kurven (Q/q) ist ein einziger lila Kontrollpunkt dargestellt. Ankerpunkte werden als kleine rote Punkte gezeichnet.

Kann ich den Pfad im Visualizer bearbeiten?

Aktuell bearbeiten Sie den Pfaddatentext und die Visualisierungs-Updates live. Die direkte Manipulation von Kontrollpunkten durch Ziehen auf die Leinwand ist für ein zukünftiges Update geplant.

SVG Pfadvisualisierung

Fügen Sie ein beliebiges SVG-Pfad d-attribut ein und sehen Sie es sofort mit der Visualisierung von Kontrollpunkten gerendert.

Control points Grid

SVG Path Data (d attribute)

Preview

Was this tool helpful?

Send output to:

How to use SVG Path Visualizer

Fügen Sie einen SVG Pfad d-attribute String in das Eingabefeld ein.
Der Pfad wird sofort im Vorschaubereich mit automatisch berechneter viewBox dargestellt.
Blaue Punkte zeigen kubische Bezier-Kontrollpunkte, lila Punkte zeigen quadratische Bezier-Kontrollpunkte und rote Punkte zeigen Ankerpunkte.
Schalten Sie das Gitter-Overlay für eine präzise Positionierung um, oder verwenden Sie die Schaltflächen Kopieren / Herunterladen, um Ihren Pfad zu exportieren.
Bearbeiten Sie die Pfaddaten und sehen Sie, wie die Ergebnisse in Echtzeit aktualisiert werden.

Was ist SVG-Pfadvisualizer?

SVG-Pfad-Datenstrings können kryptisch sein - eine lange Reihe von Buchstaben und Zahlen, die schwer zu debuggen ist, indem man alleine liest. Dieses Tool macht Ihre Pfaddaten live und zeigt die tatsächliche Form, Kontrollpunkte für bezier Kurven und Ankerpunkte. Es ist von unschätzbarem Wert, wenn Sie SVG-Pfade von Hand bearbeiten oder debuggen, warum eine Kurve nicht so aussieht, wie Sie es erwarten.

Das Tool unterstützt alle Standard-SVG-Pfadbefehle: M/m (move), L/l (line), H/h (horizontal), V/v (vertikal), C/c (cubic bezier), S/s (smooth cubic), Q/q (quadratic bezier), T/t (smooth quadratic), A/a (arc) und Z/z (close path). Kontrollpunkte werden als farbige Punkte dargestellt, die durch gestrichelte Linien mit ihren Ankern verbunden sind.

FAQ

Welche SVG-Pfadbefehle werden unterstützt?: Alle Standardbefehle: M/m, L/l, H/h, V/v, C/c, S/s, Q/q, T/t, A/a, Z/z. Sowohl absolute (oberer) als auch relative (kleiner) Varianten werden unterstützt.
Wie werden Kontrollpunkte dargestellt?: Für Kubik-Bezier-Kurven (C / c) sind zwei blaue Kontrollpunkte mit jedem Anker durch gestrichelte Linien verbunden, die Ihnen genau zeigen, wie die Kurve geformt ist. Für quadratische Kurven (Q/q) ist ein einziger lila Kontrollpunkt dargestellt. Ankerpunkte werden als kleine rote Punkte gezeichnet.
Kann ich den Pfad im Visualizer bearbeiten?: Aktuell bearbeiten Sie den Pfaddatentext und die Visualisierungs-Updates live. Die direkte Manipulation von Kontrollpunkten durch Ziehen auf die Leinwand ist für ein zukünftiges Update geplant.

Related tools

Author

Marcus Webb"The DevTool Craftsman"

Full-Stack Developer & Tools Architect

Marcus has been writing code since the dial-up era. He has contributed to open-source developer tools, built CI/CD pipelines for startups, and debugged production incidents at 3 AM more times than he would like to admit. His philosophy is that the best developer tool is the one that gets out of your way, and he writes about practical tooling that helps teams ship faster with fewer headaches.

📖 SVG Path Visualizer on Wikipedia·Developer Tools on Wikipedia·SVG Path Visualizer on Britannica

People also use

← Back to Developer Tools · All tags

Last updated: 2026-06-06

SVG Pfadvisualisierung

Something went wrong

How to use SVG Path Visualizer

Was ist SVG-Pfadvisualizer?

FAQ

Related tools

Author

People also use

Ad blocker detected

Keyboard shortcuts