SVG Rectangle (original) (raw)

Last Updated : 28 Apr, 2025

SVG Rectangle is used in HTML is used to make rectangles. There is an element which is wrapped inside the

Syntax

Attributes

• co-ordinates: Itdefines the x-coordinates of the rectangle, and y defines the y-coordinates of the rectangle. Attributes x and y both have default values of 0.
• width: It defines the width of the rectangle and height defines the height of the rectangle.
• stroke-width: It defines the thickness of the stroke and stroke defines the color of the stroke.
• fill: It defines the color filled inside the rectangle and rx and ry are used to round the corners.

Example 1: In this example, we will see the SVG Rectangle with rounded corners using rx and ry attributes.

HTML `

GeeksforGeeks

SVG Rectangle

<svg width="200" 
     height="200">
    <rect x="25" 
          y="25"
          rx="15" 
          ry="15" 
          width="150" 
          height="150" 
          stroke="green"
          stroke-width="3"
          fill="rgb(205, 250, 137)">
      </rect>
</svg>

`

Output:

SVG Rectangle

Example 2: In this example, we will see the SVG Rectangle with opacity.

HTML `

GeeksforGeeks

SVG Rectangle with opacity

<svg width="250" 
     height="250">
    <rect x="10%"
          y="10%" 
          width="200" 
          height="200"
          stroke="green" 
          stroke-width="5"
          fill="yellow" 
          opacity="0.4">
    </rect>
</svg>

`

Output:

Fill rectangle with opacity