SVG Path Editor

Converts path data between absolute and relative commands, moves, scales, rotates and reverses it, and shows the bounding box with a live preview.

Reads a `d` attribute and gives you back a transformed one: absolute or relative, moved, scaled, rotated about the bounding-box centre, reversed, and rounded to the number of decimals you choose. It draws the result through Path2D so the browser does the arc maths the same way an SVG renderer would, and reports the bounding box and a viewBox you can paste.

🔒 Runs entirely in your browsersvgpathvectoredit

The d attribute of a path

Decimals: 3

Command form

Move X: 0Move Y: 0Scale: 1×Rotate: 0°

Preview

The dashed rectangle is the bounding box and the red dot is the start point. The fill uses the nonzero rule.

Result

M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 15h2v-6h-2v6zm0-8h2V7h-2v2z

<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 15h2v-6h-2v6zm0-8h2V7h-2v2z" />

Commands

Subpaths

Numbers

Bytes

113 → 97

Bounding box

x 2.00 y 2.00 w 20.00 h 20.00

viewBox

2.00 2.00 20.00 20.00

What it does

· Read with the same parser as the SVG optimiser, so compressed notation like 1.5.5 and arc flags are read correctly. It converts between absolute and relative, rounds decimals, moves, scales and rotates about the bounding-box centre, reverses direction and computes the bounding box.
· Under rotation H and V become L, and an arc’s radii, x-axis rotation and sweep flag are recomputed with the formulas in SVG 1.1 appendix F.6. The bounding box comes from the real extrema of each curve, not from its control points.
· It does not simplify curves. That changes the shape, and choosing the tolerance is a human decision.

To shrink a whole file, the SVG optimiser; to adjust how a curve accelerates, the easing editor.

How to use it

Paste the d attribute
The value only, without the surrounding `<path>`. Compressed notation is fine — `1.5.5` as two numbers, arc flags with no separator — because the parser is the one from the SVG optimiser and handles those cases.
Apply the transform you need
Move, scale and rotate are applied to the geometry itself, so what comes out needs no `transform` attribute. Rotation is about the bounding-box centre, which is what you want for an icon and is not what a raw `rotate()` does.
Choose absolute or relative, and the precision
Relative commands are usually shorter, which matters for an inlined icon. Precision is the real size lever: three decimals is plenty for a 24-unit icon grid, and dropping from six to two often halves the string. Watch the byte counter as you move it.
Reverse the direction if a fill looks wrong
The red dot marks the start point, so the effect of a reverse is visible. Direction is what decides whether an inner subpath is a hole under the nonzero rule, and it is also what a stroke-dash animation follows.
Take the path, or the viewBox
The output box has the `d` value and a ready `<path>` element. The stats panel has the bounding box as a viewBox string, which is the fastest way to make an icon fill its frame exactly.

Common questions

Why will it not simplify the curve?

Because simplification changes the shape, and how much change is acceptable is a judgement about this particular drawing that a tool cannot make. Every point-reduction algorithm takes a tolerance, and the honest place for that decision is in a vector editor where you can see what it costs. Rounding decimals is the safe size lever, and it is here.

What happens to arcs when I rotate or scale?

They stay arcs. The radii, the x-axis rotation and the sweep flag are recomputed with the formulas in SVG 1.1 appendix F.6, which is what keeps an ellipse’s axes correct under a non-uniform scale. `H` and `V` become `L` under rotation, because a horizontal line does not stay horizontal.

Is the bounding box from the control points?

No, from the actual extrema of each curve. A control point of a cubic usually sits outside the curve, so a control-point box is too large — often noticeably, which is exactly when it matters, because the box is what you paste as a viewBox.

It only handles one path. What about a whole file?

This works on a single `d` value by design — it is the level at which the transforms and the reverse make sense. For a whole document, the SVG optimiser rewrites every path in it, and the SVG editor reads the structure around them.

Feed it from

SVG Optimiser

Removes editor cruft, collapses transforms and rounds path precision, showing the rendered diff.

Runs entirely in your browser

Image to SVG

Traces a bitmap into SVG paths, tuned for logos and line art rather than photographs.

Runs entirely in your browser

Easing Curve Editor

Edits a cubic-bezier or spring curve against an animated preview and emits the CSS timing function.

Runs entirely in your browser

SVG Editor and Explainer

Edits an SVG next to its live render and explains the file: viewBox and scaling, transforms, every path command, inherited paint, wasted bytes, and what breaks in an <img>, a data URI or inlined.

Runs entirely in your browser

These accept what this tool produces, so the result can go straight in.