SVG Path Editor

SVG-Pfade visuell bearbeiten

Zieh die Punkte auf der Fläche und sieh das d-Attribut live mitwachsen. Schalte zwischen absoluten und relativen Befehlen um, feile an einzelnen Werten in der Befehlsliste und exportiere das Ergebnis als SVG. Alles läuft in deinem Browser, ohne Upload und ohne Anmeldung.

Punkte per Drag & Drop Absolut ↔ Relativ SVG-Export Läuft lokal im Browser

So funktioniert der Editor

Ein SVG-Pfad wird über das d-Attribut beschrieben: eine Kette von Befehlen wie M (Move), L (Line) oder C (Cubic Bézier), jeweils gefolgt von Koordinaten. Der Editor zeigt dir diese Kette auf drei Wegen gleichzeitig: als Zeichnung auf der Fläche, als bearbeitbaren d-Text und als Liste einzelner Befehle. Änderst du eine Ansicht, ziehen die anderen sofort nach. Wie das d-Attribut im Detail aufgebaut ist, erklärt der Ratgeber SVG-Pfade verstehen.

Punkte ziehen oder Werte eintippen

Jeder Ankerpunkt erscheint als runder Griff, jeder Bézier-Kontrollpunkt als kleines Quadrat mit gestrichelter Führungslinie. Ziehst du einen Griff, ändert sich der passende Koordinaten-Wert im d-Attribut. Wer es exakt braucht, tippt die Zahlen direkt in die Befehlsliste. Über den Rundungs-Regler legst du fest, mit wie vielen Nachkommastellen die Ausgabe geschrieben wird, was gerade bei generierten Pfaden für kürzeren, saubereren Code sorgt. Welche Befehle es gibt, steht in der Übersicht aller Path-Befehle.

Absolute und relative Befehle

Groß geschriebene Befehle (M, L, C …) arbeiten mit absoluten Koordinaten, klein geschriebene (m, l, c …) relativ zum vorherigen Punkt. Mit einem Klick rechnet der Editor den ganzen Pfad in die eine oder andere Form um, ohne die Zeichnung zu verändern. Warum das je nach Ziel Sinn ergibt, erklärt Absolute vs. relative Befehle.

Was du beim Ergebnis erwarten solltest

Sauberes d-Attribut: Jedes Segment wird als einzelner Befehl geführt, implizite Wiederholungen werden ausgeschrieben. Das macht den Pfad leichter lesbar und bearbeitbar.
Bögen bleiben erhalten: Arc-Befehle (A/a) mit ihren Flags werden korrekt geparst, auch in der kompakten Schreibweise ohne Trennzeichen. Radien und Rotation bearbeitest du über die Befehlsliste.
Fehler mit Hinweis: Ist das d-Attribut ungültig, zeigt der Editor eine klare Meldung, statt still einen kaputten Pfad zu zeichnen.
Export als SVG: Du kopierst nur das d-Attribut oder lädst ein vollständiges <svg> mit passender viewBox herunter.

Ist das wirklich kostenlos und privat?

Ja. Der Editor ist kostenlos, ohne Anmeldung und ohne Wasserzeichen. Da alles ausschließlich lokal in deinem Browser läuft, verlässt kein Pfad dein Gerät. Was das für den Datenschutz bedeutet, liest du im Ratgeber zum Datenschutz bei Online-SVG-Werkzeugen.