SVG Path Editor

Visual SVG Path Editor

Paste, edit, and visualize SVG paths with interactive control points. Optimize, export, and drag to reshape — all in your browser.

Path Input 0 commands
Presets
Canvas Preview
x: 0, y: 0
Bounds: — Length: — Points: —

Optimized Output

Enter a path above to see optimized output.

Why Use SVG Path Editor?

✎

Interactive Editing

Drag control points directly on the canvas to reshape curves, lines, and arcs in real time.

⚙

Path Optimization

Automatically removes redundant commands and simplifies your path for smaller file sizes.

👁

Instant Preview

See your SVG path rendered live on a dark canvas with a grid overlay for precise alignment.

📦

Export Anywhere

Copy the path to clipboard or download a clean SVG file — ready for your design tools or code.

Frequently Asked Questions

What SVG path commands are supported?
The editor supports all standard commands: M, L, H, V, C, S, Q, T, A, and Z — both absolute (uppercase) and relative (lowercase) forms.
How do I edit a path visually?
Paste your path d attribute into the input field and click Render. Control points appear on the canvas — drag them to modify the path. Changes update the path text automatically.
Is my data sent to a server?
No. All processing happens entirely in your browser. No path data is ever transmitted to any server.

Stay Updated

Get notified about new features and improvements to SVG Path Editor.