Skip to content
Your data never leaves your browser

SVG Path Editor

Edit SVG path data visually with draggable control points. All processing happens in your browser.

Canvas

Path Data

Commands (4)

M(150, 50)
L(250, 200)
L(50, 200)
ZClose path

SVG Output

<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
  <path d="M 150 50 L 250 200 L 50 200 Z" fill="none" stroke="#3b82f6" stroke-width="2" />
</svg>

What is SVG Path Editor?

SVG Path Editor lets you visually edit SVG path data with draggable control points, a live preview canvas, and bidirectional sync between the visual editor and path data string.

How to Use

  1. Enter SVG path data in the text input or use the example paths
  2. Drag control points on the canvas to modify the path
  3. Adjust stroke, fill, and grid settings
  4. Copy the generated path data for use in your SVG files

Privacy & Security

All processing happens entirely in your browser. No data is sent to any server.

Ad