Free & private

SVG Path Editor

Click to add anchor points, drag them into place, and watch the d attribute of a real SVG path build itself live. Straight lines or smooth curves, copy-ready in seconds.

Draw your path

Click empty space to add a point. Drag a point to move it.

Click anywhere on the grid above to place your first anchor point.

0 points

Style & export

Shape the stroke, then copy the markup.

Segment style

Close path (add Z)

Stroke color

Stroke width3px

Fill

Path data (d attribute)

M0 0

Full SVG snippet

<svg>…</svg>

How to use the SVG path editor

Build a custom SVG path visually, then take the generated markup anywhere paths are supported: icons, illustrations, logos or animated line art.

Add anchor pointsClick on the canvas to place points in the order you want them connected.

Fine-tune the shapeDrag any point to reposition it, switch to smooth curves, and style the stroke and fill.

Copy the pathGrab the d attribute value or the complete SVG snippet for your project.

Understanding the generated path

Every SVG path is described by its d attribute: a compact list of drawing commands such as M (move to), L (line to) and C (cubic curve to). This editor writes those commands for you as you click and drag, so you get correct, valid path syntax without typing coordinates by hand.

Straight-line mode

Each new point is connected to the previous one with an L command, producing crisp, angular segments ideal for icons, arrows and diagrams.

Smooth curve mode

Curve mode fits a smooth cubic Bezier curve through every anchor point using a Catmull-Rom style calculation, giving you flowing lines without manually placing control handles.

Closing the path

Enable Close path to append a Z command, connecting the last point back to the first to form a closed shape suitable for filled icons.

Ready-to-use output

Copy just the d value to drop into an existing SVG, or copy the full self-contained SVG snippet complete with your chosen stroke and fill styling.

SVG path editor FAQ

How do I draw a path with this editor?

Click anywhere on the canvas to add an anchor point. Each new click adds the next point in order. Click and drag any existing point to move it.

Can I make curved paths instead of straight lines?

Yes. Switch the segment style to Curve to connect your anchor points with a smooth curve calculated through every point, instead of straight line segments.

How do I fix a mistake?

Use Undo last point to remove the most recently added anchor, or Clear all to start over. You can also drag any point to a new position at any time.

How do I use the path I create?

Copy the generated d attribute value or the full SVG snippet and paste it into your own SVG file, design tool or codebase.

Is my drawing uploaded anywhere?

No. The editor runs entirely in your browser. Nothing you draw is sent to a server.