SVG-Pfad-Editor

Der SVG-Pfad-Editor ist ein kostenloses Online-Tool, das die Zeichenketten des d-Attributs von SVG-Pfaden analysiert, visualisiert und transformiert, mit Live-Vorschau, bearbeitbarer Befehlstabelle und Pfad-Werkzeugen. Er läuft vollständig in deinem Browser, ohne Installation oder Anmeldung.

Alle SVG-Pfadbefehle: M, L, H, V, C, S, Q, T, A, Z, sowohl absolut als auch relativ.

Ja. Der Tab Befehle zeigt jedes Segment mit bearbeitbaren Argumenteingaben. Änderungen aktualisieren die Vorschau in Echtzeit.

Nein. Das gesamte Parsen, Rendern und Transformieren läuft in deinem Browser.

Ja, der SVG-Pfad-Editor ist zu 100 % kostenlos, ohne Registrierung, ohne versteckte Gebühren und ohne Nutzungslimits. Die gesamte Verarbeitung erfolgt lokal in deinem Browser und gewährleistet vollständige Privatsphäre.

Ja, der SVG-Pfad-Editor ist vollständig responsiv und funktioniert auf Smartphones und Tablets. Du kannst ihn auf jedem Gerät mit einem modernen Webbrowser nutzen, ganz ohne App-Download.

Es ist kein Konto und keine Registrierung erforderlich. Öffne einfach den SVG-Pfad-Editor in deinem Browser und beginne sofort mit der Nutzung. Es gibt keine Anmeldeschranken oder Nutzungsbeschränkungen.

Der SVG-Pfad-Editor unterstützt eine breite Palette beliebter Formate und Sprachen. In der Tool-Oberfläche findest du die vollständige Liste der unterstützten Optionen.

Gib einfach deine Eingabe in das vorgesehene Feld ein, passe die Einstellungen nach Wunsch an, und das Tool verarbeitet sie sofort. Anschließend kannst du das Ergebnis in die Zwischenablage kopieren oder herunterladen.

Der SVG-Pfad-Editor funktioniert in allen modernen Browsern, darunter Chrome, Firefox, Safari, Edge und Opera. Für das beste Erlebnis verwende die neueste Version deines bevorzugten Browsers.

In einem SVG-Pfad ist ein großgeschriebener Befehlsbuchstabe absolut, ein kleingeschriebener relativ. Absolute Befehle positionieren den Zeichenstift an exakten Koordinaten, gemessen vom Ursprung des SVGs — "L 90 90" zeichnet also immer eine Linie zum Punkt 90,90. Relative Befehle bewegen sich stattdessen um einen Versatz von der aktuellen Stiftposition aus, sodass "l 90 90" 90 Einheiten nach rechts und 90 nach unten von der jeweils aktuellen Position zeichnet. Relative Pfade erzeugen oft kleinere Dateien und lassen sich leicht als Ganzes verschieben, während absolute Pfade leichter zu lesen und präzise neu zu positionieren sind. Dieser Editor verarbeitet beide Formen und bietet eine Ein-Klick-Transformation, die jeden Befehl zwischen absolut und relativ umwandelt, ohne die gerenderte Form zu verändern — so können Sie den Stil wechseln und die Ausgabe direkt vergleichen.

Die Pfadlänge im Statistik-Panel ist eine Näherung, keine exakte Bogenlänge. Für gerade Segmente wie L, H und V ist sie präzise, aber bei Kurven — kubischen (C, S), quadratischen (Q, T) und Bogen-Befehlen (A) — schätzt das Tool die Länge, indem es Punkte entlang der Kurve abtastet, statt die Geometrie der Kurve analytisch zu lösen. Das Ergebnis reicht aus, um zwei Pfade zu vergleichen oder grob einzuschätzen, ob eine Form die erwartete Größe hat, sollte aber nicht dort verwendet werden, wo exakte Messwerte zählen, etwa beim Setzen von stroke-dasharray für eine präzise Zeichenanimation. Dafür sollten Sie den Wert stattdessen mit getTotalLength() direkt vom gerenderten Element im Browser auslesen. Fügen Sie hier einen Pfad ein, um zusammen mit Bounding Box und Befehlsanzahl eine schnelle, nützliche Längenschätzung zu erhalten.

