SVG rect Element (original) (raw)

Last Updated : 17 Aug, 2024

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

**Syntax

**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 `

`

**Output:

**Example: Change the corner of the rectangle.

html `

<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>

`

Output: