Rectangles

Violet - setting the color in 4 different ways

<svg width="150" height="100" xmlns="http://www.w3.org/2000/svg">

  <rect width="40" height="40" fill="#F06"/>

  <rect width="40" height="40" x="110" style="fill:#F06"/>

  <rect width="40" height="40" y="60" fill="rgb(255, 0, 66)"/>

  <rect width="40" height="40" x="110" y="60" style="fill:rgb(255, 0, 66)"/>
</svg>

Violet Rectangle

fill sets the background color of a shape, e.g. a rectangle.
fill sets the background color.
stroke sets the color of the border.
stroke-width sets the width (in pixels) of th border.
We can also use style to set all 3 attributes.