What is the difference between canvas and svg ?

SVG

• Vector based (composed of shapes)
• SVG has better scalability. So it can be printed with high quality at any resolution.
• SVG gives better performance with smaller number of objects or larger surface.
• SVG can be modified through script and CSS.
• Multiple graphical elements, which become the part of the page’s DOM tree.

Canvas

• Raster based (composed of pixel)
• Canvas has poor scalability. Hence it is not suitable for printing on higher resolution.
• Canvas gives better performance with smaller surface or larger number of objects.
• Canvas can be modified through script only.
• Single element similar to <img> in behavior. Canvas diagram can be saved to PNG or JPG format.