SVG vs Canvas – Tutorials Art

SVG(Scalable Vector Graphics) and Canvas both are used for HTML graphics but are different. Now Lets see the SVG vs Canvas below.

SVG vs Canvas:

SVG	Canvas
SVG is vector based graphics(composed of shapes).	Canvas is raster based graphics(composed of pixels).
It has better scalability So, it is resolution independent.	It has poor scalability So, it is resolution dependent.
In SVG graphics are based on XML and can also modified using script and CSS.	In canvas graphics are drawn using JavaScript.
It is not suited for game applications.	It is well suited for graphic intensive-games.
It provide support for event handlers.	It do not provide support for event handlers.
SVG images cannot be saved in other formats.	It can be saved in .png and .jpg format.
SVG is flexible as its size can be change beyond natural.	Canvas images are not flexible.
It is best for applications having large rendering areas such as(Google Maps).	Canvas has poor text rendering capabilities.

	       <h2> Circle using SVG</h2>
		
               <svg width="100" height="100">
               <circle cx="50" cy="50" r="40" stroke="black" stroke-width="5" fill="pink" />
               </svg>
		
		<h2>Circle using Canvas</h2>
		
		<canvas id="canvas1" width="200" height="100">
		</canvas>

	        <script>
		var cn = document.getElementById("canvas1");
		var ctx = cn.getContext("2d");
		ctx.beginPath();
		ctx.arc(50,50,40,0,2*Math.PI);
		ctx.fillStyle = 'pink';
                ctx.lineWidth = 5;
                ctx.fill();
		ctx.stroke();
		</script>

Visit difference between SVG and Canvas for more differences.