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 colour or sharp & rounded corner rectangles etc.
Parameters used
Let’s see an example to see all the parameters used in a SVG rectangle.
- <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
- style="fill:red;stroke:black;stroke-width:5;opacity:0.5"
- class="style class" >
- </rect>
Where:
- <rect> declares the rectangle.
- x & y coordinates of the top-left corner of the rectangle and the default is (0,0).
- Width & height of the rectangle.
- rx & ry rounds the corners of the rectangle.
- Style specifies the inline style.
- Class specifies the external name to the tag.
Let’s see a first example of a SVG rectangle.
Example 1
- <html>
- <body>
- <svg width="200" height="100">
- <rect width="200" height="100" style="fill:#00c800;stroke-width:5;stroke:#c80000">
- </svg>
- </body>
- </html>
Output
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 rectangle that defines the fill colour of rectangle, the CSS stroke-width property defines the border width of the rectangle and the
stroke property defines the border colour of the rectangle.
Example 2
Rectangles with various rounded corners.
- <html>
- <body>
-
<h1> Different Rounded Corners</h1>
<svg width="500" height="200">
<rect x="20" y="20" rx="10" ry="10" width="150" height="80" style="fill:blue;stroke:red;stroke-width:5"/>
<rect x="180" y="20" rx="20" ry="20" width="150" height="80" style="fill:grey;stroke:orange;stroke-width:5"/>
<rect x="340" y="20" rx="30" ry="30" width="150" height="80" style="fill:cyan;stroke:green;stroke-width:5">
</svg>
-
- </body>
- </html>
Output
Example 3
Rectangle with various corner rounding coordinates.
- <html>
- <body>
- <h1>Different corner rounding coordinates</h1>
- <svg width="500" height="300">
- <rect x="20" y="20" rx="5" ry="15" width="100" height="70" style="fill:grey;stroke:green;stroke-width:5"/>
- <rect x="180" y="20" rx="10" ry="30" width="100" height="70" style="fill:pink;stroke:orange;stroke-width:5"/>
- <rect x="340" y="20" rx="20" ry="50" width="100" height="70" style="fill:yellow;stroke:black;stroke-width:5">
- </svg>
- </body>
- </html>
Output
Example 4
Overlapped rounded corners rectangle.
- <html>
- <body>
- <h1>Overlapped Rounded Corners</h1>
- <svg width="300" height="200">
- <rect x="30" y="20" rx="10" ry="10" width="200" height="150" style="fill:blue;stroke:red;stroke-width:15"/>
- <rect x="30" y="20" rx="20" ry="20" width="200" height="150" style="fill:grey;stroke:orange;stroke-width:10"/>
- <rect x="30" y="20" rx="30" ry="30" width="200" height="150" style="fill:cyan;stroke:green;stroke-width:5">
- </svg>
- </body>
- </html>
Output
In the preceding code, rx & ry are used to round the corners of rectangle.
Example 5
Rectangle with opacity.
- <html>
- <body>
- <h1>Rectangle with opacity</h1>
- <svg width="300" height="200">
- <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">
- </svg>
- </body>
- </html>
Output
Example 6
Overlapped rectangles with complete element opacity.
- <html>
- <body>
- <h1>Overlapped with opacity</h1>
- <svg width="400" height="300">
- <rect x="20" y="20" width="150" height="100" style="fill:orange;stroke:red;stroke-width:5;opacity:0.5"/>
- <rect x="90" y="60" width="200" height="100" style="fill:blue;stroke:black;stroke-width:5;opacity:0.5"/>
- <rect x="240" y="20" width="150" height="100" style="fill:green;stroke:cyan;stroke-width:5;opacity:0.5"/>
- </svg>
- </body>
- </html>
Output
Example 7
Rectangle with dashed strokes.
- <html>
- <body>
- <h1>Rectangle with dashed strokes</h1>
- <svg width="400" height="300">
- <rect x="20" y="20" width="150" height="80" style="fill:none;stroke:red;stroke-width:3;stroke-dasharray: 10 5"/>
- <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"/>
- </svg>
- </body>
- </html>
Output
Example 8
Rectangles with transformation (rotation).
- <html>
- <body>
- <svg viewBox = "0 0 200 200" version = "1.1">
- <rect x = "20" y = "40" width = "30" height = "20" fill = "lightgreen" stroke = "tomato" stroke-width = "1" transform = "rotate(-45 100 100)"/>
- </svg>
- </body>
- </html>
Output:
- <html>
- <body>
- <svg viewBox = "0 0 200 200" version = "1.1">
- <rect x = "25" y = "25" width = "30" height = "20" fill = "#0f0fff" stroke = "#0f0f00" stroke-width = "1" transform = "rotate(-150 30 30)"/>
- </svg>
- </body>
- </html>
Output:
Thank you, keep learning and sharing.