 |
| USE OF HTML5 SVG TAG |
HTML5 <svg> Tag
In addition to HTML5 Canvas, SVG technology is also used to define graphics on any web page. The full name of SVG is Scalable Vector Graphics. This is an XML-based image format. SVG is used to draw two-dimensional vector-based graphics in web pages.
World Wide Web Consortium (W3C) only recommends SVG technology to draw graphics on a web page. SVG provides several methods to draw paths, boxes, circles, text and graphics images.
Advantages of SVG
Some advantages of the SVG are given below.
1. SVG images and their presentation are defined in the XML file. This means that SVG images can be edited through an editor.
2. One particular thing about SVG images is that their quality does not get worse even after zooming too much.
3. SVG images can be searched and indexed by web engines.
4. SVG images can be dynamically modified by javascript.
5. It is possible to print SVG images with high quality at any resolution.
6. With SVG you have built-in animation elements through which SVG images can be animated.
7. All browsers support SVG like other formats such as JPEG, PNG, and GIF etc. So, you can be sure to use it in your webpages.
Difference between Canvas and SVG
Both SVG and Canvas are used to draw graphics on the webpage. You need to know the difference between these for using properly. The difference in the lower SVG and Canvas is explained as below.
1. SVG is vector-based. These are defined by math and made up of different shapes. The graphics drawn by canvas is raster-based and is composed of pixels.
2. SVG contains multiple graphical elements that can be accessed through the DOM. Canvas represents one single HTML. This is like the <img> tag.
3. SVG can be modified with the script as well as CSS. It is not possible to modify the canvas graphics by CSS.
4. The quality of the SVG does not get worse when zooming. When the Canvas graphics zoom, these look blurry.
5. SVG can be printed on high resolution. Canvas graphics can't be printed on high resolution.
6. Drawing SVG graphics is easier and more beneficial than drawing on the canvas because this does not require you to create any type of script. The speed of the page decreases from Scripts, which is not well suited for SEO point of view. SVG can be designed by CSS as any normal HTML element.
HTML5 <svg> Tag Syntax
<svg> tag of HTML5 works as a container for SVG. Graphics are drawn using different tags and attributes in this container. Its simple syntax is given below.
<svg width = "" height = "">
<graphics tags and its attributes>
</ svg>
When defining SVG container it is necessary to define its width and height. There are different graphics tags are available to create graphics in the <svg> container.
1. <line> - draw a line.
2. <circle> - draw a circle.
3. <rect> - draw a rectangle.
4. <polygon> - draw a polygon
5. <text> - draw a text.
Like the canvas, the coordinates of the <svg> container also have the origin, top, left and the corner. Therefore, you define cx and cy attributes by the distance from left to left and top respectively. Also, "fill" attribute is used to fill the graphics.
How to use svg tag in html5?
<svg> Examples in HTML5
An example of drawing a circle through <svg> is given below.
<html>
<body>
<head>
<title>Example draw a Circle</title>
</head>
<head>
<title>Example draw a Circle</title>
</head>
<svg height = "200" width = "200">
<circle cx = "100" cy = "100" r = "80" fill = "red">
</ svg>
</ body>
</ html>
In the above example, the r attribute circle has been used to define the radius. This example produces the below output.
 |
| Drawing circle SVG example |
An example of drawing a line through <svg> is given below.
<!DOCTYPE html>
<html>
<body>
<head>
<title>Example draw a Line</title>
</head>
<head>
<title>Example draw a Line</title>
</head>
<svg height = "600" width = "600">
<line x1 = "50" y1 = "50" x2 = "200" y2 = "200" style = "stroke: rgb (0,255,0); stroke-width: 3;">
</ svg>
</ body>
</ html>
In the above example, a line is drawn in the <svg> container. Start and end points of the line are defined to draw the line. Those defined by x1, y1, x2, y2 Line is defined by stroke property of CSS and stroke-width property of width CSS. This example produces the output below.
 |
| Drawing line SVG example |
An example of drawing a rectangle by SVG is given below.
<!DOCTYPE html>
<html>
<body>
<head>
<title>Example draw a Rectangle</title>
</head>
<head>
<title>Example draw a Rectangle</title>
</head>
<svg width = "200" height = "200">
<rect x = "50" y = "50" width = "100" height = "50" style = "fill: red; stroke: black; stroke-width: 2;">
</ svg>
</ body>
</ html>
In the above example, used fill property is used to define what is to fill the drawn graphic with a color. This example produces the output below.
 |
| Drawing a Rectangle with SVG |
An example of drawing a polygon through <svg> is given below.
An example of drawing a text through <svg> is given below.
<!DOCTYPE html>
<html>
<body>
<head>
<title>Example of Polygon</title>
</head>
<svg height="300" width="600">
<polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:red;"/>
</svg>
</body>
</html>
This example produces the output below.
This example produces the output below.
 |
| SVG POLYGON EXAMPLE |
An example of drawing a text through <svg> is given below.
<!DOCTYPE html>
<html>
<body>
<svg height="200" width="200">
<text x="0" y="20" fill="red" transform="rotate(60 30,50)">SVG is Graphic Tag in HTML5</text>
</svg>
<svg height="200" width="200">
<text x="30" y="30" style="fill:blue;">There are three lines below:
<tspan x="30" y="50">This is a First line.</tspan>
<tspan x="30" y="70">This is a Second line.</tspan>
<tspan x="30" y="90">This is a Third line.</tspan>
</text>
</svg>
</body>
</html>
This example produces the output below.
This example produces the output below.
 |
| SVG TEXT EXAMPLE |
0 Comments:
Post a Comment
Thank you for reading this post. Please do not enter any spam link in the comment box.