Design & Creative

SVG path editor

Paste a path or a simple SVG, move its points by hand, simplify or resize it and copy the updated code.

Free, no sign-up
Runs in your browser
Nothing uploaded

Preview

Drag a blue point to move it, or an orange handle to reshape a curve. The code updates as you drag.

Path code

Path data (the d value), or paste a whole SVG

Decimal places

Write relative commands

Simplify

Tolerance (in path units; bigger removes more points)

Smooth the result back into curves

Simplifying traces the shape and keeps only the points needed to stay within the tolerance. Arcs and curves become new curves or lines. A path made only of straight lines stays straight.

Move and scale

Scale X

Scale Y

Move X

Move Y

Flip left to right

Flip upside down

Fit into a square of (units)

Using this in a bigger design?

Keep your icons and shapes with the rest of the project in BeginRooms, next to the brief, files and tasks. The 11-day trial needs no card, and this editor stays free.

Open in BeginRooms Find SVG icons

How to use this tool

Paste a path d value, or a whole SVG, into the code box.
Drag the points and handles on the preview, or edit the code.
Optionally simplify, round, make it shorter, move or scale it.
Copy the path or SVG, or download the SVG file.

How it works

An icon is almost right, but one curve bulges or a corner sits a pixel off. Fixing it in the raw path code means decoding a long string of letters and numbers. This editor draws the path for you and shows every point and curve handle. Drag a point to move it, pull a handle to reshape a curve, and the path code updates as you go. You can also edit the code directly and see the shape change.

Tidy the code too: write it with absolute or relative commands, round it to fewer decimal places, or let Make it shorter pick the smaller form. Simplify removes points the shape does not need, and Move and scale resizes, flips or fits the path into a square such as a 24-unit icon grid. Undo steps back through your changes. When you are done, copy the path value or an SVG, or download an SVG file. It all runs in your browser with no account, and nothing is uploaded. It is our own code; see the third-party notices for the software used elsewhere on these tools.

Frequently asked questions

What can I paste in?

A path d value, or SVG code containing paths. If the SVG has several paths, their data is combined into one path so you can edit it as one shape.

What do the letters in path code mean?

M moves to a point, L draws a straight line, H and V draw horizontal and vertical lines, C, S, Q and T draw curves, A draws an arc and Z closes the shape. Lowercase letters mean the position is relative to the previous point.

Can I edit the code directly?

Yes. Change the path code and the drawing updates, or drag on the preview and the code updates.

Will it change the rest of my SVG?

The editor works on path data only. Copy SVG gives you a simple SVG with one path; to keep the rest of your file, paste the new d value back into it.

Does simplifying change the shape?

Slightly. Points are removed only while the outline stays within the tolerance you set, so a small tolerance keeps it very close. Use Undo if you do not like the result.

Is my file uploaded?

No. Editing happens on your device.