SVG & Canvas

SVG :
SVG is a followed XML format; it stands for Scalable Vector Graphics which is used to create vector graphics with the support for interactivity and animation.
SVG is resolution independent as it does not lose its quality when they are resized or zoomed.


Canvas
Canvas is a pixel-based graphics and it is one of the new features of HTML5.
It provides a space in the document where we can draw graphics by using JavaScript and it is resolution dependent, hence the quality will be affected when it’s zoomed or resized.

Example :
(!DOCTYPE html>
(html>
(body>
(canvas id="myCanvas" width="300" height="200" style="border:1px solid #d3d3d3; color: #c9cc18;"> Your browser does not support the HTML5 canvas tag.

(script>
var can = document.getElementById("myCanvas");
var canvas = can.getContext("2d");
canvas.font = "20px Hind-sanserif";
canvas.fillText("Canvas Example",30,60);
(/script>
(/body>
(/p>
(/body>
(/html>