SVG rect Element

The SVG <rect> element is used to create a rectangle. We can customize the rectangle shapes:

Syntax

<rect
    x = "x-axis co-ordinate"
    y = "y-axis co-ordinate"
    width="length"
    height="length"
    rx="length"
    ry="length"
    style="style information"
    class="style class" >
</rect>

Attributes

X: x-axis co-ordinate of top left.
Y: y-axis co-ordinate of top left.
width: Width of rectangle.
height: Height of rectangle.
rx: Roundness of the x-axis.
ry: Roundness of the y-axis.
style: Specify the inline style.
class: Specify the external style.

Example:

html

<!DOCTYPE html>
<html>

<body>
    <svg width="400" height="100">
        <rect width="400" height="100" style="
            fill: rgb(0, 0, 255); 
            stroke-width: 10;
            stroke: rgb(0, 0, 0)" />
    </svg>
</body>

</html>

Output:

Example: Change the corner of the rectangle.

html

<!DOCTYPE html>
<html>

<body>

    <svg width="400" height="380">
        <rect x="80" y="20" rx="20" ry="20" 
            width="150" height="150" style="
                fill: orange; 
                stroke: black;
                stroke-width: 2; 
                opacity: 0.5" />
    </svg>
</body>

</html>

Output:

Syntax

Attributes

Explore