Comparison between canvas and SVG in elements

On this page we are going to briefly explain main differences between SVG and canvas elements in HTML.

Although the results are very similar, there are still some significant differences among them. Here are most of them:

• SVG is language used to describe 2D graphics in XML. Canvas draws 2D graphics dynamically (with the help of JavaScript).
• Being XML based, SVG may be reached with SVG DOM (document object model) and it has good support for event handlers. Canvas has no support for event handlers.
• SVG represent an object that causing every attribute change to make browser re-render it.
• Canvas is pixel orientated (drawn pixel by pixel) and once it gets drawn, browser forgets about it. That makes it suitable for video games. However it is suitable as a graphic container, and not as an active element because upon every position change it has to be redrawn. SVG is scalable vector-based graphics and is less suitable for containing video games, but more for vector graphics.
• Canvas is better as image holder and it may be used to save resulting images .png or .gif.
• Because Canvas draws pixels well, it is also suitable as API container.
• Canvas is resolution dependent. SVG is resolution independent.
• SVG has better text rendering then Canvas.
• Canvas is more suitable for rendering smaller areas. SVG renders better larger areas such as Google Maps (scalable).
• SVG may be slower in rendering than Canvas, especially if a lot of DOM is applied to.

The table below shows simplified advantages and disadvantages of each of the technologies mentioned above.

›› go to examples ››