Design

✏️

SVG Path Editor

Edit SVG paths and Bezier curves visually

Presets

Path Data (d attribute)

Transform

Visual Editor

Drag handles to edit, or focus one and use arrow keys (Shift for larger steps).

Path Commands (6)

M200 100

C200 50 250 0 300 50

C350 100 300 200 200 350

C100 200 50 100 100 50

C150 0 200 50 200 100

ZClose path

Path Output

M 200 100 C 200 50, 250 0, 300 50 C 350 100, 300 200, 200 350 C 100 200, 50 100, 100 50 C 150 0, 200 50, 200 100 Z

Share to Community

Was this tool helpful?

What is SVG Path Editor?

Free online SVG path editor to edit SVG path commands visually with an interactive canvas.

See path control points, drag them to reshape curves, add or remove path segments, and edit the raw SVG path 'd' attribute directly. Supports all SVG path commands: M (move), L (line), C (cubic bezier), Q (quadratic bezier), A (arc), and Z (close). Paste an icon path to fix a broken curve, draw a custom path from scratch, or clean up the d attribute exported from Figma or Illustrator. Essential for icon design and SVG editing. No signup required.

How to Use SVG Path Editor

1Paste an SVG path 'd' attribute or start drawing
2Drag control points to reshape curves and lines
3Add or remove segments using the toolbar
4Copy the updated SVG path code

Frequently Asked Questions

All standard commands: M/m (moveto), L/l (lineto), H/h (horizontal line), V/v (vertical line), C/c (cubic bezier), S/s (smooth cubic), Q/q (quadratic bezier), T/t (smooth quadratic), A/a (arc), and Z/z (close path).

Yes. Paste any SVG path 'd' attribute and the editor visualizes all control points and segments. Edit visually and copy the updated path data back.

Start with an empty canvas and click to place points. Choose the segment type (line, curve, arc) and the editor generates the correct SVG path commands.

Copy the d attribute value from the exported SVG markup and paste it into the editor. Every command becomes a draggable point so you can fix a curve, snap a coordinate, or smooth a segment, then copy the cleaned-up path back into your file.

Select a C (cubic) or Q (quadratic) segment and the editor shows its control handles. Drag a handle to change the curve tangent or drag the anchor point to move the curve itself. The d attribute updates live as you drag.

Share this tool

Related Tools

⬛

CSS Flexbox Generator

Flexbox generator - visual CSS flexbox layout builder with live preview and ready-to-copy CSS code

📈

Cubic Bezier Generator

Free online cubic bezier generator - create custom CSS easing curves for transitions

SVG

SVG Optimizer

Free online SVG optimizer - paste SVG code and get a minified, optimized version instantly

▦

CSS Grid Generator

Free online CSS grid generator - visual CSS grid layout builder with live preview and code export

✂️

CSS Clip Path Generator

Free online CSS clip path generator - create custom CSS clip-path shapes visually

PDF

PDF Metadata Editor

Edit PDF title, author, subject, keywords, creator, producer, and creation date - in-browser, no upload

What is SVG Path Editor?

Free online SVG path editor to edit SVG path commands visually with an interactive canvas.

Frequently Asked Questions

Yes. Paste any SVG path 'd' attribute and the editor visualizes all control points and segments. Edit visually and copy the updated path data back.

Start with an empty canvas and click to place points. Choose the segment type (line, curve, arc) and the editor generates the correct SVG path commands.