✏️

SVG Path Editor

LOCAL · Browser-Only

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 recipe

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

What SVG path commands are supported?

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).

Can I import existing SVG paths?

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.

How do I create new paths?

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.

How do I edit an SVG path exported from Figma or Illustrator?

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.

How do I drag bezier control points to reshape a curve?

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

📈

Easing curve generator

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

SVG

Optimize svg online

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

✂️

CSS Clip Path Generator

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

▦

CSS Grid Generator

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

PDF

Change pdf author

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

◻️

Css rounded corners

Free online border radius generator - generate CSS border-radius values with visual editor

SHD

Css box shadow

Free online CSS box shadow generator - create beautiful CSS box shadows with a visual builder and live preview

Keep reading: Python Cheat Sheet and .gitignore templates reference. Doing this in code instead? See the utility endpoints.

✏️