SVG Path Editor

Visual drag-and-drop node editor for SVG <path d=...> attributes. Drag points and control handles; supports M, L, C, Q, Z commands. Outputs the d attribute.

M (50, 50) 1 L (150, 50) 2 L (150, 150) 3 L (50, 150) 4
13px
1 50, 50
2 150, 50
3 150, 150
4 50, 150
5

Pasted paths using the smooth-curve shorthands S/T are normalized to their full C/Q equivalents on load (same rendered shape, editable like any other curve). A (arc) is supported natively — drag its endpoint on the canvas, or edit radius/rotation/flags in the node list.

SVG Path Editor

Visual drag-and-drop node editor for SVG <path d=...> attributes. Drag points and control handles; supports M, L, C, Q, Z commands. Outputs the d attribute.

Common uses

  • Edit a curved SVG path node by node
  • Tweak the d attribute of a custom icon shape
  • Edit an SVG arc's radius and sweep flag

Frequently asked questions

Can I use SVG Path Editor to edit a curved SVG path node by node?

Yes. SVG Path Editor can edit a curved SVG path node by node, directly in your browser.

Can I use SVG Path Editor to tweak the d attribute of a custom icon shape?

Yes. SVG Path Editor can tweak the d attribute of a custom icon shape, directly in your browser.

Can I use SVG Path Editor to edit an SVG arc's radius and sweep flag?

Yes. SVG Path Editor can edit an SVG arc's radius and sweep flag, directly in your browser.

Is my data uploaded to a server?

No. This tool runs entirely in your browser — your input is processed locally on your device and is never uploaded or stored on a server.