SVG Path Editor
Paste the d attribute of any SVG path to see it drawn with every point and Bézier handle. Drag points, edit commands as numbers, convert between absolute and relative, scale or move the whole path and copy a minified result. Everything runs in your browser.
Last updated:
Commands 0
Click a letter to switch absolute / relative. New commands are inserted after the selected one.
Transform
Output
How to use the SVG Path Editor
- Paste your path data (the value of d="…") into the box, or pick an example such as Heart or Speech bubble.
- Drag the points on the canvas: round dots are end points, square dots are Bézier control points. Scroll to zoom and drag the background to pan.
- Fine-tune numbers in the command list. Click a command letter to switch it between absolute (upper case) and relative (lower case).
- Transform the path with Translate and Scale, or convert the whole path to absolute or relative commands.
- Press Minify to get the shortest equivalent d string, then copy it or download a ready SVG file.
SVG path commands reference
Each command is a letter followed by its numbers. Upper case means absolute coordinates, lower case means coordinates relative to the current point. A letter can be followed by several sets of numbers; the command then repeats (after M, extra pairs become L line-to commands).
| Command | Parameters | What it draws |
|---|---|---|
M / m | x y | Moves the pen without drawing and starts a new subpath |
L / l | x y | Straight line to the point |
H / h | x | Horizontal line (only x changes) |
V / v | y | Vertical line (only y changes) |
C / c | x1 y1 x2 y2 x y | Cubic Bézier curve with two control points |
S / s | x2 y2 x y | Smooth cubic: the first control point mirrors the previous curve's second one |
Q / q | x1 y1 x y | Quadratic Bézier curve with one control point |
T / t | x y | Smooth quadratic: the control point mirrors the previous one |
A / a | rx ry rotation large-arc sweep x y | Elliptical arc to the point; the two flags (0 or 1) choose which of the four possible arcs is drawn |
Z / z | none | Closes the subpath with a straight line back to its start point |
How the editor handles absolute and relative commands
When you drag a point or switch a single command between absolute and relative, the editor first converts the whole path to absolute coordinates, applies the change and then writes each command back in its original form. That way the rest of the shape stays exactly where it was, even when later commands are relative. Typing a number in the command list, on the other hand, edits that raw value, so following relative commands move along with it, just as they would in a text editor.
Dragging an end point also carries the attached Bézier handles with it, so curves keep their shape around the moved point. Arrow keys nudge the selected point by 1 unit (10 with Shift, or by the snap step).
What the minifier does
- Rounds every absolute coordinate to the chosen number of decimals, then derives relative values from the rounded positions so rounding errors never add up.
- Turns horizontal and vertical L commands into the shorter H and V forms.
- Writes each command in whichever form (absolute or relative) is shorter.
- Drops repeated command letters, leading zeros (
0.5becomes.5) and every space that a minus sign or a second decimal point makes unnecessary, e.g.l-1.45-1.32or0 .5.5.
For icons drawn on a 24×24 grid, 2 decimals are usually invisible; for large illustrations 1 or even 0 decimals can be enough.
Frequently asked questions
What is the d attribute of an SVG path?
The d attribute holds the path data: a list of commands, each a letter followed by numbers. M moves the pen, L, H and V draw straight lines, C and S draw cubic Bézier curves, Q and T draw quadratic curves, A draws an elliptical arc and Z closes the shape back to its start point.
What is the difference between upper and lower case path commands?
Upper case commands use absolute coordinates measured from the origin of the SVG coordinate system. Lower case commands are relative: their numbers are offsets from the current pen position. Both draw the same shape; relative paths are often shorter and easier to move.
How do I scale an SVG path?
Enter a scale factor such as 2 or 0.5 and press Scale. The editor multiplies every coordinate and arc radius; scaling with different X and Y factors stretches the shape, and a negative factor mirrors it (the arc sweep flag is flipped automatically). You can also scale around the path center instead of the origin.
Is the minified path exactly the same shape?
Minifying rounds coordinates to the number of decimals you choose, so it can move points by at most half of the last decimal place. Relative values are computed from the rounded positions, so errors do not accumulate along the path. Everything else (removing spaces, leading zeros, repeated letters, choosing absolute or relative) is lossless.
Why does my path show an error?
The editor reports the first character it cannot read, for example a missing number, an arc flag that is not 0 or 1, or a path that does not begin with M. Fix that spot and the drawing updates immediately; the last valid path stays on screen until then.
Does this work with paths from icons and design tools?
Yes. Paths exported by Figma, Illustrator, Inkscape and icon sets are standard SVG path data. Copy the d value from the SVG file, paste it here, edit it and paste it back. Transforms set on parent groups are not part of d and are not applied.
Is my SVG uploaded anywhere?
No. Parsing, drawing and editing happen in JavaScript in your browser. Nothing you paste is sent to a server.
Are all the tools on FreeToolCabin tested for quality and accuracy?
Yes! Every tool on our site undergoes automated Q/A testing in real browser environments to ensure high precision, correct output, and zero errors. If you happen to spot a bug or have a suggestion, please contact us at [email protected] and our team will review it right away.