Advertisement

Advertisement


HTML SVG

The SVG stands for Scalable Vector Graphics. HTML SVG is used to describe graphics. It is much easier to use than canvas. It is a W3C recommendation. SVG is mostly used for vector type diagrams like pie charts, 2-Dimensional graphs in an X,Y coordinate system etc. SVG has several methods for drawing paths, boxes, circles, text, and graphic images.


<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> HTML SVG Circle Method </title> </head> <body> <svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="1" fill="green" /> </svg> </body> </html>

Output

HTML SVG Circle Method

HTML SVG Rectangle


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML SVG Rectangle Method </title>
</head>
<body>
<svg width="400" height="100">
<rect width="400" height="100" stroke="black" stroke-width="1" fill="lightgray" />
</svg>
</body>
</html>

Output

HTML SVG Rectangle Method Examples

HTML SVG Star


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML SVG Star Method </title>
</head>
<body>
<svg height="200" width="300">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:red;stroke:green;stroke-width:1;fill-rule:evenodd;" />
</svg>
</body>
</html>

Output

HTML SVG Star Method Examples

Difference between SVG and Canvas

SVG refers as shape based but Canvas refers as pixel based. Due to its capabilities to render large applications it is suited for the applications with large rendering areas like google maps whereas Canvas is not so good in rendering capabilities.

SVGs are more flexible to expand the size beyond its natural size whereas Canvas images are not so flexible.

Also, SVG supports working with event handlers but Canvas does not provide support for them. In terms of gaming also, SVG is not suited for gaming applications but on the other hand Canvas are well suited for those applications.

In SVG, images cannot be saved in other formats but Canvas allows us to save the resulting images in .png and .jpg format.

Browser Support

Element
Microsoft Edge browser.png Edge
Chrome browser.png Chrome
Firefox browser.png Firefox
Opera browser.png Opera
safari browser.png Safari
<svg>
Yes
Yes
Yes
Yes
Yes








Become a Patron!

Note: If the updated content is not visible to you please refresh the cookies by pressing CTRL + Shift + R.