SVG Rectangle

The <rect> element is used to draw rectangles and squares, one of the most basic shapes in SVG.

Basic Syntax

<svg width="200" height="100">
  <rect width="200" height="100" fill="#3b82f6"/>
</svg>

Main Properties

Property	Description
x	Top-left x coordinate (default 0)
y	Top-left y coordinate (default 0)
width	Rectangle width
height	Rectangle height
rx	Corner x-axis radius
ry	Corner y-axis radius
fill	Fill color
stroke	Stroke color
stroke-width	Stroke width

Basic Rectangles

<svg width="300" height="200">
  <!-- Blue rectangle -->
  <rect x="10" y="10" width="120" height="80" fill="#3b82f6"/>

  <!-- Green rectangle -->
  <rect x="150" y="10" width="120" height="80" fill="#22c55e"/>

  <!-- Red rectangle -->
  <rect x="10" y="100" width="120" height="80" fill="#ef4444"/>

  <!-- Purple rectangle -->
  <rect x="150" y="100" width="120" height="80" fill="#8b5cf6"/>
</svg>

Rectangles with Stroke

<svg width="300" height="150">
  <!-- Stroke only -->
  <rect x="10" y="10" width="100" height="80"
        fill="none" stroke="#3b82f6" stroke-width="2"/>

  <!-- Fill + stroke -->
  <rect x="130" y="10" width="100" height="80"
        fill="#bfdbfe" stroke="#3b82f6" stroke-width="3"/>

  <!-- Dashed stroke -->
  <rect x="250" y="10" width="100" height="80"
        fill="none" stroke="#3b82f6" stroke-width="2"
        stroke-dasharray="5,3"/>
</svg>

Rounded Rectangles

Use rx and ry properties to create rounded corners:

<svg width="400" height="200">
  <!-- Small rounded corners -->
  <rect x="10" y="10" width="100" height="80" rx="5" fill="#3b82f6"/>

  <!-- Medium rounded corners -->
  <rect x="130" y="10" width="100" height="80" rx="15" fill="#22c55e"/>

  <!-- Large rounded corners -->
  <rect x="250" y="10" width="100" height="80" rx="30" fill="#ef4444"/>

  <!-- Fully rounded (pill shape) -->
  <rect x="10" y="110" width="150" height="60" rx="30" fill="#8b5cf6"/>

  <!-- Different rx and ry -->
  <rect x="180" y="110" width="100" height="60" rx="20" ry="10" fill="#f59e0b"/>
</svg>

Tip

If only rx is set, ry automatically uses the same value.

Squares

A square is simply a rectangle with equal width and height:

<svg width="200" height="200">
  <rect x="50" y="50" width="100" height="100" fill="#3b82f6"/>
</svg>

Opacity

<svg width="300" height="150">
  <!-- Semi-transparent rectangle -->
  <rect x="10" y="10" width="100" height="100" fill="#3b82f6" opacity="0.5"/>

  <!-- Another semi-transparent rectangle (overlapping) -->
  <rect x="60" y="30" width="100" height="100" fill="#ef4444" opacity="0.5"/>

  <!-- Using fill-opacity -->
  <rect x="180" y="10" width="100" height="100"
        fill="#22c55e" fill-opacity="0.7"
        stroke="#22c55e" stroke-width="3" stroke-opacity="1"/>
</svg>

Using CSS Styling

You can use CSS to set rectangle styles:

<style>
  .my-rect {
    fill: #3b82f6;
    stroke: #1d4ed8;
    stroke-width: 2px;
    transition: all 0.3s ease;
  }
  .my-rect:hover {
    fill: #60a5fa;
    transform: scale(1.05);
  }
</style>

<svg width="200" height="100">
  <rect class="my-rect" x="10" y="10" width="80" height="80"/>
</svg>

Animated Rectangles

Use SVG built-in animation:

<svg width="300" height="100">
  <rect x="10" y="10" width="80" height="80" fill="#3b82f6">
    <!-- Color animation -->
    <animate attributeName="fill"
             values="#3b82f6;#ef4444;#22c55e;#3b82f6"
             dur="3s"
             repeatCount="indefinite"/>
  </rect>

  <rect x="110" y="10" width="80" height="80" fill="#8b5cf6">
    <!-- Width animation -->
    <animate attributeName="width"
             values="80;120;80"
             dur="1.5s"
             repeatCount="indefinite"/>
  </rect>

  <rect x="210" y="10" width="80" height="80" fill="#22c55e">
    <!-- Corner radius animation -->
    <animate attributeName="rx"
             values="0;40;0"
             dur="2s"
             repeatCount="indefinite"/>
  </rect>
</svg>

Practical Application Examples

Progress Bar

<svg width="300" height="30">
  <!-- Background -->
  <rect x="0" y="0" width="300" height="30" rx="15" fill="#e5e7eb"/>
  <!-- Progress -->
  <rect x="0" y="0" width="210" height="30" rx="15" fill="#3b82f6"/>
  <!-- Text -->
  <text x="150" y="20" text-anchor="middle" fill="white" font-size="14">70%</text>
</svg>

Button

<svg width="150" height="50">
  <rect x="0" y="0" width="150" height="50" rx="8" fill="#3b82f6"/>
  <text x="75" y="32" text-anchor="middle" fill="white" font-size="16" font-weight="bold">
    Click Me
  </text>
</svg>

Card

<svg width="200" height="250">
  <!-- Card background -->
  <rect x="0" y="0" width="200" height="250" rx="12" fill="white"
        stroke="#e5e7eb" stroke-width="1"/>
  <!-- Top image area -->
  <rect x="0" y="0" width="200" height="120" rx="12" fill="#3b82f6"/>
  <!-- Fix bottom rounded corners -->
  <rect x="0" y="100" width="200" height="30" fill="#3b82f6"/>
</svg>

Next Steps

Now that you've learned rectangles, let's learn about SVG Circle!