SVG <rect>
SVG has some predefined shape elements that can be used and
manipulated by developers.
SVG Shapes
SVG has some predefined shape elements that can be used and manipulated by
developers:
- Rectangle <rect>
- Circle <circle>
- Ellipse <ellipse>
- Line <line>
- Polyline <polyline>
- Polygon <polygon>
- Path <path>
The following chapters will explain each element,
starting with the rect element.
The <rect> Tag
The <rect> tag is used to create a rectangle and variations of a
rectangle shape.
To understand how this works, copy the following code into Notepad and save
the file as "rect1.svg". Place the file in your Web directory:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:1;
stroke:rgb(0,0,0)"/>
</svg>
|
Code explanation:
- The width and height attributes of the rect element define the height and
the width of the rectangle
- The style attribute is used to define CSS properties
- The CSS fill property defines the fill color of the
rectangle (either an rgb value, a color name, or a hexadecimal value)
- The CSS stroke-width property defines the width of the border of the
rectangle
- The CSS stroke property defines the color of the border of the rectangle
View example
Let's look at another example that contains some new attributes:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" width="250" height="250"
style="fill:blue;stroke:pink;stroke-width:5;
fill-opacity:0.1;stroke-opacity:0.9"/>
</svg>
|
Code explanation:
- The x attribute defines the left position of the rectangle (e.g. x="0"
places the rectangle 0 pixels from the left of the browser window)
- The y attribute defines the top position of the rectangle (e.g. y="0"
places the rectangle 0 pixels from the top of the browser window)
- The CSS fill-opacity property defines
the opacity of the fill color (legal range: 0 to 1)
- The CSS stroke-opacity property defines
the opacity of the stroke color (legal range: 0 to 1)
View example
Define the opacity for the whole element:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" width="250" height="250"
style="fill:blue;stroke:pink;stroke-width:5;
opacity:0.9"/>
</svg>
|
Code explanation:
- The CSS opacity property defines
the opacity value for the whole element (legal range: 0 to 1)
View example
Last example, create a rectangle with rounded corners:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" rx="20" ry="20" width="250"
height="100" style="fill:red;stroke:black;
stroke-width:5;opacity:0.5"/>
</svg>
|
Code explanation:
- The rx and the ry attributes rounds the corners of the rectangle
View example
Click here to design a Stunning Flash Website for Free
Wix is a revolutionary web design tool that provides anyone with the possibility to create professional and beautiful websites for free.
With e-commerce features, search engine visibility and many more professional tools, Wix is the ultimate solution for creating a spectacular site while saving tons of money.
| 
