SVG <rect> Element

Beginner

⏱️ 10 min read

📚 Updated: Aug 2026

🎯 5 Examples

🚀 5 Try-it labs

Basic Shape

SVG Rectangle tutorial illustration showing x, y, width, height, rx, and ry

Overview

What You’ll Learn

SVG’s <rect> draws rectangles and rounded rectangles from position and size values. This tutorial covers x, y, width, height, rounded corners with rx / ry, fill and stroke styling, responsive viewBox usage, five worked examples, and how <rect> compares to HTML boxes and other SVG shapes.

<rect>

Core element

Use one element to draw boxes, panels, buttons, tracks, and diagram blocks.

x & y

Top-left corner

Position the rectangle on the SVG canvas using its top-left starting point.

width & height

Size

Control the box dimensions directly with simple numeric values.

rx & ry

Rounded corners

Turn sharp boxes into cards, chips, and pill buttons without extra paths.

Fill & Stroke

Presentation

Paint the inside, outline the edges, or build outline-only rectangles.

viewBox

Responsive

Scale UI boxes and graphics cleanly across layouts because SVG is vector-based.

Introduction

SVG’s <rect> is one of the most practical basic shapes on the web. It draws everything from simple highlight boxes to fully rounded buttons, cards, panels, progress tracks, and diagram containers.

Unlike a CSS layout box, an SVG rectangle lives inside a graphic coordinate system. That makes it ideal when you want precise geometry, scalable vector output, and easy combination with gradients, filters, icons, text, or other shapes.

Why it matters?

Many modern interface pieces are rectangles with slight radius, subtle stroke, and responsive scaling. Learning <rect> gives you the foundation for buttons, cards, panels, badges, and data-visualisation frames.

Key Highlights

Four Geometry Values

x, y, width, and height define the basic box.

Rounded With rx / ry

One tweak transforms a plain box into a card, chip, or pill button.

Fill & Outline

Use fill, stroke, and stroke-width to style the rectangle.

Responsive Box Design

Combine <rect> with a viewBox so one drawing scales anywhere.

In short: set the top-left point, give the box a width and height, then add fill, stroke, and optional rounded corners.

Foundation

📝 Syntax

Basic form of the SVG rectangle element:

index.html

<svg width="220" height="140">
  <rect x="30" y="20" width="160" height="90" />
</svg>

Attributes

Attribute	Type	Description
`x`	Length / number	x-coordinate of the rectangle’s top-left corner. Defaults to `0`.
`y`	Length / number	y-coordinate of the rectangle’s top-left corner. Defaults to `0`.
`width`	Length / number	Width of the rectangle. If `0`, nothing is drawn.
`height`	Length / number	Height of the rectangle. If `0`, nothing is drawn.
`rx`	Length / number	Horizontal radius of the rounded corners.
`ry`	Length / number	Vertical radius of the rounded corners.
`fill`	Paint	Interior color, gradient, pattern, or `none`.
`stroke`	Paint	Outline color around the rectangle.
`stroke-width`	Length / number	Outline thickness in user units.

What It Draws

Result	Details
vector rectangle	Renders a box shape from a top-left point plus width and height, optionally with rounded corners.

Minimal workflow

index.html

<svg width="220" height="140" viewBox="0 0 220 140">
  <rect x="30" y="20" width="160" height="90"
        fill="#3b82f6" stroke="#0f172a" stroke-width="2" />
</svg>

Geometry tips

Idea	Detail	Notes
Origin	`(0, 0)` is top-left	y grows downward
Visibility	`width` and `height` must be positive	Zero size means nothing renders
Rounded corners	`rx` / `ry` soften corners	Large values create capsule-like shapes

Cheat Sheet

⚡ Quick Reference

