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.
Output
HTML SVG Rectangle
<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 Star
<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
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
 Edge |
 Chrome |
 Firefox |
 Opera |
 Safari |
|
|---|---|---|---|---|---|
<svg> |