The <rect> element is a basic SVG shape that draws rectangles, defined by their position, width, and height. The rectangles may have their corners rounded.

Example

<svg viewBox="0 0 220 100" width="220" height="100" xmlns="http://www.w3.org/2000/svg">
  <!-- Simple rectangle -->
  <rect width="100" height="100" />

  <!-- Rounded corner rectangle -->
  <rect x="120" width="100" height="100" rx="15" />
</svg>

Attributes

• x

The x coordinate of the rect.

<svg viewBox="0 0 220 100" width="220" height="110" xmlns="http://www.w3.org/2000/svg">
  <rect x="0" width="50" height="50" />
    <rect x="60" width="50" height="50" />
    <rect x="120" width="50" height="50" />
</svg>

• y

The y coordinate of the rect.

<svg viewBox="0 0 220 100" width="220" height="110" xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="10" width="50" height="50" />
    <rect x="60" y="20" width="50" height="50" />
    <rect x="120" y="30" width="50" height="50" />
</svg>

• width

The width of the rect.

<svg viewBox="0 0 220 100" width="220" height="110" xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="10" width="20" height="50" />
    <rect x="60" y="20" width="30" height="50" />
    <rect x="120" y="30" width="40" height="50" />
</svg>

• height

The width of the rect.

<svg viewBox="0 0 220 100" width="220" height="110" xmlns="http://www.w3.org/2000/svg">
  <rect x="0"  width="50" height="20" />
    <rect x="60"  width="50" height="30" />
    <rect x="120"  width="50" height="40" />
</svg>

• rx 、ry

rx:The horizontal corner radius of the rect.

ry:The vertical corner radius of the rect.

<svg viewBox="0 0 220 100" width="220" height="110" xmlns="http://www.w3.org/2000/svg">
  <rect x="0" width="50" height="50" rx="4" ry="4" />
    <rect x="60" width="50" height="50" rx="8" ry="8" />
    <rect x="120" width="50" height="50" rx="12" ry="12" />
</svg>

• fill

<svg viewBox="0 0 220 100" width="220" height="110" xmlns="http://www.w3.org/2000/svg">
  <rect x="0"  width="50" height="50" fill="#ff0000" />
   <rect x="60"  width="50" height="50" fill="#00ff00"/>
   <rect x="120"  width="50" height="50" fill="#0000ff"/>
</svg>

• fill-opacity

<svg viewBox="0 0 220 100" width="220" height="110" xmlns="http://www.w3.org/2000/svg">
  <rect x="0"  width="50" height="50" fill="#ff0000" fill-opacity="0.1"/>
  <rect x="60"  width="50" height="50" fill="#ff0000" fill-opacity="0.5"/>
  <rect x="120"  width="50" height="50" fill="#ff0000" fill-opacity="1"/>
</svg>

• stroke

The stroke attribute is a presentation attribute defining the color used to paint the outline of the shape;

<svg viewBox="0 0 220 100" width="220" height="110" xmlns="http://www.w3.org/2000/svg">
 <rect x="0"  width="50" height="50" fill="#ff0000" stroke="#000000"/>
   <rect x="60"  width="50" height="50" fill="#ff0000" stroke="#00ff00"/>
   <rect x="120"  width="50" height="50" fill="#ff0000" stroke="#0000ff"/>
</svg>

• stroke-width

The stroke-width attribute is a presentation attribute defining the width of the stroke to be applied to the shape.

<svg viewBox="0 0 220 100" width="220" height="110" xmlns="http://www.w3.org/2000/svg">
  <rect x="0"  width="50" height="50" fill="#ff0000" stroke="#000000" stroke-width="2" />
   <rect x="60"  width="50" height="50" fill="#ff0000" stroke="#00ff00" stroke-width="4"/>
   <rect x="120"  width="50" height="50" fill="#ff0000" stroke="#0000ff" stroke-width="6"/>
</svg>

• stroke-opacity

The stroke-opacity attribute is a presentation attribute defining the opacity applied to the stroke of a shape.

<svg viewBox="0 0 220 100" width="220" height="110" xmlns="http://www.w3.org/2000/svg">
   <rect x="0"  width="50" height="50" fill="#ff0000" stroke="#000000" stroke-width="6" stroke-opacity="0.1"/>
   <rect x="60"  width="50" height="50" fill="#ff0000" stroke="#000000" stroke-width="6" stroke-opacity="0.5"/>
   <rect x="120"  width="50" height="50" fill="#ff0000" stroke="#000000" stroke-width="6" stroke-opacity="1"/>
</svg>