Introduction
This chapter demonstrates about the SVG Elements which have the several attributes to built the SVGs, following are the concepts covered in this chapter.
- SVG Graphical Element
- SVG Container Element
Description
SVG Graphic elements are basically having some attributes like fill attribute stroke attribute these are used to fill the color and stroke the width of the image like color and size. The code below demonstrates the eclipse which consist a center point and two radii those are one for x-axis and the another for the y-axis as shown below.
[html]
<html>
<head>
<meta charset="UTF-8">
<h1>SVG Elements</h1>
</head>
<body>
<svg width="300" height="300">
<ellipse cx="150" cy="150" rx="150" ry="100">
</svg>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser then user will get the output as shown below.
The code below demonstrates the SVG Line element which is created by line between the two points these are created by using x1,y1 for the first point and x2,y2 for the second point as shown below.
[html]
<!DOCTYPE html>
<html>
<h1>SVG Elements<h1>
<body>
<svg height="210" width="500">
<line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(0,255,0);stroke-width:2" />
</svg>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser then user will get the output as shown below.
The code below demonstrates the SVG rectangle element which needs x and y value to determine its location and is also required the height and width of the rectangle. User can also get the rounded rectangle by adding the rx,ry as shown below.
[html]
<!DOCTYPE html>
<html>
<body>
<svg width="400" height="110">
<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(255,0,0)">
</svg>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser then user will get the output as shown below.
Thee code below demonstrates the rounded rectangle by adding the rx,ry.
[html]
<!DOCTYPE html>
<html>
<body>
<svg width="400" height="110">
<rect width="300" height="100" rx="20" ry="20"style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(255,0,0)">
</svg>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser then user will get the output as shown below.
The code below demonstrates the SVG Polyline element which is defined as the collection of connected line elements and which are defined in list of points attribute which is in the form of x1, y1, x2, y2, x3, y3 so on is as shown below.
[html]
<!DOCTYPE html>
<html>
<head>
<h1>SVG Elements</h1>
</head>
<body>
<svg height="180" width="500">
<polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" style="fill:white;stroke:blue;stroke-width:4" />
</svg>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser then user will get the output as shown below.
The code below demonstrates the SVG Polygon element in which first and last points are connected same like as a polyline and which uses a list of points.
[html]
<!DOCTYPE html>
<html>
<head>
<h1>SVG Elements</h1>
</head>
<body>
<svg height="210" width="500">
<polygon points="200,10 250,190 160,210" style="fill:purple;stroke:lime;stroke-width:1" />
</svg>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser then user will get the output as shown below.
The code below demonstrates the SVG element Text which is used to add fully accessible text in a SVG Graphics and x and y attributes are used to define its position.
[html]
<!DOCTYPE html>
<html>
<body>
<svg height="30" width="200">
<text x="0" y="15" fill="red">SVG text</text>
</svg>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser then user will get the output as shown below.
Description
SVG Container element is defined by 
<g>
The g element is used to group the items which allows to group the collection of shapes and give the group id or class these are used to animate or style with CSS.
[html]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SVG Elements</title>
</head>
<body>
<svg width="300" height="300">
<g class="group">
<circle cx="50" cy="50" r="50"/>
<circle cx="170" cy="170" r="50"/>
</g>
</svg>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser then user will get the output is as shown below.
The code below demonstrates the grouping the collection shapes as shown below.
[html]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SVG Elements</title>
</head>
<body>
<svg width="300" height="300">
<style>
.group { fill: red; }
</style>
<g class="group">
<circle cx="50" cy="50" r="50"/>
<circle cx="170" cy="170" r="50"/>
</g>
</svg>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser then user will get the output as shown below.
<Defs> element what ever the elements are inserted in Defs those are intended for re-use. The code below demonstrates the Defs element as shown.
[html]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SVG Fundamentals</title>
</head>
<body>
<svg width="300" height="300">
<defs>
<g id="itemForReuse">
<circle cx="50" cy="50" r="50">
</g>
</defs>
<use xlink:href="#itemForReuse" x="0" y="0" fill="#FF7428"/>
<use xlink:href="#itemForReuse" x="120" y="120" fill="#A2CE5D">
</svg>
<body>
</html>
[/html]
Result
By running the above code in a preferred browser then user will get the output as shown below.
Key Points
- SVg element line starts from starting point and ends with ending point.
- User can make the rounded rectangle by adding the rx,ry.
- Defs are the reused elements.