Tech and Media Labs
This site uses cookies to improve the user experience.




SVG rect element

Jakob Jenkov
Last update: 2014-07-21

An SVG <rect> element represents a rectangle. Using this element you can draw rectangles of various width, height, with different stroke (outline) and fill colors, with sharp or rounded corners etc. This explains covers the SVG rect element.

If you prefer to watch this SVG rect tutorial as video, I have a video version on YouTube:

A rect Example

Here is a simple <rect> example:

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">

    <rect x="10" y="10" height="100" width="100"
        style="stroke:#006600; fill: #00cc00"/>

</svg>

The location of the rectangle is determined by the x and y attributes. Remember, this location is relative to any enclosing (parent) elements location.

The size of the rectangle is determined by the width and height attributes.

The style attribute allows you to set additional style information like stroke and fill colors, width of the stroke etc. This will be covered in more detail in a different text.

Here is the resulting rectangle image:

Rounded Corners

It is possible to draw rounded corners on rectangles. The attributes rx and ry determine how round the corners will be. The rx attribute determines how wide the rounding is, and the ry determines how high the rounding will be. Here are three rectangles with rx and ry set to 5 each, 10 each, and 15 each. Notice the different sizes in the rounding.

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

    <rect x="10" y="10" height="50" width="50"
          rx="5" ry="5"
          style="stroke:#006600; fill: #00cc00"/>
    <rect x="70" y="10" height="50" width="50"
          rx="10" ry="10"
          style="stroke:#006600; fill: #00cc00"/>
    <rect x="130" y="10" height="50" width="50"
          rx="15" ry="15"
          style="stroke:#006600; fill: #00cc00"/>
</svg>

The resulting rectangles:

In these examples rx and ry are set to the same values in each rectangle. If you only set the rx attribute, the ry attribute will get the same value as rx. This is a shortcut to defining evenly rounded corners.

Here are two examples where the rx attributes are both set to 10, but the ry attributes are set to 5 and 15. This will show you how rounded rectangles look with different height and width of the rounding.

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">

    <rect x="10" y="10" height="50" width="50"
          rx="10" ry="5"
          style="stroke:#006600; fill: #00cc00"/>
    <rect x="130" y="10" height="50" width="50"
          rx="10" ry="15"
          style="stroke:#006600; fill: #00cc00"/>
</svg>

Rectangle Stroke

You can style the stroke (outline) of the rectangle using the SVG stroke style properties. This example sets the stroke color to a darker green, and sets the stroke width to 3:

<rect x="20" y="20" width="100" height="100"
      style="stroke: #009900;
             stroke-width: 3;
             fill: none;
      "
      />

Here is how that rect element looks when rendered in the browser:

You can also make the rectangle stroke dashed using the stroke-dasharray style property. Here is an example:

<rect x="20" y="20" width="100" height="100"
      style="stroke: #009900;
             stroke-width: 3;
             stroke-dasharray: 10 5;
             fill: none;
            "
        />

Here is how the rect element looks when rendered in the browser:

Rectangle Fill

You can fill a rectangle using the SVG fill style properties. For instance, you can choose not to fill rect element by setting the fill style property to none. Here is an example of that:

<rect x="20" y="20" width="100" height="100"
      style="stroke: #009900;
             fill: none;
            "
        />

Here is how a rect element with no fill looks when rendered in the browser:

You can also choose to fill the rectangle with a color. This examples fills the rect element with a brighter green color:

<rect x="20" y="20" width="100" height="100"
      style="stroke: #009900;
             fill: #33ff33;
            "
        />

Here is how that rect element when rendered in the browser:

You can also make the filling transparent using the fill-opacity style property. This example shows two rectangles, with one partly on top of the other, and the top one being semi-transparent:

<rect x="20" y="20" width="100" height="100"
      style="stroke: #009900;
         fill: #33ff33;
        "
        />
<rect x="50" y="50" width="100" height="100"
      style="stroke: #000099;
         fill: #3333ff;
         fill-opacity: 0.5;
        "
        />

Here is how the rect elements look when rendered in the browser:

In this example the stroke of the second rectangle is not transparent, but you could make it transparent using the stroke-opacity style property.

Jakob Jenkov




Copyright  Jenkov Aps
Close TOC