SVG Path Editor

Edit SVG path d attributes with a live preview

Inline icons and illustrations store geometry in the SVG path element’s d attribute using commands such as M (moveto), L (line), C (cubic Bézier), and Z (close). Designers exporting from Figma or Illustrator often need to nudge anchors or convert relative commands to absolute coordinates. This editor renders the path, lists each command, and lets you drag anchor points while copying the updated d string.

Editing workflow

1. Paste an existing d attribute or start from the sample heart-like curve.
2. Use To absolute to expand relative commands, Round coords to trim decimals, or Normalize to tidy spacing.
3. Drag blue anchor handles in the preview for supported M, L, and cubic end points.
4. Copy the output path back into your SVG or React component.

For path cleanup without visual editing, try the SVG Path Rounder or SVG Path Optimizer.