- SVG Tutorial
- SVG - Home
- SVG - Overview
- SVG - Shapes
- SVG - Text
- SVG - Stroke
- SVG - Filters
- SVG - Patterns
- SVG - Gradients
- SVG - Interactivity
- SVG - Linking
- SVG Demo
- SVG - Loaders
- SVG - Dialog
- SVG - Icons
- SVG - Clock
- SVG - Drag
- SVG - Key point
- SVG - Maps
- SVG - amChart
- SVG - Graph
- SVG - Flat Surface Shade
- SVG - Image Filter
- SVG - Text Effects
- SVG - Text With CSS Effects
- SVG - Arrow Effects
- SVG - Brand Effects
- SVG - Gooey Effects
- SVG - Gradients Effects
- SVG - Playful Effects
- SVG - Scroll Effects
- SVG - Side Show Effects
- SVG - Tab Effects
- SVG - Raphael.js Effects
- SVG - Velocity.js Effects
- SVG - Walkway.js Effects
- SVG - zPath.js Effects
- SVG - Vague.js Effects
- SVG - Transformation Effects
- SVG - Full Screen Overlay Effects
- SVG - Lazylinepainter.js Effects
- SVG - Demo Game
- SVG - Real Time SVG AD
- SVG Useful Resources
- SVG - Questions and Answers
- SVG - Quick Guide
- SVG - Useful Resources
- SVG - Discussion
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.
Printsvg_shapes.htm
Advertisements
To Continue Learning Please Login
Login with Google