Goal	Code
Basic rectangle	`<rect x="30" y="20" width="160" height="90" />`
Rounded card	`rx="16" ry="16"`
Outline only	`fill="none" stroke="#0f172a" stroke-width="3"`
Pill button	`rx="999" ry="999"`
Responsive SVG	`<svg viewBox="0 0 220 140">...` + CSS width
CSS themed box	`fill="currentColor"` or CSS `rect { fill: ... }`

Compare

📋 `<rect>` vs CSS box vs `<circle>` vs `<polygon>` vs `<path>`

All can create visible shapes, but they solve different problems.

<rect>

box shape

Best for vector rectangles, panels, cards, and rounded UI blocks inside SVG.

div / CSS box

layout box

Best for normal HTML layout, document flow, and standard interface structure.

round shape

Use when you need one radius and a perfect circle.

many corners

Use for custom multi-sided shapes like triangles or hexagons.

<path>

any outline

Use when primitives are not enough and you need curves or mixed commands.

Context

When to Use `<rect>`

Reach for <rect> whenever your SVG needs a box-based foundation.

Cards & panels
Perfect for container boxes, headers, tiles, and dashboard cards.
Buttons & chips
Rounded rectangles make natural foundations for pills, tags, and CTAs.
Progress tracks
Use one rect for the track and another for the filled progress portion.
Diagrams & nodes
Flow charts and architecture diagrams often use rectangles for steps or services.
Not for round shapes
If the shape should be perfectly round, use <circle> instead.

Key benefit: one simple element covers sharp boxes, rounded cards, and pill buttons without switching to complex paths.

Hands-On

Examples Gallery

Five starter snippets using <rect>. Click View Output for a preview, or Try It Yourself to edit live.

📚 Getting Started

Start with a basic filled box, then add rounded corners.

Example 1 — Basic Rectangle With Fill + Stroke

Draw a blue rectangle with a dark outline using position, size, fill, and stroke.

index.html

<svg width="220" height="140">
  <rect x="30" y="25" width="160" height="90"
        fill="#3b82f6" stroke="#0f172a" stroke-width="2" />
</svg>

Try It Yourself

How It Works

The browser places the rectangle’s top-left corner at (30, 25), then stretches it to the given width and height. fill paints the inside, while stroke outlines the edges.

Example 2 — Rounded Rectangle With `rx` / `ry`

Round the corners to create a softer card or button-like shape.

index.html

<svg width="240" height="150" viewBox="0 0 240 150">
  <rect x="30" y="35" width="180" height="80"
        rx="18" ry="18"
        fill="#10b981" stroke="#065f46" stroke-width="3" />
</svg>

Try It Yourself

How It Works

rx and ry curve the corners instead of leaving sharp 90-degree angles. Rounded corners are especially common in modern interface design for cards, pills, and call-to-action buttons.

📈 Practical Patterns

Outline styles, responsive boxes, and pill-shaped buttons.

Example 3 — Outline-Only Rectangle

Remove the fill and keep only the border for frames, placeholders, and focus rings.

index.html

<svg width="240" height="140">
  <rect x="25" y="25" width="190" height="90"
        fill="none" stroke="#7c3aed" stroke-width="4" />
</svg>

Try It Yourself

How It Works

fill="none" stops the interior from being painted, so the rectangle shows only its outline. This is a common pattern for frames, empty states, and hover highlights.

Example 4 — Responsive Rectangle With `viewBox`

Define the rectangle in SVG coordinates, then let CSS control how large it appears on the page.

index.html

<style>
  .card-frame { width: 180px; height: auto; display: block; }
</style>

<svg class="card-frame" viewBox="0 0 220 120"
     role="img" aria-label="Responsive blue card frame">
  <rect x="20" y="20" width="180" height="80"
        rx="14" fill="#dbeafe" stroke="#2563eb" stroke-width="3" />
</svg>

Try It Yourself

How It Works

The viewBox defines the internal coordinate system, while CSS controls the displayed size. That lets the same rectangle scale cleanly across layouts without changing x, y, width, or height.

