SVG path generator

How to draw a path

1. Click or tap on the grid. The first click places the start of the path, which is the M command; each click after it draws a segment to a new point.
2. Before a click, choose what it will draw: a line, a quadratic curve or a cubic curve. A new curve arrives already bowed to one side, so that its handles are easy to find.
3. Drag a square to move a point, and a round handle to bend a curve. Click a point to select it: its segment can then be changed to another kind, its x and y typed exactly, or the point deleted.
4. Press “Close path” to add Z, which draws a straight line back to where the path started.
5. Press “Copy d” for the path data alone, or “Download SVG” for a file with the path in it.

Editing a path you already have

Paste path data into the box and it is drawn at once. If it lies outside the grid, the grid is resized round it. Every point becomes a square you can drag.

Or open an SVG file. The first path the file draws is put on the grid, with the whole file shown faintly behind it for reference. “Download SVG” then saves your file with that one path’s d replaced and every other character as it was. When the file has several paths the page says how many; only the first is opened.

Lines, quadratic curves and cubic curves

• Line, written L x y: straight to the point.
• Quadratic curve, written Q x1 y1 x y: one handle. The curve sets off towards the handle and arrives from its direction, without touching it.
• Cubic curve, written C x1 y1 x2 y2 x y: two handles, one for each end. This is the curve that the pen tools of vector editors draw, and the only one of the three that can make an S bend in a single segment.
• Changing kind. A line turned into a curve gets handles off to one side. A quadratic turned into a cubic draws the same curve, to the rounding you have chosen, with its two handles two thirds of the way to where the one handle was. A cubic turned into a quadratic is the nearest fit and may move a little, since one handle cannot do all that two did; the page says so when it happens.

What the editor writes, and what it rewrites

The path is always written with five commands and absolute coordinates: M, L, Q, C and Z. The sample heart is four cubic curves: M100 170 C20 110 30 40 70 40 C90 40 100 55 100 70 C100 55 110 40 130 40 C170 40 180 110 100 170 Z.

Path data you paste may use the other commands, and they are rewritten into those five. Relative commands, the lower-case letters, get absolute coordinates. H and V become L. S and T, which borrow a handle from the segment before, are written out in full as C and Q. An arc, A, becomes cubic curves of no more than a quarter turn each, which follow it to within 0.03% of its radius: a circle drawn as two arcs comes back as four cubic curves. The page lists which of these it did.

Numbers are rounded to the places you choose under “Round to”. New points start as whole numbers, which keeps the data short. A pasted path keeps as many decimal places as its longest number has, up to four, and three at least when it had arcs.

What it does not do

• Keep arcs as arcs. They are turned into cubic curves, as above.
• Open shapes that are not paths. A <rect> or <circle> in a file is not path data; convert it to a path in a vector editor first.
• Apply a transform. If the path in your file, or a group round it, has a transform, the grid shows the path’s own numbers, not where the file draws it, and says so.
• Tie handles together. The two handles either side of a point move separately. For a smooth join, set the handle arriving at the point, the point, and the handle leaving it on one straight line.
• Style the path. The downloaded file draws it as a near-black outline one hundredth of the grid’s longer side thick, or filled when “Filled” is ticked. Colours are changed afterwards in the SVG editor.

Questions

Related

• SVG paths: every command of the d attribute
• SVG editor, to recolour and move shapes
• SVG viewer
• SVG optimizer, to shorten path data
• All tools