How to visually edit and minify SVG path data offline

An SVG path's d attribute is compact but hard to read. The SVG Path Editor draws it on a grid so you can see and fix it.

Read the commands

• M moves the pen, L/H/V draw straight lines, C/S cubic curves, Q/T quadratic curves, A arcs and Z closes the shape.
• Uppercase is absolute, lowercase is relative to the previous point.

Edit visually

Drag the filled anchor points or hollow control handles. Every coordinate also appears in the command inspector, where you can type exact values, insert a line or delete a command.

Transform and clean up

Move, scale, rotate or flip around the shape's centre, or snap it to 0,0. Lower decimal precision, switch to relative commands and turn on Minify to cut bytes for icons.

Export

Copy the path d, download a standalone SVG with a tight viewBox, or copy a ready React component. For whole-file cleanup afterwards, run the SVG Optimizer.