SVG-Pfad-Visualisierer & Editor

SVG-Pfad-Visualisierer & Editor

Fügen Sie einen beliebigen SVG-Pfad-d-Attribut ein und sehen Sie ihn live gerendert. Dieses Tool zerlegt jeden Befehl in seine Parameter und den absoluten Endpunkt, zeichnet Bezier-Steuerpunkthandlungen über die Vorschau und wandelt den Pfad zwischen absoluten und relativen Koordinaten mit konfigurierbarer Genauigkeit um. Es ist für SVG-Autoren konzipiert, die das rohe d-String-Verständnis, die Reinigung oder die Hand-Abstimmung ohne das Browser-Verlassen benötigen.

Nutzung

1. Fügen Sie den Inhalt Ihres Pfad-d-Attributs (oder klicken Sie auf „Ein Beispiel ausprobieren“) in das Eingabefeld ein.
2. Passen Sie den viewBox an die Canvas an, auf der der Pfad erstellt wurde. Der Standard 0 0 200 200 eignet sich für die eingebauten Beispiele.
3. Legen Sie Strichfarbe, Strichbreite und Füllung fest, um zu sehen, wie der Pfad gerendert wird.
4. Wählen Sie einen Koordinatenmodus – Beibehalten, in absolute umwandeln oder in relative umwandeln – und eine Genauigkeit von 0 bis 6 Dezimalstellen.
5. Aktivieren Sie die Überlagerungen, um das Gitter, die nummerierten Befehlsendpunkte, die Bezier-Steuerpunkthandlungen und die Zeichnungsanimation anzuzeigen oder zu verstecken.
6. Kopieren Sie das transformierte d-Attribut oder laden Sie die vollständige autonome SVG herunter.

Funktionen

• Live-Vorschau des Pfads – rendert Ihren d-String in eine SVG-Canvas mit konfigurierbaren Strich, Füllung und viewBox.
• Tabelle der Befehlsaufteilung – listet jeden Befehl in Reihenfolge mit seinen Parametern, beschrifteten Argumenten und absoluten Endpunkten auf.
• Überlagerung der Bezier-Steuerpunkte – zeichnet gestrichelte Handlungen und orangefarbene Steuerpunkte für Befehle C, S, Q und T, damit Sie sehen können, wie Kurven geformt sind.
• Nummerierte Endpunkte – markiert den Beginn des Pfads in grün und jedes folgende Befehlsende in blau mit einem Index-Label.
• Absolute ↔ relative Umwandlung – wandelt den gesamten d-String in das jeweilige Koordinatensystem um, ohne die gerenderte Form zu verändern.
• Koordinatenrundung – trimmt die Dezimalstellen von 0 bis 6 Stellen, um den Pfad zu verkürzen und zu normalisieren.
• Gitterüberlagerung – automatisch angepasste Gitterlinien und Null-Achsen-Hervorhebung, die mit dem viewBox verknüpft sind.
• Pfadlänge – verwendet die Browser-API getTotalLength, um die Gesamtlänge des gezeichneten Pfads in viewBox-Einheiten zu melden.
• Zeichnungsanimation – eine optionale Animation des Strichoffsets, die den Pfad in einer Schleife zeichnet, um visuelle Fehlerbehebung zu ermöglichen.
• Autonome SVG-Export – kopieren oder herunterladen einer vollständigen SVG-Datei mit den aktuellen viewBox- und Stil-Einstellungen angewendet.

Unterstützte Pfad-Befehle

• M / m – moveto: beginnt eine neue Unterpfadposition an der angegebenen Stelle.
• L / l – lineto: zeichnet eine gerade Linie zum angegebenen Punkt.
• H / h – horizontale lineto: zeichnet eine horizontale Linie zum gegebenen x.
• V / v – vertikale lineto: zeichnet eine vertikale Linie zum gegebenen y.
• C / c – kubische Bezier: zwei Steuerpunkte plus ein Endpunkt.
• S / s – glatte kubische Bezier: spiegelt automatisch den vorherigen kubischen Steuerpunkt.
• Q / q – quadratische Bezier: ein einzelner Steuerpunkt plus ein Endpunkt.
• T / t – glatte quadratische Bezier: spiegelt automatisch den vorherigen quadratischen Steuerpunkt.
• A / a – elliptische Bogen: Radien, x-Achsenrotation, große Bogen- und Winkelflags, plus Endpunkt.
• Z / z – closepath: zeichnet eine gerade Linie zurück zum Anfangspunkt der Unterpfad.