Being confused with Canvas and SVG tags? They both seem some places where you can draw graphs? This article will briefly explore the main differences between these two elements.
Svg: a language for defining vector-based graphics for the Web.
Canvas: the container for graphics.
Differences:
1. Canvas is resolutions dependent whereas Svg is resolutions independent. That means, when you amplify the graph drawn in Canvas, it would become blur but the one drawn by Svg retains its quality.
2. In Canvas, you draw your graphics using JavaScript because Canvas just provides a blank painting cloth. However, Svg is XML-based and you can draw graphics within Svg using tags such as <rect>, <text>, <circle>, etc.
3. Since Svg is XML-based, you can add handlers to Svg elements.
4. Derived from its XML-based nature, Svg uses DOM. The more DOMs you use, the slower your websites tend to be.
Use Cases:
Based on the differences between Canvas and Svg, W3C gives these recommendations for implementation:
(source link: http://www.w3.org/wiki/HTML/Canvas_and_SVG )