Die meisten überdimensionierten Pfad-Strings entstehen, weil Design-Tools Koordinaten mit vielen Nachkommastellen exportieren, etwa "M 50.000123 4.998761". Der größte schnelle Gewinn liegt im Runden dieser Präzision: Der Transform-Tab dieses Editors rundet jede Koordinate auf eine von Ihnen gewählte Anzahl an Nachkommastellen, was die String-Länge oft drastisch verkürzt, während die Form bei normaler Ansichtsgröße visuell identisch bleibt. Die Umwandlung absoluter Befehle in relative kann zusätzliche Bytes einsparen, da Versatzwerte tendenziell kürzere Zahlen sind, und die minifizierte Ausgabeoption komprimiert die Leerzeichen zu einer einzigen kompakten Zeile. Auch das Entfernen redundanter Befehle und die Nutzung von Kurzformen wie H und V für achsenparallele Linien hilft. Wenn der Pfad optimiert ist, kopieren Sie die minifizierte Version direkt in Ihr Markup. Fügen Sie oben einen Pfad ein, runden Sie auf zwei oder drei Nachkommastellen und beobachten Sie, wie die Byte-Größe im Statistik-Panel sinkt.

Der elliptische Bogenbefehl nimmt sieben Werte entgegen: "A rx ry x-axis-rotation large-arc-flag sweep-flag x y". Nach den beiden Radien und der Rotation entscheiden die beiden einstelligen Flags, welcher von vier möglichen Bögen zwischen Start- und Endpunkt gezeichnet wird. Das Large-Arc-Flag wählt den kürzeren Bogen (0) oder den längeren (1), der mehr als 180 Grad abdeckt. Das Sweep-Flag bestimmt die Richtung, in die sich der Bogen krümmt: 0 verläuft gegen den Uhrzeigersinn, 1 im Uhrzeigersinn. Die abschließenden Werte x und y sind der Endpunkt des Bogens. Da beide Flags boolesch sind, kippt das Umschalten eines einzelnen Flags die Kurve in einen völlig anderen Pfad um, während dieselben Endpunkte erhalten bleiben. Dieser Editor listet jeden A-Befehl im Commands-Tab mit einem beschrifteten, editierbaren Eingabefeld für jeden Wert auf, sodass Sie ein Flag umschalten und sofort in der Live-Vorschau sehen können, welchen Bogen es erzeugt.

SVG verwendet ein Koordinatensystem, in dem Y nach unten zunimmt — das Gegenteil klassischer Mathe-Diagramme —, weshalb Formen, die mit einer Bottom-up-Denkweise erstellt wurden, oft gespiegelt erscheinen. Ein Pfad kann auch schlicht verschwinden, weil seine Koordinaten außerhalb der viewBox liegen, die das sichtbare Fenster auf die Zeichenfläche definiert. Dieser Editor hilft in beiden Fällen: Die Bounding Box sowie die minimalen und maximalen X- und Y-Werte im Statistik-Panel zeigen Ihnen genau, wo Ihre Form tatsächlich liegt, und das Tool passt die viewBox automatisch an, sodass der Pfad in der Vorschau immer sichtbar ist. Das optionale Raster mit markiertem Ursprung macht die Koordinatenrichtungen auf einen Blick deutlich. Ist die Ausrichtung falsch, kann der Transform-Tab den Pfad mit einem Klick vertikal oder horizontal spiegeln. Fügen Sie Ihren Pfad oben ein, um genau zu sehen, wo er landet, und ihn zu korrigieren.