Skip to content
Related Articles

Related Articles

HTML SVG <rect>
  • Last Updated : 19 Aug, 2020
GeeksforGeeks - Summer Carnival Banner

The SVG &lt;rect&gt; element is used to create a rectangle. We can customize the reactangle 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:




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




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

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :