rect - Rectangle Element

The <rect> element allows you to draw rectangles of various widths, heights, strokes (outline) and color. You can also draw rectangles with rounded corners.

You position the rectangle with the x and y attributes. The location is relative to the enclosing (parent) element location.

You size the rectangle, you guessed it, using width and height attributes.

The style attribute allow you to set additional styling like stroke, width of stroke and fill colors. We will explore stroke styles in a later code example.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect x="30" y="30"
          height="90" width="170"
          style="stroke:#BBBBBB; stroke-width: 16; fill: #529587"/>
</svg>

Edit in JSFiddle

Rounded Corners Rounded corners on rectangles are created using the rx and ry attributes.

  • rx The x radius of the corners.
  • ry The y radius of the corners.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect x="10" y="10"
          rx="5" ry="5"
          height="95" width="95"
          style="stroke:#529587; fill: #529587"/>
</svg>

Edit in JSFiddle