Open In App

SVG rect Element

Improve
Improve
Like Article
Like
Save
Share
Report

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:



Last Updated : 01 Jul, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads