Skip to content

SVG Path Editor

Canvas

100%
0100200300400100200300400

Path Data

Path Info

Commands11
Bounding Box340 x 310
Origin30, 40
Est. Length1253px

Appearance

2

Presets

Operations

decimals:
factor:

What This Tool Does

SVG Path Editor is built for deterministic developer and agent workflows.

Interactive SVG path editor with visual canvas, operations, and command reference.

Use How to Use for execution steps and FAQ for constraints, policies, and edge cases.

Last updated:

This tool is provided as-is for convenience. Output should be verified before use in any production or critical context.

Agent Invocation

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.

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.

Frequently Asked Questions

What is SVG Path Editor?
SVG Path Editor is an interactive visual tool for creating and editing SVG path data. It provides a canvas with draggable control points, path operations, and a command reference — ideal for icon design and vector work.
How do I use SVG Path Editor?
Paste an existing SVG path d-attribute, or load a preset, then drag the control points to reshape it. Use the Operations panel to reverse, normalize, mirror, simplify, or scale the path, and Copy Path or Copy SVG when you are done.
Is SVG Path Editor free?
Yes. This tool is free to use with immediate access—no account required.
Does SVG Path Editor store or send my data?
No. All processing happens entirely in your browser. Your data never leaves your device — nothing is sent to any server.
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.