Skip to content
M2TOOLKIT

Popular tools

Menu

SVG Path Editor

Understand and tweak SVG path d attributes visually.

  • Free
  • No sign-up
  • Runs in your browser
2
  1. M 12 21.35
  2. l -1.45 -1.32
  3. C 5.4 15.36 2 12.28 2 8.5
  4. C 2 5.42 4.42 3 7.5 3
  5. c 1.74 0 3.41 0.81 4.5 2.09
  6. C 13.09 3.81 14.76 3 16.5 3
  7. C 19.58 3 22 5.42 22 8.5
  8. c 0 3.78 -3.4 6.86 -8.55 11.54
  9. L 12 21.35
  10. z

10 segments · bounds 2, 3 · 20 × 18.35

Everything you type is processed in your browser. Nothing you enter is sent to our servers or stored by us.

How to use the SVG Path Editor

  1. Paste a path's d attribute.
  2. Hover the command list to highlight segments, and drag points on the preview.
  3. Use the buttons to convert, flip, fit or minify, then copy the SVG.

What does this tool do?

SVG paths are compact but unreadable. Seeing each command highlighted makes icons easy to debug, and conversions help you hand-optimise: relative commands with fewer decimals are usually much shorter. Fit to 24×24 rescales an icon to the common icon grid.

Everything runs in your browser — nothing you paste is uploaded.

Why use it?

  • Draggable points.
  • Absolute ⇄ relative.
  • Minify and fit.

Privacy

Everything you type is processed in your browser. Nothing you enter is sent to our servers or stored by us. There's no account to create and nothing to install.

Last reviewed by the M2Toolkit team.

Other tools people use alongside the svg path editor.