SVG Path Editor

Visual SVG path editor. Click to place points, drag Bezier curves, and see SVG path code update live.

How to Use SVG Path Editor

1

Enter path data

Paste an SVG path string or start drawing from scratch.
2

Edit control points

Drag anchor points and handles to shape the path visually.
3

Copy the path

Click copy to grab the optimized SVG path data string.

Tested tool guide Tested browser tools Checked August 16, 2026

What SVG Path Editor does, with a checked example

Click on the canvas to place anchor points, drag to bend the curve between them, and the path's d attribute appears in a code panel that updates with every move. The canvas grid is the path's own coordinate system, so every number the editor emits is an absolute position in that grid; paste the output into a page whose viewBox does not match and the shape lands elsewhere or off-canvas. The other surprise: the editor paints the path so you can see it, but the d attribute alone carries no fill or stroke, so a freshly pasted path renders nothing until you style it.

Worked example

A concrete input and expected output from the current implementation.

Input

Click to place the first anchor at (50, 100), drag its handle to (100, 50), click the second anchor at (250, 100), and drag its handle to (200, 50).

Expected output

M 50 100 C 100 50 200 50 250 100

Two anchors with two symmetric handles form one cubic Bezier segment: the C command stores control point 1, control point 2, then the end point. With handles 50 units out and 50 up, the curve's midpoint falls exactly on (150, 62.5), 37.5 units above the straight line between the anchors.

How the result is produced

Anchors, handles, smooth joints

Each click places an anchor at a grid position. Dragging pulls out the two control handles of a cubic Bezier segment, and the code panel shows the matching C command with the handle coordinates. A joint is smooth only while the handles on both sides of the shared anchor stay on one straight line through it; move a handle off that line and the corner shows in both curve and code.

Live code output

The code panel stays in step with the canvas: a drag rewrites the d string in the same motion. M opens the string at the first point, each segment adds one command, and a loop closed into a shape ends with the Z closepath command. The output is the attribute value only - commands and coordinates - not a complete SVG document, so it is pasted into an existing path element rather than used on its own.

Good uses

Sketching a custom icon or logo mark that no icon library ships, then pasting the generated d into the project's SVG.
Redrawing a shape that came out of an exporter as hundreds of noisy points, replacing it with a few clean Bezier segments.
Learning the path syntax by watching the code panel while dragging a handle to see exactly which numbers in the C command change.

Limits and checks

The output coordinates are fixed to the editor's grid. They do not rescale with the page: moving or resizing the shape later means editing the numbers or wrapping the path in a transform, and a different viewBox will shift, scale, or clip the shape.
An invisible result is not an empty one. A path element carrying only a d attribute paints nothing, because fill and stroke are separate attributes; the editor's visible styling belongs to the canvas, not to the code it produces.
The numbers count from the grid origin, with no units and no scaling layer in the output. The same geometry drawn in a different corner of the canvas emits entirely different d values, so read the coordinates rather than judging position by eye.

Common questions

Can I paste an existing path into the editor to modify it?

Only if the tool offers an import or paste field - check its controls before assuming it does. When import works, expect clean round-trips for moveto (M), lineto (L), and cubic (C) commands; arc (A) and quadratic (Q/T) segments may not convert cleanly, because the editor shapes its curves as cubic Beziers.

I pasted the output into my SVG and nothing shows. What did I miss?

The d attribute describes geometry, not appearance: an SVG path with neither fill nor stroke is invisible. Add stroke and fill to the path element, then confirm the surrounding viewBox matches the editor's grid - if it is much smaller than the coordinates, the shape sits outside the visible area.

References and verification

The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.