SVG Path Editor

v1.0.3

Visualise and edit SVG path data with live preview and coordinate controls.

Visualises and edits SVG path data (d= attribute) with draggable control points, live preview, and coordinate tooltips — useful for tweaking icon paths or understanding complex curves.

How to use

→Paste an SVG path d= string to visualise the path with control points shown.
→Drag control points on the canvas to adjust the path interactively.
→Copy the modified d= string back into your SVG file.

Path Data (SVG d attribute)

Fill color

Stroke color

Stroke width: 2

ViewBox

Quick examples

Preview

SVG output

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
  <path d="M 50 10 L 90 90 L 10 90 Z" fill="#6366f1" stroke="#a5b4fc" stroke-width="2" />
</svg>