SVG path

Read an SVG path's commands in plain terms, measure it, and shrink it without changing the shape.

Runs in your browser — nothing you type here is sent anywhere.
path data — the d attribute
walk the path — 35% · 195.7 of 559.1 units

Measured by arc length, not by command, so the marker moves at a constant speed even where the curve bunches up. Heading -13.5°.

559.1
length
181.8×148.4
true bounds
8
commands
110B
was 140B
starts at100 170
ends at100 170
box9.08 21.58 181.85 148.42
subpaths1
written8 absolute, 0 relative
every command, in plain terms

Pick a command to light up everything drawn up to that point. The square handles are control points, the round ones are anchors.

readable
M 100 170
C 40 130 10 90 10 60
A 30 30 0 0 1 70 45
A 30 30 0 0 1 100 60
A 30 30 0 0 1 130 45
A 30 30 0 0 1 190 60
C 190 90 160 130 100 170
Z

Exactly the commands you wrote, spaced out one per line.

minified
M100 170C40 130 10 90 10 60A30 30 0 0170 45a30 30 0 0130 15 30 30 0 0130-15 30 30 0 0160 15c0 30-30 70-90 110z

30 bytes lighter — 21.4% off 140. Separators are dropped wherever a sign or a decimal point can do the job, repeated command letters are left out, and arc flags are packed against their neighbours.

A path's `d` attribute is a dense string of single letters and numbers. Working out what it draws, or where a stray command went wrong, means parsing it by hand.

Paste a path and each command is broken out and named, with the bounding box and total length. Minifying strips redundant precision and whitespace, which on an icon set is a meaningful saving, and the preview confirms the shape survived.

What people open it for

In the terminal

tools svgpath

Every utility is also a command in the desktop's shell.

More design tools

Open the full desktop, with all 47 utilities