Example 5 — Pill Button Rectangle

Use a large corner radius so the rectangle becomes a capsule-style button background.

index.html

<svg width="260" height="90" viewBox="0 0 260 90">
  <rect x="20" y="20" width="220" height="50"
        rx="25" ry="25"
        fill="#111827" stroke="#60a5fa" stroke-width="2" />
  <text x="130" y="51" text-anchor="middle"
        font-size="18" fill="white">Get Started</text>
</svg>

Try It Yourself

How It Works

When the corner radius approaches half the rectangle’s height, the ends become fully rounded. This is the standard SVG recipe for pill buttons, tags, and badge backgrounds.

Use Cases

Real-world places where SVG rectangles show up every day.

1. UI Cards

Card shells, alert boxes, stat tiles, and dashboard panels.

Example: a rounded profile summary card.

2. Buttons & Chips

CTA backgrounds, pill buttons, tags, and capsules.

Example: a rounded "Subscribe" button.

3. Progress Bars

Background tracks and filled bars in gauges or loaders.

Example: a horizontal upload progress indicator.

4. Flowchart Nodes

Process steps, labels, and grouped boxes in diagrams.

Example: a "Validate Input" node in a workflow.

5. Data Containers

Tooltip boxes, legend items, and chart annotation backgrounds.

Example: a chart tooltip with a light panel background.

6. Badges & Callouts

Inline labels, message bubbles, and notification shells.

Example: a "New" badge next to a feature name.

Pro Tip: if your design is mostly box-based, <rect> usually gets you there faster than building the same outline with <path>.

Advantages

Why build rectangles with SVG instead of image assets.

1. Simple, Readable Geometry
Position and size are obvious from just four core attributes.
2. Resolution Independent
Rectangles stay crisp on high-density displays without extra exports.
3. Easy Corner Control
rx and ry create modern rounded UI without custom path math.
4. Tiny Markup
One element can replace a downloaded asset for many box-based graphics.
5. Works With SVG Features
Combine rectangles with gradients, patterns, masks, filters, and animation.

Pro Tip: inline SVG rectangles are ideal when a box needs to scale, theme, or sit alongside other vector shapes as one graphic.

Usage Tips

Follow these practices for clean, scalable SVG rectangles.

1. Use viewBox for responsive graphics
Define geometry once, then let CSS control the displayed size.
2. Match radius to the design goal
Small radii feel like cards; large radii create chips and pill buttons.
3. Leave room for the stroke
Half of stroke-width extends outside the box edge and can clip near boundaries.
4. Use currentColor or CSS for theming
That makes SVG buttons and panels adapt naturally to dark mode or brand palettes.
5. Layer rectangles with text and icons
<rect> often works best as the visual foundation for a larger SVG component.

Pro Tip: when a rectangle acts as a button shell, center any <text> with text-anchor="middle" and a clear vertical y-value.

Common Pitfalls

Avoid these mistakes when your rectangle does not look right.

1. Zero width or height
A rectangle with no area does not render.
→ Ensure both dimensions are positive numbers.
2. fill="none" Without a stroke
Nothing is painted if both the fill and outline are effectively invisible.
→ Pair outline-only rectangles with stroke and stroke-width.
3. Drawing outside the viewBox
If the box extends beyond the SVG coordinate system, it gets clipped.
→ Keep x + width and y + height within the SVG bounds, plus room for stroke.
4. Oversized corner radii
Huge rx / ry values can make the shape look more pill-like than intended.
→ Choose a radius that matches the component style you actually want.
5. Using <rect> for HTML layout
An SVG rectangle is a graphic primitive, not a document layout container.
→ Use normal HTML/CSS boxes for page structure and <rect> for vector graphics.

Pro Tip: if a rectangle vanishes, first check width, height, fill/stroke visibility, and whether the shape fits inside the viewBox.

🧠 How `<rect>` Is Drawn

