SVG Path Editor
Free online SVG path editor with live preview. Drag anchor and control points, snap to grid, and get optimized path output. Edit cubic and quadratic bezier curves visually. No signup required.
Loading tool...
What is SVG Path Editor?
SVG Path Editor is a visual editor for the d attribute of SVG path elements. Paste path data and drag anchor points and bezier control handles directly on a live preview, then copy the optimized output. All editing happens in your browser.
Key Benefits
- Visual editing
- Live preview
- Bezier handles
- Grid snapping
- Offline & private
Common Use Cases
- •Icon design
- •Logo tweaking
- •Illustration cleanup
- •Learning SVG paths
- •UI animation paths
How to Edit an SVG Path
- Enter path: Paste your path d data or click Load Example.
- Drag points: Drag the square anchor points and circular control handles in the preview.
- Tweak options: Toggle Snap to integer for clean coordinates.
- Copy output: Copy the optimized path string or download it as .svg.
Key Features
- Live visual preview with draggable anchor and control points
- Edit cubic (C/S) and quadratic (Q/T) bezier curves visually
- Snap to integer grid for clean, crisp coordinates
- Supports M L H V C S Q T A Z commands (absolute and relative)
- Compact optimized path output with size comparison
- Copy path data or download as .svg file