SVG Path Editor
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.
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
Also searched as
- svg path editor online
- edit svg path d attribute
- visualize svg path
- svg path visualizer
- bezier curve editor svg
- cubic bezier path editor
- svg path commands M L C Q Z
- drag svg path nodes
- svg path debugger
- svg arc flags explained
- draw svg path online
- svg path d generator
Frequently asked questions
How do I edit an SVG path visually?
Paste the d attribute into the SVG Path Editor, then drag anchor points and control handles on the canvas or edit nodes in the list. The updated d attribute is output as you edit.
Which SVG path commands are supported?
Absolute M, L, C, Q, A and Z are editable. Pasted S and T shorthands are converted to full C and Q curves. H, V and lowercase relative commands are not supported.
What do the arc flags in an SVG path mean?
In an A command the large-arc flag picks the longer or shorter arc and the sweep flag picks the drawing direction. You can toggle them, along with rx, ry and rotation, in the node list and see the result immediately.
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.