Set the top-left point

The rectangle begins at (x, y), measured from the SVG origin at the top-left corner.

Position

Set width and height

These values tell the browser how far to extend the box horizontally and vertically from the starting point.

Size

Optional: round the corners

Add rx and ry if the box should feel softer or capsule-shaped.

Shape

Paint fill and stroke

Use fill for the interior and stroke / stroke-width for the outline.

Style

A crisp, scalable box shape

The browser draws the rectangle mathematically, so it stays sharp at every zoom level.

Important Notes

<rect> uses top-left positioning plus width and height, not a center point.
SVG origin is the top-left; positive y goes down.
rx and ry create rounded corners and can turn a box into a pill shape.
fill paints the inside; stroke paints the border.
Need a perfect round shape? Use <circle> instead of forcing a rectangle.
Pair rectangles with viewBox when the artwork must scale responsively.

Quick Takeaway: top-left point + size + paint. Add rx / ry when the box should feel more modern or button-like.

Compatibility

Browser Support

The SVG <rect> element is supported in all modern browsers — and has been for many years — as part of SVG 1.1 basic shapes.

✓ SVG 1.1+

SVG <rect>

Usein inline SVG or external .svg files. Geometry, rounded corners, and presentation attributes work consistently across Chrome, Firefox, Safari, Edge, and mobile browsers.

100% Modern browsers

Google Chrome All versions · Desktop & Mobile

Full support

Mozilla Firefox All versions · Desktop & Mobile

Full support

Apple Safari All versions · macOS & iOS

Full support

Microsoft Edge All versions · Chromium & Legacy

Full support

Internet Explorer IE 6+ · Legacy environments

Full support

Opera All modern versions

Full support

<rect> Universal

Bottom line: Safe for production sites. Prefer inline SVG or cached .svg assets; no polyfill is required for current browsers.

Wrap Up

🎉 Conclusion

SVG <rect> is one of the most useful shapes in vector graphics: set x, y, width, and height, then style with fill, stroke, and optional rounded corners.

Practice the five examples above, then continue to SVG Circle to learn how round shapes differ from box-based ones.

Keep dimensions visible, leave room for strokes, and use rx / ry thoughtfully so the box matches the intended UI style.

View Examples Gallery Continue to Circle

Pro Tips

💡 Best Practices

✅ Do

Use a viewBox when the rectangle must scale responsively
Choose rx / ry values that match the UI style
Leave padding so strokes do not clip against SVG edges
Use fill="none" for outline-only boxes and add a visible stroke
Combine rectangles with text, icons, gradients, and filters for richer components

❌ Don’t

Set width or height to 0 and expect a visible shape
Use SVG rectangles as a replacement for normal HTML layout containers
Let thick strokes extend beyond the viewBox and get clipped
Over-round every rectangle if the design calls for sharper cards or panels
Switch to complex <path> markup when a simple <rect> already fits

Summary

Key Takeaways

Knowledge Unlocked

Five things to remember about SVG `<rect>`

Build crisp box shapes the SVG way.

Core concepts

□ 01

<rect>

Core SVG box element

API

xy 02

Position

x & y set the start

Geometry

⇅ 03

Size

width & height matter

Shape

◑ 04

Rounded Corners

rx / ry soften the box

Style

🗺 05

viewBox

Scales cleanly

Responsive

❓ Frequently Asked Questions

How do I draw a rectangle in SVG?

Use the <rect> element inside an <svg>. Set x and y for the top-left corner, width and height for size, then style it with fill and stroke. Example: <rect x="40" y="30" width="120" height="80" fill="skyblue" stroke="black" stroke-width="2" />.

What do x, y, width, and height mean in an SVG rect?

x and y position the rectangle's top-left corner. width sets how wide it is, and height sets how tall it is. If width or height is 0, nothing is rendered.

What do rx and ry do in SVG rectangles?

