SVG <rect>
SVG Shapes
SVG has some predefined shape elements that can be used and manipulated by developers:
Rectangle <rect>
Circle <circle>
Ellipse <ellipse>
Line <line>
Broken line polyline>
Polygon <polygon>
Path <path>
The following sections will explain these elements, starting with rectangular elements.
SVG rectangle-<rect>
Example 1
<rect> tags can be used to create rectangles, as well as variants of rectangles:
Here is the SVG code:
Example
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>
</svg>
For Opera users: view the SVG file (right-click the SVG drawing preview source).
Code parsing:
rectof the elementwidthandheightproperty defines the height and width of the rectanglestyleProperty is used to define the CSS propertyCSS’s
fillproperty defines the fill color of the rectangle (rgb value, color name, or hexadecimal value)CSS’s
stroke-widthproperty defines the width of the rectangular borderCSS’s
strokeproperty defines the color of the rectangular border
Example 2
Let’s look at another example, which contains some new properties:
Example
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect x="50" y="20" width="150" height="150"
style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;
stroke-opacity:0.9"/>
</svg>
For Opera users: view SVG files
Code parsing:
The x attribute defines the left position of the rectangle (for example, x = “0” defines that the distance from the rectangle to the left side of the browser window is 0px)
The y attribute defines the top position of the rectangle (for example, y = “0” defines that the distance from the rectangle to the top of the browserwindow is 0px)
CSS’s
fill-opacityproperty defines the fill color transparency (the legal range is: 0-1)CSS’s
stroke-opacityproperty defines the transparency of the outline color (the legal range is: 0-1)
Example 3
Define the opacity of the entire element:
Here is the SVG code:
Example
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect x="50" y="20" width="150" height="150"
style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5"/>
</svg>
For Opera users: view SVG files
The CSS opacity attribute is used to define the transparency value of the element (range: 0 to 1).
Example 4
For the last example, create a rounded rectangle:
Here is the SVG code:
Example
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect x="50" y="20" rx="20" ry="20" width="150" height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/>
</svg>
For Opera users: view SVG files
rxandryproperty to fillet the rectangle.