Comparison of SVG and Canvas
The tables below give you an overview of the advantages and disadvantages of SVG and Canvas.
- High performance 2D surface for drawing anything you want.
- Constant performance — everything is a pixel. Performance only degrades when the image resolution increases.
- You can save the resulting image as a
- Best suited for generating raster graphics (for example in games, fractals, etc.), editing of images, and operations requiring pixel-level manipulation.
- Resolution independence — this makes SVG better suited for cross-platform user interfaces because it allows scaling for any screen resolution.
- SVG is an XML file format, which means that depending on each Web browser implementation the accessibility of SVG documents can be much better than that of
canvas elements. This makes SVG a better solution for Web application user interfaces. Even if SVG provides mostly presentational markup, the semantics of the user interface can be improved with ARIAattributes.
- There are no DOM nodes for anything you draw. It is all pixels.
- There’s no API for animation. You have to resort to timers and other events to update the Canvas when needed.
- Poor text rendering capabilities.
- Might not be the best choice for cases where accessibility is crucial. Canvas gives you a surface to draw onto with the API of the context you choose. Inherently, this means it is all pixels — unless some future API will define additional capabilities for accessibility. For now, you can provide fallback content inside the
- Canvas is not suited for Web site or application user interfaces. This is because user interfaces typically need to be dynamic and interactive, and Canvas requires you to manually redraw each element in the interface. Other reasons would be the lack of animation and accessibility support.
- Slow rendering when document complexity increases — anything that uses the DOM a lot will be slow.
- SVG might not be suited by itself for applications like games. Perhaps the best choice would be a Canvas + SVG combination.