SVG Path Editor
A visual editor for creating and manipulating SVG paths. Click to add points, drag to adjust curves, and export clean SVG code.
Created by Yqnn
Create a free account to get instant access
How to Use
This tool allows you to create and edit SVG path data visually through an interactive interface. 1. Edit the raw SVG path code directly in the path text field, or use visual editing tools 2. Click the + button to add new path commands, select a command type, then click where you want it positioned 3. Drag and drop points to move them around the canvas 4. Click on any point, then the ... button to insert, delete, or convert commands 5. Use mouse wheel to zoom in/out, drag to pan the view 6. Click "Zoom to Fit" to automatically frame your path Commands panel: - Orange commands use relative coordinates, purple use absolute coordinates - Click command types to toggle between relative/absolute - Use ... menu to delete, insert, convert, or reorder commands Keyboard shortcuts: - Press m, l, v, h, c, s, q, t, a, z to insert path commands - Hold Shift + letter keys to convert selected command to that type - Delete/Backspace to remove selected command - Ctrl+Z to undo, Ctrl+Shift+Z to redo - Hold Ctrl while dragging to ignore grid snapping Use Scale, Translate, Rotate buttons for transforming the entire path.