SVG vs. Canvas

Posted on 15 Kas 2011

0


Comparison of SVG and Canvas

The tables below give you an overview of the advantages and disadvantages of SVG and Canvas.

Advantages

Canvas SVG
  • 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 .png or.jpg.
  • 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 has very good support for animations. Elements can be animated using a declarative syntax, or via JavaScript.
  • You have full control over each element using the SVG DOM API in JavaScript.
  • 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.

Disadvantages

Canvas SVG
  • 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 canvaselement that is displayed by the Web browser when the element itself cannot be rendered. Additionally, you can perform checks with JavaScript to see if the desired Canvas API is available for use. Based on that you can provide different functionality for users of Web browsers that lack canvas support.
  • 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.

Source: http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/

Posted in: Software, Web