Rectangles

No color (no fill)

We can create a rectangle exactly the same width and height as the full image and wihout setting the fill attribute it will be black:

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

Set the width and height as a percentage

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

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>

• fill sets the background color of a shape, e.g. a rectangle.

White rectangle with border

<svg width="150" height="100" xmlns="http://www.w3.org/2000/svg">
  <rect width="40" height="100" fill="#FFF" stroke="black" stroke-width="1" />
  <rect width="40" height="100" x="110" style="fill:#FFF;stroke:black;stroke-width:1" />
</svg>

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