Paste the d attribute of an SVG path, drag its points to edit it, and get shorter path data, absolute or relative, moved and scaled exactly as you need.
1 A path d 2 processed on your device 3 Edited path
SVG Path Editor
Path data
Move and scale
Preview (drag the points)
Path data
As an SVG file
Segments (absolute)
#
Command
Values
Ends at
01
What it does
Parses SVG path data, lets you drag points, converts absolute and relative, minifies, transforms and measures paths.
Every command: M, L, H, V, C, S, Q, T, A and Z
Drag end and control points in the preview
Absolute or relative output with set precision
Minify with implicit commands and H and V
02
Private by design
Everything happens in your browser. Nothing you type, paste or upload is sent anywhere, and it keeps working offline once the page has loaded.
03
What you get
Path data and an SVG file, with a Copy and a Download button on every result.
SVG
Paths
Icons
Why it matters
SVG icons are just path data, but that data is unreadable: a string of letters and numbers where one wrong digit warps the shape. Design tools export it with too many decimals and absolute coordinates, which makes files bigger than they need to be.
This editor parses the path, draws it with draggable points, and writes it back the way you choose: relative commands and fewer decimals are usually much shorter. Moving and scaling are exact, which is handy for aligning an icon to a 24-pixel grid.
How it works
InputThe d attribute of an SVG path
In your browserParsed into commands, converted and transformed
OutputA cleaner path, measured and previewed
Where it fits in a designer's workflow
Plan
Design
Build
Test
Launch
Tidying icons and editing shapes by hand.
By the numbers
Rewritten by this tool at 2 decimal places. Relative commands often save characters because the numbers are smaller, but not always; the editor shows both so you can keep the shorter one. Source: SVG 2: paths.Show the numbers as a table
Path
Original
Absolute
Relative
Commands
Heart
174
182
192
10
Arrow
21
25
22
5
Circle (arcs)
40
41
40
4
Wave (Q and T)
20
23
20
3
Two subpaths
51
50
46
10
How to use it
Paste a path's d attribute, or pick an example.
Drag points in the preview to adjust the shape.
Choose absolute or relative output, precision and minify.
Copy the path data or download it as an SVG.
FAQ
Will changing precision change the shape?
Slightly, at very low precision. One or two decimals is invisible for icons drawn on a 24 or 48 unit grid.
Why is relative output shorter?
Relative commands use small numbers (the distance from the last point) instead of full coordinates, so there are fewer digits.
How is length measured?
By sampling each curve finely and adding up the straight pieces, accurate to a fraction of a unit. Useful for stroke-dasharray animations.
I build fast, accessible websites and web apps that pass these checks from day one. Tell me about your project and I'll reply personally with honest next steps.
