What is the difference between SVG and HTML5 Canvas?

Question

What are the differences between SVG and HTML5 Canvas? They both seem to do the same to me. Basically, they both draw vector artwork using coordinate points.

What am

Answer 1

High Level Summary of Canvas vs. SVG

Canvas

1. Pixel based (Dynamic .png)
2. Single HTML element.(Inspect element in Developer tool. You can see only canvas tag)
3. Modified through script only
4. Event model/user interaction is granular (x,y)
5. Performance is better with smaller surface, a larger number of objects (>10k), or both

SVG

1. Shape based
2. Multiple graphical elements, which become part of the DOM
3. Modified through script and CSS
4. Event model/user interaction is abstracted (rect, path)
5. Performance is better with smaller number of objects (<10k), a larger surface, or both

For detailed difference, read http://msdn.microsoft.com/en-us/library/ie/gg193983(v=vs.85).aspx