Difference between SVG and HTML5 Canvas

0 4136

SVG and canvas are both technologies that can be creating rich graphics on web browsers, but they are fundamentally different.

SVG

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

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.

In Canvas, we need the script to draw the graphics. It provides an empty graphic zone on which specific JavaScript APIs can draw (such as Canvas 2D or WebGL).

Difference between SVG and CANVAS

SVG	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 images can be modified using JavaScript and CSS	CANVAS is can be modified using JavaScript only
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