<rect /> (Rectangle)

Objective: Learn to draw, position and style a rectangle.

The rectangle element

<rect x="0" y="0" width="40" height="20"></rect>

<rect> ... </rect> The full rectangle element with open and closing tags.

<rect /> Because this does not contain any content it can also be  used as a self-closing element.

Rectangle construction attributes

The rectangle has four mandatory attributes you must know and remember. The default units are pixels.

x="0" The rectangle attribute for the top-left starting x coordinate.

y="0" The rectangle attribute for the top-left starting y coordinate.

width="40" The attribute for the width of the rectangle.

height="20" The attribute for the height of the rectangle.

Rectangle optional attributes

Optional construction attributes allow you to create rounded corners. You should experiment with these to understand what they can do.

<rect x="0" y="0" width="40" height="20" rx="5" ry="5"></rect>

rx="5" The x-axis radius of the ellipse used to round of the corners of a rectangle

ry="5" The y-axis radius of the ellipse used to round of the corners of a rectangle.

6.1 Exercises

Example 1 <rect /> XML

 This first example uses full SVG attributes to define the stroke colour and size of the rectangle. This is the "minimum rectangle" property set.

<rect
    x="110" 
    y="50" 
    width="180" 
    height="300"
    stroke="black" 
    stroke-width="4"
    fill="none">
</rect>

 Example 2 <rect /> XML with Corner Radius

This second example contains the complete rectangle property set.

<rect
    x="50" 
    y="100" 
    width="300" 
    height="200"
    rx="40"
    ry="40"
    stroke="red" 
    stroke-width="4"
    fill="none">
</rect>

 Left-click on the image to open the SVG Editor and get practicing. Change, add and delete rectangles.

6.2  Exercises

Remember the default image size and viewBox is 400px X 400px.

1. Create a single rectangle in the center of the viewBox 200px wide and high (a square). Apply different fill and fill-opacity attributes.
2. Create a horizontal rectangle in the center of the viewBox that is 300px wide and 100px high.
3. Create a vertical rectangle in the center of the viewBox that is 300px high and 100px wide.
4. Create a rectangle around the whole viewBox. Give it rounded corners.
5. Try different values of rx and ry (corner radius) on your rectangles and observe what happens. Make the square  above a circle by applyingrx="100" and ry="100"

For Cheaters

Here is the SVG for those who are too lazy to type the SVG.   View the SVG Markup

<!--1. Square Rectangle-->
<rect x="100" y="100" width="200" height="200" stroke="black" stroke-width="4" rx="0" ry="0" fill="none" fill-opacity="1"></rect>
<!--2. Horizontal Rectangle-->
<rect x="50" y="150" width="300" height="100" stroke="black" stroke-width="4" fill="none"></rect>
<!--3. Vertical Rectangle-->
<rect x="150" y="50" width="100" height="300" stroke="black" stroke-width="4" fill="none" /> 
<!--4. Rectangle around the full viewbox -->
<<rect x="0" y="0" width="400" height="400" rx="50" ry="50" stroke="green" stroke-width="10" fill="none" />