SVG Path Editor
Edit SVG path data visually: drag points, find errors, convert, scale, round and minify, then export SVG.
Path data
TransformChanges the path data. Undo reverts it.
Scaling is from the origin (0, 0). Use a negative scale to flip.
Preview
Drag the squares (end points) and circles (curve handles). Drag empty space to pan; Ctrl + scroll zooms. Path size: 80 × 87.5.
Export
| # | Command | Values as written | Absolute |
|---|---|---|---|
| 1 | 10 10 | 10 10 | |
| 2 | 20 20 40 20 50 10 | 20 20 40 20 50 10 | |
| 3 | 60 0 80 0 90 10 | 60 0 80 0 90 10 | |
| 4 | 90 90 | 90 90 | |
| 5 | 10 90 | 10 90 | |
| 6 | – | – |
SVG Path Editor FAQ
Why is my SVG path not showing?
Usually the path data has an error, such as a missing number or a command letter that does not exist. The editor shows the error with its character position, and Show error in the text selects it. Browsers draw the commands before the error, as the preview does. Also check that the viewBox includes the path.
What is the difference between absolute and relative path commands?
Upper-case commands (M, L, C) use coordinates on the canvas, while lower-case ones (m, l, c) are measured from the current point. Relative paths are often shorter and easier to move; To absolute and To relative convert without changing the shape.
How do I minify an SVG path?
Click Minify. It chooses the shorter of the absolute or relative form for each command, drops repeated command letters and leading zeros, and removes unneeded spaces. Use Round numbers first if the path has many decimals.
Can I change the size of an SVG path?
Yes. Enter Scale X and Scale Y (2 doubles it, 0.5 halves it) and click Scale, then Fit to path to update the viewBox. A negative scale flips the path.
Is my SVG uploaded anywhere?
No. Parsing, editing and export happen in your browser, and nothing is sent to a server.