Skip to content

SVG Path Editor

Edit SVG path d attributes on a canvas with draggable points, and reverse, mirror, scale, round or convert paths to absolute commands.

SVG Path Editor

Canvas

100%
0100200300400100200300400M (200.0, 40.0)L (245.0, 160.0)L (370.0, 160.0)L (270.0, 230.0)L (305.0, 350.0)L (200.0, 280.0)L (95.0, 350.0)L (130.0, 230.0)L (30.0, 160.0)L (155.0, 160.0)

Path data

11 commands, estimated length 1253px

Path info

Commands11
Bounding box340 x 310
Origin30, 40
Est. length1253px

Appearance

2

Presets

Operations

decimals:
factor:

Updated . Provided as is. Check the output before you rely on it in production.

How to use SVG Path Editor

  1. 1

    Paste a path or load a preset

    Paste an SVG path d-attribute (for example M10 10 L20 20 C...) into the editor; it is validated and drawn on the grid canvas. Or load a built-in preset: Star, Heart, Arrow, Circle, or Rounded Rect.

  2. 2

    Visualize and edit on canvas

    See your path rendered on a grid. Drag the control points (endpoint and bezier-handle nodes) to reshape its curves and lines. Zoom and pan to inspect detail.

  3. 3

    Apply path operations

    Use the Operations panel to Reverse direction, Normalize to absolute coordinates, Mirror horizontally or vertically, Simplify by rounding decimals, or Scale the whole path by a factor.

  4. 4

    Style the stroke and fill

    Set the stroke color and width, and toggle fill on or off with its own color. The preview updates live as you adjust appearance, so you can match your target design.

  5. 5

    Copy or export the result

    Check the path info (command count, bounding box, length), then use Copy Path to grab the d-attribute or Copy SVG to get a standalone <svg> element ready to paste elsewhere.

Questions and answers

What is SVG Path Editor?
An SVG path is the d attribute of a path element: a string of commands such as M (move), L (line), C and Q (curves) and A (arc). This editor parses a path, lets you drag its points and control handles on a canvas, and can reverse, mirror, scale, round or convert it to absolute commands.
What SVG path commands does it support?
It supports all standard SVG path commands including M (moveto), L (lineto), C (cubic Bezier), Q (quadratic Bezier), A (arc), and Z (close path), in both absolute and relative forms.
For AI agents: how to call this tool

Machine-readable contract, endpoints and examples. Humans can ignore this section.

Best Path For Builders

Browser workflow

Runs instantly in the browser with private local processing and copy/export-ready output.

Browser Workflow

This tool is optimized for instant in-browser execution with local data handling. Run it here and copy/export the output directly.

/svg-path-editor/

For automation planning, fetch the canonical contract at /api/tool/svg-path-editor.json.