SVG Path Editor

Edit SVG paths by dragging points on a grid: add lines, quadratic and cubic Bézier curves, move their control handles, close the path and style the stroke and fill. Paste any existing path d attribute to load it, then copy the cleaned-up absolute path data or download a complete SVG file.

This tool runs entirely in your browser.

Loading tool…

How to use the SVG Path Editor

1Start from the heart example, or paste your own path data into “Paste path data” and press Load path.
2Drag the circles (end points) and diamonds (Bézier control points). Tab to a point and use the arrow keys for precise moves, or type exact x and y values.
3Pick a segment type and press Add at end or Insert after selected; Delete selected removes a segment. Tick Close path to add Z.
4Set the viewBox size, grid and snapping, stroke and fill, then copy the path d value or the full SVG, or download it as a file.

What is the SVG Path Editor?

An SVG path is described by its d attribute: a list of commands such as M (move to), L (line to), Q (quadratic Bézier), C (cubic Bézier), A (arc) and Z (close). Capital letters use absolute coordinates and lower-case letters are relative to the previous point; H and V draw horizontal and vertical lines, and S and T continue a curve by mirroring the previous control point.

This editor parses every command and turns the path into explicit absolute segments, so each point can be dragged. Arcs are kept as arcs with editable radii and flags. The output is rounded to the number of decimals you choose, which also makes it a quick way to tidy or normalise path data copied from a design tool. Everything happens in your browser.

Frequently asked questions

Can I edit a path from an existing SVG file?

Yes. Copy the value of the path’s d attribute (the text inside d="…"), paste it into the paste box and press Load path. Relative commands and H, V, S and T shorthands are converted to absolute L, C and Q segments.

What is the difference between quadratic and cubic Bézier curves?

A quadratic curve (Q) has one control point that both ends bend towards; a cubic curve (C) has two, one for each end, so it can form S-shapes and gives finer control. Most design tools export cubic curves.

Why does my pasted path look different after loading?

It shouldn’t look different, but the code will: shorthand and relative commands become absolute ones and numbers are rounded to the decimals you chose. If a command can’t be read, an error tells you where.

How do I make the path fit my icon size?

Set the viewBox width and height to your artboard size (for example 24 × 24 for icons), choose a grid size such as 1 and enable snapping so points land on whole units.

Is the SVG Path Editor free and private?

Yes. The SVG Path Editor is free, needs no account, and runs entirely in your browser. What you type is never sent to a server or stored.

All developer tools →