SVG Path Editor
Visualisieren und inspizieren Sie SVG-Pfaddaten. Analysieren Sie d-Attributbefehle (M, L, C, Q, A, Z), konfigurieren Sie viewBox, Strich und Füllung.
Examples
Live Preview
8 commands parsed
Settings
Show grid lines
Parsed Commands(8 total)
| # | Cmd | Description | Parameters |
|---|---|---|---|
| 1 | M | Move to (absolute) | 50, 30 |
| 2 | C | Cubic Bézier (absolute) | 50, 20, 35, 10, 20, 20 |
| 3 | C | Cubic Bézier (absolute) | 5, 30, 5, 50, 20, 65 |
| 4 | L | Line to (absolute) | 50, 90 |
| 5 | L | Line to (absolute) | 80, 65 |
| 6 | C | Cubic Bézier (absolute) | 95, 50, 95, 30, 80, 20 |
| 7 | C | Cubic Bézier (absolute) | 65, 10, 50, 20, 50, 30 |
| 8 | Z | Close path | — |
So verwenden Sie SVG Path Editor
- 1Fügen Sie Ihr SVG-Pfad-d-Attribut ein oder geben Sie es ein.
- 2Sehen Sie den Pfad in der Live-Vorschau gerendert.
- 3Überprüfen Sie analysierte Befehle in der folgenden Tabelle.
- 4Passen Sie viewBox-, Strich- und Fülleinstellungen nach Bedarf an.
ZenovayAnalytics
Analytics, für Gründer gebaut.
- Besucher-Tracking in Echtzeit
- Datenschutz zuerst, kein Cookie-Banner
- In zwei Minuten eingerichtet
Verwandte Tools
JSON-Formatter und Validator
Formatieren, validieren und verschönern Sie JSON-Daten mit Syntaxhervorhebung und Fehlererkennung.JWT-Decoder
Dekodieren und inspizieren Sie JWT-Token. Zeigen Sie Header, Payload und überprüfen Sie Signaturen.Base64 Encode/Decode
Kodieren Sie Text in Base64 oder dekodieren Sie Base64 zurück in Text. Unterstützt UTF-8 und Binärdaten.URL Codierungstool
Codieren oder decodieren Sie URL-Komponenten. Verarbeiten Sie Sonderzeichen, Abfragezeichenfolgen und vollständige URLs.Häufig gestellte Fragen
Was ist ein SVG-Pfad-d-Attribut?▾
Das d-Attribut definiert einen zu zeichnenden Pfad. Es enthält eine Reihe von Befehlen wie M (zu), L (Linie zu), C (kubische Bezier), Q (quadratische Bezier), A (Bogen) und Z (Pfad schließen).
Was sind alle SVG-Pfadbefehle?▾
M/m (moveto), L/l (lineto), H/h (horizontale Linie), V/v (vertikale Linie), C/c (kubische Bezier), S/s (glatte kubische), Q/q (quadratische Bezier), T/t (glatte quad), A/a (Bogen), Z/z (schließen).
Was ist der Unterschied zwischen absoluten und relativen SVG-Pfadbefehlen?▾
Großbuchstabenbefehle (M, L, C) verwenden absolute Koordinaten vom Ursprung. Kleinbuchstabenbefehle (m, l, c) verwenden relative Koordinaten vom aktuellen Punkt.
Was ist die SVG viewBox?▾
Das viewBox-Attribut definiert das Koordinatensystem der SVG. Es nimmt vier Werte: min-x, min-y, Breite und Höhe. Es steuert, wie sich der SVG-Inhalt skaliert und innerhalb seines Containers positioniert.
Wie kann ich SVG-Pfade optimieren?▾
Verwenden Sie relative Befehle, um Koordinatengrößen zu reduzieren, entfernen Sie unnötige Dezimalgenauigkeit, kombinieren Sie aufeinanderfolgende Liniensegmente und verwenden Sie Kurzhandbefehle (H, V, S, T), wo möglich.