Methodik

Methodik und Quellen

svgpatheditor.de bearbeitet SVG-Pfade lokal im Browser. Das Parsen, Zeichnen und Serialisieren läuft komplett auf Deinem Gerät, kein Server sieht Deine Grafiken. Diese Seite erklärt, wie das Tool intern arbeitet und worauf wir achten.

Parser und Serializer

Herzstück ist ein eigener Parser für das d-Attribut. Er zerlegt die Zeichenkette in einzelne Segmente und erkennt alle zehn Pfadbefehle, jeweils in absoluter und relativer Form. Implizite Wiederholungen werden aufgelöst: Ein M mit mehreren Koordinatenpaaren wird zu einem M gefolgt von L-Befehlen, genau wie es die SVG-Spezifikation vorsieht. Der Serializer baut aus der bearbeiteten Befehlsliste wieder ein sauberes d-Attribut zusammen.

Zeichnung: Das d-Attribut wird direkt an ein <path>-Element übergeben, das der Browser nativ rendert. So siehst Du exakt das, was auch anderswo herauskommt.
Griffe: Aus den absolut gerechneten Segmenten leiten wir die ziehbaren Punkte ab, Ankerpunkte und Bézier-Kontrollpunkte, jeweils mit Bezug auf die zugehörigen Werte im Original-Befehl.

Absolute und relative Befehle

Mit einem Klick rechnet der Editor den ganzen Pfad in absolute oder relative Befehle um. Dabei läuft er einmal durch die Befehlskette, verfolgt den aktuellen Punkt und schreibt jedes Segment in die gewählte Form, ohne die Zeichnung zu verändern. Warum das je nach Ziel Sinn ergibt, klärt der Ratgeber Absolute vs. relative Befehle.

Rundung und Präzision

Über den Rundungs-Regler bestimmst Du, mit wie vielen Nachkommastellen die Ausgabe geschrieben wird. Nachlauf-Nullen werden entfernt, aus 2.00 wird 2. Das hält den Pfad kurz, ohne die Form sichtbar zu verändern. Wie sich Pfade darüber hinaus verkleinern lassen, steht im Ratgeber SVG-Pfade optimieren.

Bögen (Arc)

Arc-Befehle sind der Sonderfall: Sie tragen zwei Radien, einen Rotationswinkel, zwei Flags und den Zielpunkt. Der Parser liest die Flags auch in der kompakten Schreibweise ohne Trennzeichen korrekt (etwa 0110 als vier einzelne Werte). Den Endpunkt ziehst Du auf der Fläche, Radien und Rotation stellst Du in der Befehlsliste ein.

Fehleranzeige statt kaputtem Pfad

Ist das d-Attribut ungültig, liefert das Tool keine still verunglückte Zeichnung, sondern zeigt eine klare Fehlermeldung, etwa wenn ein Pfad nicht mit M beginnt oder ein Befehl die falsche Anzahl Werte hat. Die zuletzt gültige Zeichnung bleibt sichtbar, bis Du den Text korrigiert hast.

Grenzen der Bearbeitung

Die folgende Tabelle fasst zusammen, was der Editor kann und was nicht.

Funktion	Unterstützt?	Hinweis
Alle 10 Pfadbefehle	ja	M L H V C S Q T A Z, absolut und relativ
Punkte per Drag	ja	Anker- und Kontrollpunkte
Radien/Rotation eines Bogens ziehen	nein	über die Befehlsliste
Mehrere Subpfade	ja	weiteres M im selben Pfad
Andere SVG-Formen (rect, circle)	nein	nur das path-d-Attribut

Privacy-Architektur

Wir verarbeiten Deine Pfade nur lokal im Browser. Der Text wird geparst, in die Zeichenfläche überführt und als String zurückgegeben. Es gibt keinen fetch an unsere Server, keine Hintergrund-Synchronisation, kein Logging Deiner Inhalte. Im DevTools Netzwerk-Tab siehst Du genau das. Was das rechtlich bedeutet, ordnet der Ratgeber Datenschutz bei Online-SVG-Werkzeugen ein.

Was wir an Telemetrie sehen

Wenn Du dem Cookie-Banner zustimmst, lädt unser Tool zwei Drittanbieter-Skripte: Adition (Werbung) und optional Umami (cookielose Reichweitenmessung). Beide sehen nichts über Deine Pfade, weil diese den Browser nie verlassen. Sie sehen den Seitenaufruf, die Verweildauer und grobe Geräte-Daten.

Quellen

W3C: SVG 2 Paths (die maßgebliche Spezifikation für das d-Attribut).
MDN: SVG-Attribut d (alle Befehle mit Beispielen).
MDN: CSS path() (Pfade in clip-path und offset-path).
SVGO (Werkzeug zum Optimieren von SVG-Dateien).

Review-Zyklus

Die Ratgeber und Pflicht-Pages werden halbjährlich gegen aktuelle Quellen geprüft. Änderungen landen mit Datum und Begründung unter /korrekturen. Tippfehler und kleinere Präzisierungen machen wir still im Hintergrund.

Was svgpatheditor.de NICHT ist

svgpatheditor.de ist kein vollständiges Grafikprogramm und kein SVG-Optimierer. Wir konzentrieren uns auf das d-Attribut eines Pfades: bearbeiten, umrechnen, exportieren. Ebenen, Text, Filter, Farbverläufe oder das Zeichnen kompletter Illustrationen gehören nicht dazu. Dafür sind Werkzeuge wie Inkscape oder Figma besser geeignet, für das Verkleinern fertiger Dateien SVGO.