An SVG path compresses an entire drawing into the d attribute. The editor above makes that compact syntax tangible: every command is listed separately, every drawable segment has its own hover target, and endpoints or control handles can be moved directly on the coordinate grid. The highlighted command is always the piece of path data responsible for the highlighted geometry.
Editing path data
Paste any valid path into the input and press Apply. Relative coordinates are resolved to absolute coordinates for editing, while lines, quadratic curves, cubic curves, elliptical arcs, and closed subpaths retain their geometric meaning. Smooth S and T commands are expanded because their hidden control point depends on the preceding segment. Making that reflected point explicit prevents an edit in one segment from silently changing the next one.
Select a segment to reveal its handles. Circular handles move endpoints and Bézier control points; square handles alter the two radii of an elliptical arc in the ellipse's rotated coordinate system. The command list updates after every drag, so the connection between geometry and syntax remains visible.
SVG path commands
| Command | Meaning | Parameters |
|---|---|---|
M | Move to a new subpath start | x y |
L | Draw a straight line | x y |
Q | Draw a quadratic Bézier curve | x1 y1 x y |
C | Draw a cubic Bézier curve | x1 y1 x2 y2 x y |
A | Draw an elliptical arc | rx ry rotation large-arc sweep x y |
Z | Close the current subpath | none |
Lowercase commands use coordinates relative to the current point. The editor accepts them, then displays an absolute representation so each value can be changed independently. Horizontal H and vertical V lines become ordinary L segments for the same reason: a dragged endpoint should be free to move in both axes.
Adding a point without changing the curve
In + Point mode, a click is projected onto the closest segment. For quadratic and cubic curves, the closest parameter is found with Bezier.js. De Casteljau subdivision then splits the curve at that parameter. The two resulting curves reproduce the original curve exactly; the operation adds an editable point without approximating or reshaping the path.
Elliptical arcs are split in their center parameterization. Each new arc keeps the original radii, axis rotation, and sweep direction, while its large-arc flag is recalculated from the angular span. Parsing, command normalization, and exact arc geometry are supplied by SVGD. The preset strip uses Pathomorph.js to generate standard shapes as editable path data.
Exporting
Copy places the current d value on the clipboard. Download creates a standalone SVG with a 0 0 240 240 view box and the edited path. The exported file deliberately contains only standard SVG markup, so it can be opened in a browser or imported into vector software without the editor libraries.