SVG and canvas are both technologies that can be creating rich graphics on web browsers, but they are fundamentally different.
SVG is a vector-based graphics, and it's useful for defining graphics such as boxes, circles, text, and XML-based image format.
It is a language for describing 2D-graphics and graphical applications in XML. Most Web browsers can display SVG just like they can display PNG, GIF, and JPG.
SVG images are way better than bitmap images.
Canvas is an HTML5 element, which is used to draw graphics for the dynamic, scriptable rendering of 2D and 3D shapes and bitmap images on the web page.
Difference between SVG and CANVAS
|SVG is an XML based vector image (composed of shapes) format||CANVAS is Raster based (composed of the pixel) format|
|SVG is more flexible as we can expand it's beyond its natural||CANVAS is not flexible|
|SVG does not suit for any gaming application||CANVAS is suited for gaming applications|
|SVG generates only 2D graphics||CANVAS is generating 2D graphics as well as 3D graphics|
|SVG best suited for applications with large rendering areas (for example, Google Maps)||CANVAS best suited for low for large rendering areas|
|SVG doesn't depend on the resolution||CANVAS depend on the resolution|
|It is capable of API animation||CANVAS is capable of API animation|