Chapter 5: SVG Rectangle
SVG Rectangle means using the <rect> tag inside SVG to draw a rectangle (or square, or rounded rectangle). It’s one of the easiest and most useful basic shapes in SVG — almost every tutorial starts with <circle>, <line>, and then <rect> because it’s so common for buttons, backgrounds, borders, cards, charts, etc.
Think of <rect> like drawing a box on graph paper: you tell the computer “start here, make it this wide, this tall, color it like this”.
1. Basic Syntax of <rect>
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<rect x="..." <!-- starting left position --> y="..." <!-- starting top position --> width="..." <!-- how wide --> height="..." <!-- how tall --> fill="..." <!-- inside color --> stroke="..." <!-- border color --> stroke-width="..." <!-- border thickness --> /> |
- It’s a self-closing tag (ends with />)
- Must be inside <svg>…</svg>
- width and height are required (without them, nothing shows!)
- x and y default to 0 if you forget them
2. Let’s Make Your First Rectangle (Copy-Paste Example)
Open a new file rectangle.html and paste this:
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>SVG Rectangle Intro</title> </head> <body> <h1>Simple Red Rectangle</h1> <svg width="400" height="300" viewBox="0 0 400 300" style="border:1px solid black;"> <!-- Our first rectangle --> <rect x="50" y="50" width="300" height="200" fill="red" stroke="black" stroke-width="8" /> </svg> </body> </html> |
What happens:
- Starts at (50,50) from top-left of SVG area
- 300 units wide, 200 units tall
- Red inside (fill), black border 8 units thick (stroke + stroke-width)
Zoom the browser — still sharp! That’s SVG power.
3. All Important Attributes (Explained Like a Blackboard)
| Attribute | What it does | Required? | Default | Example value | Notes |
|---|---|---|---|---|---|
| x | Left position (from left edge) | No | 0 | 20, 100, 50% | Like margin-left |
| y | Top position (from top edge) | No | 0 | 30, 80, 20% | Like margin-top |
| width | How wide the box is | Yes | — | 200, 150px, 50% | Must have! |
| height | How tall the box is | Yes | — | 120, 100px, 30% | Must have! |
| fill | Color inside the rectangle | No | black | red, #00ff00, none | none = transparent |
| stroke | Color of the border/outline | No | none | blue, #333 | No border if missing |
| stroke-width | Thickness of border | No | 1 | 4, 10, 2px | In user units |
| rx | Horizontal corner radius (round corners) | No | 0 | 20, 15 | Makes rounded rect |
| ry | Vertical corner radius | No | rx value | 20, 30 | If only rx, ry = rx |
| opacity | Transparency (0 = invisible, 1 = solid) | No | 1 | 0.5, 0.8 | Affects whole rect |
4. Rounded Corners Example (Very Popular!)
Many websites use rounded rectangles for cards/buttons.
|
0 1 2 3 4 5 6 7 8 9 10 11 12 |
<svg width="300" height="200" viewBox="0 0 300 200"> <!-- Sharp corners (default) --> <rect x="20" y="20" width="260" height="160" fill="#3498db" stroke="#2c3e50" stroke-width="5"/> <!-- Rounded corners --> <rect x="20" y="20" width="260" height="160" rx="30" ry="30" fill="#e74c3c" opacity="0.7"/> </svg> |
- rx=”30″ = horizontal curve radius 30 units
- ry=”30″ = vertical same (make different for oval corners!)
If you set only rx, ry copies it automatically.
5. More Fun Examples (Try These!)
Example 1: Transparent + Dashed Border
|
0 1 2 3 4 5 6 |
<rect x="100" y="50" width="200" height="100" fill="none" stroke="purple" stroke-width="10" stroke-dasharray="15 10"/> |
stroke-dasharray=”15 10″ → dash 15 units, gap 10 units (like dotted line)
Example 2: Gradient Fill (Advanced but Cool)
First define gradient in <defs>:
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<svg viewBox="0 0 400 200"> <defs> <linearGradient id="myGrad" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" stop-color="yellow"/> <stop offset="100%" stop-color="orange"/> </linearGradient> </defs> <rect x="50" y="50" width="300" height="100" fill="url(#myGrad)" rx="20"/> </svg> |
Example 3: Hover Effect with CSS
|
0 1 2 3 4 5 6 7 8 9 10 11 12 |
<style> .my-rect:hover { fill: lime; stroke: darkgreen; stroke-width: 12; } </style> <svg width="200" height="150"> <rect class="my-rect" x="20" y="20" width="160" height="110" fill="skyblue" stroke="navy" stroke-width="6" rx="15"/> </svg> |
Hover mouse → color changes!
6. Teacher’s Quick Tips (Hyderabad Exam/Job Style)
- Always add viewBox so it scales nicely on mobile/responsive sites.
- Use percentages sometimes (width=”50%”) but better with viewBox.
- For charts (bar graphs) — people use hundreds of <rect> elements!
- <rect> is faster/easier than drawing rectangle with <path> (path is for complex shapes).
- Common mistake: Forget width/height → invisible rect!
Got it? Now tell me — want to see a full button example with text inside rect? Or rounded card with shadow? Or how to make a progress bar with rect? Or animate the width? Just say — we can go as deep as you want! 🚀
