Introduction

Before reading further, read the following article.
SVG Rectangle
The tag <rect> represents a rectangle in SVG and by this, you can draw various types of rectangles like various widths & heights or with various strokes or color or sharp & rounded corner rectangles, etc.
Parameters used
Let’s see an example to see all the parameters used in an SVG rectangle.
  1. <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  2. style="fill:red;stroke:black;stroke-width:5;opacity:0.5"
  3. class="style class" >
  4. </rect>
Where:
Let’s see the first example of an SVG rectangle.
Example 1
  1. <html>
  2. <body>
  3. <svg width="200" height="100">
  4. <rect width="200" height="100" style="fill:#00c800;stroke-width:5;stroke:#c80000">
  5. </svg>
  6. </body>
  7. </html>
Output
fill colour of rectangle
In the preceding code width and height defines the width and height of the rectangle as 100 * 200, the style attribute defines the CSS properties of a rectangle that defines the fill color of rectangle, the CSS stroke-width property defines the border width of the rectangle and the stroke property defines the border color of the rectangle.
Example 2
Rectangles with various rounded corners.
  1. <html>
  2. <body>
  4. <h1> Different Rounded Corners</h1>
  5. <svg width="500" height="200">
  6. <rect x="20" y="20" rx="10" ry="10" width="150" height="80" style="fill:blue;stroke:red;stroke-width:5"/>
  7. <rect x="180" y="20" rx="20" ry="20" width="150" height="80" style="fill:grey;stroke:orange;stroke-width:5"/>
  8. <rect x="340" y="20" rx="30" ry="30" width="150" height="80" style="fill:cyan;stroke:green;stroke-width:5">
  9. </svg>
  11. </body>
  12. </html>
Output
Rectangles with different rounded corners
Example 3
Rectangle with various corner rounding coordinates.
  1. <html>
  2. <body>
  3. <h1>Different corner rounding coordinates</h1>
  4. <svg width="500" height="300">
  5. <rect x="20" y="20" rx="5" ry="15" width="100" height="70" style="fill:grey;stroke:green;stroke-width:5"/>
  6. <rect x="180" y="20" rx="10" ry="30" width="100" height="70" style="fill:pink;stroke:orange;stroke-width:5"/>
  7. <rect x="340" y="20" rx="20" ry="50" width="100" height="70" style="fill:yellow;stroke:black;stroke-width:5">
  8. </svg>
  9. </body>
  10. </html>
Output
Rectangle with different corner
Example 4
Overlapped rounded corners rectangle.
  1. <html>
  2. <body>
  3. <h1>Overlapped Rounded Corners</h1>
  4. <svg width="300" height="200">
  5. <rect x="30" y="20" rx="10" ry="10" width="200" height="150" style="fill:blue;stroke:red;stroke-width:15"/>
  6. <rect x="30" y="20" rx="20" ry="20" width="200" height="150" style="fill:grey;stroke:orange;stroke-width:10"/>
  7. <rect x="30" y="20" rx="30" ry="30" width="200" height="150" style="fill:cyan;stroke:green;stroke-width:5">
  8. </svg>
  9. </body>
  10. </html>
Output
corners of rectangle
In the preceding code, rx & ry are used to round the corners of the rectangle.
Example 5
Rectangle with opacity.
  1. <html>
  2. <body>
  3. <h1>Rectangle with opacity</h1>
  4. <svg width="300" height="200">
  5. <rect x="50" y="20" width="200" height="150" style="fill:green;stroke:blue;stroke-width:5;fill-opacity:0.4;stroke-opacity:0.7">
  6. </svg>
  7. </body>
  8. </html>
Output
round the corners of rectangle
Example 6
Overlapped rectangles with complete element opacity.
  1. <html>
  2. <body>
  3. <h1>Overlapped with opacity</h1>
  4. <svg width="400" height="300">
  5. <rect x="20" y="20" width="150" height="100" style="fill:orange;stroke:red;stroke-width:5;opacity:0.5"/>
  6. <rect x="90" y="60" width="200" height="100" style="fill:blue;stroke:black;stroke-width:5;opacity:0.5"/>
  7. <rect x="240" y="20" width="150" height="100" style="fill:green;stroke:cyan;stroke-width:5;opacity:0.5"/>
  8. </svg>
  9. </body>
  10. </html>
Output
Overlapped rectangles
Example 7
Rectangle with dashed strokes.
  1. <html>
  2. <body>
  3. <h1>Rectangle with dashed strokes</h1>
  4. <svg width="400" height="300">
  5. <rect x="20" y="20" width="150" height="80" style="fill:none;stroke:red;stroke-width:3;stroke-dasharray: 10 5"/>
  6. <rect x="180" y="20" width="150" height="80" style="fill:orange;stroke:blue;fill-opacity:0.6;stroke-width:3;stroke-dasharray: 10 5"/>
  7. </svg>
  8. </body>
  9. </html>
Output
Output
Example 8
Rectangles with the transformation (rotation).
  1. <html>
  2. <body>
  3. <svg viewBox = "0 0 200 200" version = "1.1">
  4. <rect x = "20" y = "40" width = "30" height = "20" fill = "lightgreen" stroke = "tomato" stroke-width = "1" transform = "rotate(-45 100 100)"/>
  5. </svg>
  6. </body>
  7. </html>
Output:
design
  1. <html>
  2. <body>
  3. <svg viewBox = "0 0 200 200" version = "1.1">
  4. <rect x = "25" y = "25" width = "30" height = "20" fill = "#0f0fff" stroke = "#0f0f00" stroke-width = "1" transform = "rotate(-150 30 30)"/>
  5. </svg>
  6. </body>
  7. </html>
Output:
see output
Want to read more...
Thank you, keep learning and sharing.