rx and ry round the corners. rx controls the horizontal corner radius and ry controls the vertical corner radius. If you set only one, browsers typically infer the other so the corners still round.

Why is my SVG rectangle not visible?

Common causes are width or height being 0, the rectangle sitting outside the SVG viewBox, or using fill="none" without adding a visible stroke.

How do I make an SVG rectangle responsive?

Add a viewBox to the parent <svg>, then size the SVG with CSS. The rectangle scales with the SVG coordinate system because SVG is vector-based.

Should I use <rect> or a div/CSS box for UI shapes?

Use <rect> when the shape lives inside an SVG graphic, needs vector scaling, or must combine with other SVG shapes, gradients, filters, or paths. Use a normal div/CSS box for regular document layout and standard HTML interface structure.

Did you Know? 🔊

An SVG <rect> is the foundation of UI cards, buttons, panels, badges, progress tracks, and diagram blocks because one shape can be square, rounded, filled, outlined, or responsive. Because <rect> is so flexible, many SVG UI kits use it as the base shape for skeleton loaders, chart tooltips, toggles, and card backgrounds.

Continue to SVG Circle

Learn how center point and radius create perfect round shapes after mastering SVG rectangles.

Circle tutorial →

About the author

Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

Experience 12 years building web and cloud systems
Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

SVG Introduction SVG Circle

SVG <rect> Element

What You’ll Learn

<rect>

x & y

width & height

rx & ry

Fill & Stroke

viewBox

Introduction

Why it matters?

Four Geometry Values

Rounded With rx / ry

Fill & Outline

Responsive Box Design

📝 Syntax

Attributes

What It Draws

Minimal workflow

Geometry tips

⚡ Quick Reference

📋 <rect> vs CSS box vs <circle> vs <polygon> vs <path>

When to Use <rect>

Cards & panels

Buttons & chips

Progress tracks

Diagrams & nodes

Not for round shapes

Examples Gallery

📚 Getting Started

Example 1 — Basic Rectangle With Fill + Stroke

How It Works

Example 2 — Rounded Rectangle With rx / ry

How It Works

📈 Practical Patterns

Example 3 — Outline-Only Rectangle

How It Works

Example 4 — Responsive Rectangle With viewBox

How It Works

Example 5 — Pill Button Rectangle

How It Works

Use Cases

1. UI Cards

2. Buttons & Chips

3. Progress Bars

4. Flowchart Nodes

5. Data Containers

6. Badges & Callouts

Advantages

1. Simple, Readable Geometry

2. Resolution Independent

3. Easy Corner Control

4. Tiny Markup

5. Works With SVG Features

Usage Tips

1. Use viewBox for responsive graphics

2. Match radius to the design goal

3. Leave room for the stroke

4. Use currentColor or CSS for theming

5. Layer rectangles with text and icons

Common Pitfalls

1. Zero width or height

2. fill="none" Without a stroke

3. Drawing outside the viewBox

4. Oversized corner radii

5. Using <rect> for HTML layout

🧠 How <rect> Is Drawn

Set the top-left point

Set width and height

Optional: round the corners

Paint fill and stroke

A crisp, scalable box shape

Important Notes

Browser Support

SVG &lt;rect&gt;

🎉 Conclusion

💡 Best Practices

✅ Do

❌ Don’t

Key Takeaways

Five things to remember about SVG <rect>

📋 `<rect>` vs CSS box vs `<circle>` vs `<polygon>` vs `<path>`

When to Use `<rect>`

Example 2 — Rounded Rectangle With `rx` / `ry`

Example 4 — Responsive Rectangle With `viewBox`

1. Use `viewBox` for responsive graphics

4. Use `currentColor` or CSS for theming

1. Zero `width` or `height`

2. `fill="none"` Without a stroke

5. Using `<rect>` for HTML layout

🧠 How `<rect>` Is Drawn

SVG <rect>

Five things to remember about SVG `<rect>`