# Drawing a square with svg

Here is the codes:

``````<svg width="400" height="110">
<rect width="100" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>
``````
• `stroke-width` e.g. 1, 2, 10%.
• `stroke` (color) e.g. rgb(255,127,63), green

## Stroke Example (also a circle example)

Can define a stroke using another element.

## 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