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.
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