HTML5 Difference Between SVG and Canvas

Both Canvas and SVG are graphics features of HTML5 for creative interactive web designs. Depending upon your choice, you can choose Canvas or SVG or a combination of both. SVG is at a higher level as each drawn shape is remembered as an object in a scene graph which is rendered to a bit map afterwards whereas Canvas is a lower level protocol.

Differences Between SVG and Canvas are as below

Format

SVG is Shape Based whereas Canvas is Pixel based.

DOM Dependency

Canvas has no dependency on the DOM while SVG depends heavily on DOM.

Feature Specification

If you just want image or graph on the screen then you can use Canvas e.g. PNG, BMP etc. but if you want give some features of your graphics like zoom, mouse over etc then you can use SVG.

Modification

In SVG, modification is possible using script and CSS while in Canvas, modification is possible using script only.

Redrawing

With SVG, it is possible to redraw the image by just looking at the elements and attributes whereas with Canvas you have to redraw every frame yourself using the API.

Resolution

Resolution remains the same across platforms for images created using SVG which lacks in Canvas.

Performance

In SVG, performance is better with small number of objects, a larger surface or both while in Canvas, performance is better with comparatively large number of objects, a smaller surface or both.

Example