What is the difference between SVG and <Canvas>?

[sinelogixtech]

What is the difference between SVG and <Canvas>?

[sinelogixtech]

(09-13-2017, 05:02 AM)sinelogixtech Wrote: What is the difference between SVG and <Canvas>?

SVG:

1. Vector based (composed of shapes)
   
2. Multiple graphical elements, which become the part of the DOM
   
3. Modified through script and CSS
   
4. Give better performance with smaller number of objects or larger surface, or both
   
5. Better scalability — can be printed with high quality at any resolution
   

CANVAS :

1. Raster based (composed of pixel)
   
2. Single HTML element similar to <img> in behavior
   
3. Modified through script only
   
4. Give better performance with smaller surface or larger number of objects, or both
   
5. Poor scalability — not suitable for printing on higher resolution
   

[saurabh mathur]

SVG- SVG stands for Scalable Vector Graphics that is based upon the XML vector image and hence for two dimensional graphics with the support for interactivity and animation purpose.
CANVAS- The canvas is the element that is basically used to draw the graphics on web pages. The graphic is generally to the left and hence is created with <canvas>.