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

## 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
A Arc curve
a Relative Arc curve
Z Close path

(Some ideas for a NimbleText logo redesign.)

## Here's a squiggly one

Also consider applying some rounding -- or animating some rounding... https://stackoverflow.com/questions/10177985/svg-rounded-corner  