⚡
SVG Path Editor
Edit SVG paths visually by dragging anchor points and bezier handles. Supports M, L, C, Q, and Z path commands. Toggle smooth/sharp corners, snap to grid, zoom/pan the canvas, and export as raw SVG or React JSX.
Add Command
100%
Path Commands
M50 150
C50 50 150 50 150 150
C150 250 250 250 250 150
L250 50
Path Data
Export
M 50 150 C 50 50 150 50 150 150 C 150 250 250 250 250 150 L 250 50
■ purpleanchor points
■ ambercontrol point 1 (CP1)
■ greencontrol point 2 (CP2)
scrollzoom in/out
Frequently Asked Questions
What path commands are supported?
The editor supports M (moveto), L (lineto), C (cubic bezier), Q (quadratic bezier), and Z (closepath). Drag anchor points to reposition them, or drag the bezier handles to reshape curves.
How does grid snapping work?
When snapping is enabled, anchor points snap to the nearest grid intersection as you drag. Adjust the grid size with the snap slider.
How do I export to React?
Click 'JSX' in the export panel. The tool wraps the path in a React-ready SVG component with proper viewBox and className props.