Free Developer Tool
SVG Path Editor
Edit SVG path data and adjust path commands to create and modify vector shapes.
4
Path data
SVG element
Path commands (3)
| # | Command | Parameters |
|---|---|---|
| 1 | M Move to | |
| 2 | C Cubic Bézier | |
| 3 | S Smooth cubic Bézier |
What is SVG Path Editor?
Edit SVG path data and visually inspect the resulting vector shape. An SVG path editor makes it easier to modify coordinates, curves and path commands without manually working with complex path strings.
How to use
- Enter or paste SVG path data.
- View the path on the canvas.
- Edit path coordinates or commands.
- Copy the updated path data.
Features
- Visual SVG path editing
- Path command inspection
- Coordinate editing
- Live preview
- SVG path data export
Common Use Cases
- Creating custom icons
- Editing vector shapes
- SVG development
- Icon customization
- Frontend development
Example
Input
M10 10 L90 10 L50 90 Z
Output
Triangle path with editable M, L, L and Z commands.
FAQ
Can SVG paths be edited visually?
Yes. The editor provides a visual representation of the path so its geometry can be adjusted more easily.
Can I edit path coordinates?
Yes. Path coordinates and supported commands can be adjusted in the editor.
Can I copy the resulting path data?
Yes.
Missing a feature?
If this tool doesn't cover your use case or is missing functionality, please let me know through the Contact page.
New improvements and features are added based on user feedback.