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.