What do rx and ry do in an SVG rect?

rx and ry control rounded corners. rx is the x-axis corner radius and ry is the y-axis corner radius. If you set only one, the other often matches it.

Why is my SVG rectangle not visible?

Common causes: width/height is 0, the rectangle is outside the viewBox, or fill is none and stroke is missing.

Can I style with CSS?

Yes. You can set fill, stroke, stroke-width and add hover/focus styles using CSS selectors.

How do I make an SVG rectangle responsive?

Use a viewBox on the parent and size the SVG with CSS. The rectangle scales with the SVG coordinate system.

SVG Rectangle

Q: How do I draw a rectangle in SVG?

Use the element with x, y, width, and height. Style it with fill and stroke. Example: .

Beginner

⏱️ 6 min read

📚 Updated: Aug 2025

🎯 2 Examples

Basic Shape

SVG Rectangle tutorial illustration showing x, y, width, height and rounded corners

What You’ll Learn

The SVG <rect> element draws rectangles and rounded rectangles. It’s one of the most useful SVG shapes for UI: cards, buttons, backgrounds, badges, and diagram blocks.

You’ll learn the core geometry attributes (x, y, width, height) plus rounded corners with rx/ry, and common styling with fill and stroke.

⚡ Quick Reference — SVG Rect Attributes

x, y number

Top-left corner coordinates

width, height number

Rectangle size

rx, ry number

Corner radius (rounded rectangle)

fill color

Interior colour

stroke color

Outline colour

stroke-width number

Outline thickness

Basic Syntax

<svg>
  <rect x="50" y="50" width="100" height="80" />
</svg>

👀 Live Preview — Sharp vs Rounded

Rounded corners are controlled by rx and ry.

Sharp corners

Rounded (rx=12)

Rounded + stroke

Basic Rectangle

A simple rectangle with fill and stroke styling.

index.html

<svg width="200" height="200">
  <rect x="50" y="50" width="100" height="80" fill="blue" stroke="black" stroke-width="2" />
</svg>

Try It Yourself

Rounded Rectangle (rx/ry)

Rounded corners are controlled by rx and ry. This is common for cards and buttons.

index.html

<svg width="240" height="160" viewBox="0 0 240 160">
  <rect x="30" y="40" width="180" height="80" rx="18" ry="18"
        fill="#10b981" stroke="#064e3b" stroke-width="3" />
</svg>

💡 Best Practices

Do

Use a viewBox if the rectangle must scale responsively
Use rx/ry for modern UI shapes (buttons/cards)
Keep stroke widths consistent across a component set
Use CSS classes for styling if you have many rectangles
Set fill="none" if you only want an outline

Don’t

Set width/height to 0 (nothing will render)
Place the rectangle outside the viewBox/canvas by accident
Over-round corners (rx/ry too large for the size)
Rely on stroke only without setting stroke-width
Hard-code pixel sizes if the graphic needs to be responsive

❓ Frequently Asked Questions

How do I draw a rectangle in SVG?

Use <rect> with x, y, width, and height. Style with fill and stroke.

What do rx and ry do?

They control rounded corners. Increase them to make the rectangle look more like a pill or card.

Why is my rectangle not visible?

Check that width and height are not zero, the rectangle is inside the viewBox, and you have either a visible fill or a stroke.

Can I style <rect> with CSS?

Yes. Use CSS selectors to set fill, stroke, stroke-width, and hover/focus effects.

How do I make SVG rectangles responsive?

Use a viewBox on the parent <svg> and size the SVG with CSS so it scales cleanly.

Level Up Your Stroke Styling

Next, learn stroke width, caps, joins, and dash patterns for clean SVG design.

SVG Stroke →

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)

4 people found this page helpful

SVG Radial Gradients SVG Stroke