Canvas vs. SVG

– Elements are drawn programmatically
– Drawing is done with pixels
– Animations are not built in
– High performance for pixels-based drawing operations
– Resolution dependent
– No support for event handlers
– You can save the resulting image as .png or .jpg
– Well suited for graphic-intensive games

– Elements are part of the page’s DOM (Document object model)
– Drawing is done with vectors
– Effects, such as animations are built in
– Based on standard XML syntax, which provides better accessibility
–  Resolution independent
– Support for event handlers
– Not suited for game applications
– Best suited for applications with large rendering areas (for example, Google Maps)

You can actually use both SVG and canvas on the same page, if needed. However, you cannot just draw SVG onto a canvas, or vice-versa.