SVG Path Editor

How to use it

1. Paste the value of a path element's d attribute into the left panel.
2. The parser splits it into one row per command — absolute and lowercase relative forms included — with every number in its own field.
3. Edit any number in the table, or delete a whole segment with its Delete button.
4. The right panel rebuilds the d string from the table as you change it.
5. Copy the new d back into your SVG. Invalid numbers are rejected on the spot, and the previous value is restored.

Common use cases

• Nudging a shape — change a few coordinates in a path without opening a vector editor.
• Learning the grammar — see how C, S, Q, T and A map to numbers, including implicit repeated parameter groups.
• Trimming a path — delete a trailing segment to shorten a shape.
• Tidying output — normalize separators and spacing when rebuilding the string.

Why it stays private

Parsing and rebuilding happen in your browser's memory. Path data is part of your artwork and assets, and none of it is uploaded.

FAQ

Q: Which commands are supported? A: M, L, H, V, C, S, Q, T, A and Z, in both absolute and relative form, including implicit repetitions (a second coordinate pair after M is treated as L, and repeated parameter groups become separate rows). Arc flags are read one digit at a time as the spec requires.

Q: Can I insert a new command or change a command letter? A: No. This is a subset editor: it edits numeric values and deletes segments. Inserting commands, renaming them or dragging control points needs a full vector editor.

Q: What happens when I type something that is not a number? A: The field is rejected with a message and the previous value is restored, so the rebuilt path always stays parseable.