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:

Output:👁 Image

Example: Change the corner of the rectangle.

Output:

👁 Image