Draw Path
A few svg path commands
(in the following rel. means relative and abs. means absolute.
| Letter | Meaning | Sample |
Params | Note |
|---|---|---|---|---|
| M | Move to | M 10 30 |
(X,Y)+ | set current point to abs. (10,30) |
| m | move delta | m 1 2 |
(dx,dy)+ | change current point by rel. (1,2) |
| L | Line to | L 10 20 |
(dx,dy)+ | line from current point, to rel. (10,20) |
L 10 20 30 40 |
(dx,dy)+ | line from current point to rel. (10,20) and line from there to rel. (30,40) | ||
| H | Horiz Line to | H 10 |
x+ | horiz line from current point to abs. x of 10 |
| h | Horiz Line delta | h 10 |
dx+ | horiz line from current point to rel. x of x + 10 |
h -10 |
dx+ | horiz line from current point to rel. x of x - 10 | ||
| V | Vert Line to | V 10 |
y+ | vertical from current point to y of 10 |
| v | Vert Line delta | v 10 |
dy+ | vertical from current point to rel. y of y + 10 |
v -10 |
dy+ | vertical from current point to rel. y of y - 10 | ||
| C | Cubic Bézier | C 30,90 25,10 50,10 |
(x1,y1, x2,y2, x,y)+ | from current point to end point x,y with control points at x1,y1 and x2,y2 |
C 30,90 25,10 50,10 10,25 90,30 10,50 |
(x1,y1, x2,y2, x,y)+ | subsequent triplets of pairs continue the curve | ||
| c | relative Cubic Bézier | C 30,90 25,10 50,10 |
(dx1,dy1, dx2,dy2, dx,dy)+ | from current point to relative end point x,y with relative control points at dx1,dy1 and dx2,dy2 |
| C | Cubic Bézier | C 30,90 25,10 50,10 |
(x1,y1, x2,y2, x,y)+ | from current point to end point x,y with control points at x1,y1 and x2,y2 |
C 30,90 25,10 50,10 10,25 90,30 10,50 |
(x1,y1, x2,y2, x,y)+ | subsequent triplets of pairs continue the curve | ||
| S | Smooth Cubic Bézier | S 20,50 80,110 |
(x2, y2, x, y)+ | from current point to end point x,y with end control point x2, y2 and start control point of previous control point or current point if previous curve wasn't a cubic bézier |
| Q | Quadratic Bézier | |||
| q | Relative Quad Béz | |||
| T | Smooth Quad Béz | |||
| t | Realitve smooth quad Béz | |||
| A | Arc curve | |||
| a | Relative Arc curve | |||
| Z | Close path |
<svg width="190" height="210" xmlns="http://www.w3.org/2000/svg">
<path d="M 10 10 20 20" stroke="red" fill="transparent"/>
<path d="M 40 20 50 10" stroke="red" fill="transparent"/>
<path d="M 10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/>
<path d="M 70 10 70 20" stroke="red" fill="transparent"/>
<path d="M 110 20 110 10" stroke="red" fill="transparent"/>
<path d="M 70 10 C 70 20, 110 20, 110 10" stroke="black" fill="transparent"/>
<path d="M 130 10 120 20" stroke="red" fill="transparent"/>
<path d="M 180 20 170 10" stroke="red" fill="transparent"/>
<path d="M 130 10 C 120 20, 180 20, 170 10" stroke="black" fill="transparent"/>
<path d="M 10 60 20 80" stroke="red" fill="transparent"/>
<path d="M 40 80 50 60" stroke="red" fill="transparent"/>
<path d="M 10 60 C 20 80, 40 80, 50 60" stroke="black" fill="transparent"/>
<path d="M 70 60 70 80" stroke="red" fill="transparent"/>
<path d="M 110 80 110 60" stroke="red" fill="transparent"/>
<path d="M 70 60 C 70 80, 110 80, 110 60" stroke="black" fill="transparent"/>
<path d="M 130 60 120 80" stroke="red" fill="transparent"/>
<path d="M 180 80 170 60" stroke="red" fill="transparent"/>
<path d="M 130 60 C 120 80, 180 80, 170 60" stroke="black" fill="transparent"/>
<path d="M 10 110 20 140" stroke="red" fill="transparent"/>
<path d="M 40 140 50 110" stroke="red" fill="transparent"/>
<path d="M 10 110 C 20 140, 40 140, 50 110" stroke="black" fill="transparent"/>
<path d="M 70 110 70 140" stroke="red" fill="transparent"/>
<path d="M 110 140 110 110" stroke="red" fill="transparent"/>
<path d="M 70 110 C 70 140, 110 140, 110 110" stroke="black" fill="transparent"/>
<path d="M 130 110 120 140" stroke="red" fill="transparent"/>
<path d="M 180 140 170 110" stroke="red" fill="transparent"/>
<path d="M 130 110 C 120 140, 180 140, 170 110" stroke="black" fill="transparent"/>
<!-- recreate that first line... but using relative coords, l and c -->
<path d="M 10 160 l 10 10" stroke="pink" fill="transparent"/>
<path d="M 50 160 l -10 10" stroke="pink" fill="transparent"/>
<path d="M 10 160 c 10 10, 30 10, 40 0" stroke="blue" fill="transparent"/>
</svg>