SVG Path Editor

SVG Path Editor helps you work with the d attribute — the string that defines the shape of an SVG path. When you export SVGs from Figma, Illustrator, or Inkscape, the path data often arrives as a dense, unreadable block like `M10 20L30 40C50 60 70 80 90 100Z`. Manually debugging or editing these strings is tedious and error-prone.

This tool solves that with a live preview that renders the shape as you type, so you can immediately see whether a path looks right. The format mode expands every command onto its own line — M (Move To), L (Line To), C (Cubic Bézier), Q (Quadratic Bézier), A (Arc), Z (Close Path) — with coordinates clearly separated.

Minify mode strips unnecessary whitespace for production-ready output, and the precision adjustment feature lets you round decimal places to reduce file size. The command breakdown panel shows detailed statistics including curve count and coordinate totals, making complex path structures instantly comprehensible. Built for front-end developers debugging SVG icons, designers tweaking exported paths, and anyone working with SVG animations who needs to understand path structure at a glance.