SVG - Rect
<rect> element is used to draw rectangle which is axis aligned with the current user co-ordinate system.
Declaration
Following is the syntax declaration of <rect> element. We've shown main attributes only.
<rect x="x-axis co-ordinate" y="y-axis co-ordinate" width="length" height="length" rx="length" ry="length" style="style information" class="style class" > </rect>
Attributes
Sr.No. | Name&Description |
---|---|
1 | x − x-axis co-ordinate of top left of the rectangle. Default is 0. |
2 | y − y-axis co-ordinate of top left of the rectangle. Default is 0. |
3 | width − width of the rectangle. |
4 | height − height of the rectangle. |
5 | rx − used to round the corner of the rounded rectangle. |
6 | ry − used to round the corner of the rounded rectangle. |
7 | style − used to specify inline styles. |
8 | class − used to specify external style name to the element. |
Example
testSVG.htm<html> <title>SVG Rectangle</title> <body> <h1>Sample SVG Rectangle Image</h1> <svg width="800" height="800"> <g> <text x="0" y="15" fill="black" > Rectangle #1: Without opacity.</text> <rect x="100" y="30" width="300" height="100" style="fill:rgb(121,0,121);stroke-width:3;stroke:rgb(0,0,0)"></rect> </g> </svg> </body> </html>
Output
Open textSVG.htm in Chrome web browser. You can use Chrome/Firefox/Opera to view SVG image directly without any plugin. Internet Explorer 9 and higher also supports SVG image rendering.
Rectangle with opacity
<html> <title>SVG Rectangle</title> <body> <h1>Sample SVG Rectangle Image</h1> <svg width="800" height="800"> <g> <text x="0" y="15" fill="black" > Rectangle #2: With opacity </text> <rect x="100" y="30" width="300" height="100" style="fill:rgb(121,0,121);stroke-width:3;stroke:rgb(0,0,0); stroke-opacity:0.5;opacity:0.5"> </rect> </g> </svg> </body> </html>
Output
Open textSVG.htm in Chrome web browser. You can use Chrome/Firefox/Opera to view SVG image directly without any plugin. Internet Explorer 9 and higher also supports SVG image rendering.
Rectangle #3: With Rounded Corner
<html> <title>SVG Rectangle</title> <body> <h1>Sample SVG Rectangle Image</h1> <svg width="570" height="200"> <g> <text x="0" y="15" fill="black" > Rectangle #3: With Rounded Corner </text> <rect x="100" y="100" rx="10" ry="10" width="300" height="100" style="fill:rgb(121,0,121);stroke-width:3;stroke:rgb(0,0,0);"></rect> </g> </svg> </body> </html>
Output
Open textSVG.htm in Chrome web browser. You can use Chrome/Firefox/Opera to view SVG image directly without any plugin. Internet Explorer 9 and higher also supports SVG image rendering.