Edit SVG paths visually: drag points and curve handles, add lines and curves, then copy absolute, relative or minified d data, or a full SVG file.
The d attribute of an SVG path is a compact string of letters and numbers that nobody can picture by reading it. Paste one here and it becomes a drawing you can edit: drag a point and the numbers change, change a number and the point moves.
It opens on a heart drawn on a 24 × 24 grid, M12 21 C12 21 3 14.5 3 8.5 A5 5 0 0 1 12 6…, and Load sample steps through a wave, an arrow, a star and a speech bubble, each using different commands.
<svg> file.Points snap to a 0.5 grid by default, which keeps icon coordinates tidy; set Snap to Off for free placement. Fit view frames a path that sits outside the canvas, which is the usual reason a pasted path looks empty.
Upper-case commands use positions on the canvas; lower-case ones are offsets from the previous point. Relative output is often shorter and moves as one unit if you change the first point. Minified drops every character the format allows: repeated command letters, the space before a minus sign, and the zero in 0.5. The parser reads anything valid, including M10-20 with no space and the compact arc form a1 1 0 00.5.5, where the flags touch the next number. Editing keeps all ten commands; only an H or Vpoint dragged off its line becomes an L.
A mistake is reported with its position, for example “"X" at character 6 isn’t a path command. Use M L H V C S Q T A Z.”, and every path must begin with M. The first M cannot be deleted while other commands follow it. Arcs and the smooth T have no draggable handle: arcs show only their end point, so change the radii in the command list. Rounding to 0 decimals can visibly shift a small icon, so check the drawing after lowering Decimals.
Circles are points, squares are curve handles. Drag them with Move points; with a + tool, click the canvas to add to the path.
Commands (6)