1. SVG Tutorial
2. SVG Examples
3. A Simple SVG Example
4. Displaying SVG in Web Browsers
5. SVG Icons
6. SVG Coordinate System
7. SVG svg element
8. SVG g element
9. SVG rect element
10. SVG circle element
11. SVG ellipse element
12. SVG line element
13. SVG polyline element
14. SVG polygon element
15. SVG path element
16. SVG marker element
17. SVG text element
18. SVG tspan element
19. SVG tref element
20. SVG textpath element
21. SVG switch element
22. SVG image element
23. SVG a element
24. SVG defs Elements
25. SVG symbol Element
26. SVG use Element
27. SVG and CSS - Cascading Style Sheets
28. SVG Stroke
29. SVG Fill
30. SVG Viewport and View Box
31. SVG Animation
32. SVG Scripting
33. SVG Transformation
34. SVG Gradients
35. SVG Fill Patterns
36. SVG Clip Path
37. SVG Masks
38. SVG Filters

• A rect Example
• Rounded Corners
• Rectangle Stroke
• Rectangle Fill

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.