什么时候该用SVG，什么时候该用Canvas——优缺点分析–SVG or Canvas? Сhoosing between the two

SVG or Canvas? Сhoosing between the two

SVG还是Canvas呢？一般人不我告诉他

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

参考文章： http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/

This is a Chinese translation of the advantages/disadvantages portion.

这里只翻译一下他们的优劣势那一段：

Advantages

优点比较

Canvas	SVG
High performance 2D surface for drawing anything you want. 画2D图形时，页面渲染性能比较高 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 画出来的图形可以直接保存为 .png 或者 .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的这个特性使得它在不同的平台或者媒体下表现良好，无论屏幕分辨率如何 SVG has very good support for animations. Elements can be animated using a declarative syntax, or via JavaScript. SVG对动画的支持较好；其DOM结构可以被其特定语法或者Javascript控制，从而轻松的实现动画 You have full control over each element using the SVG DOM API in JavaScript. Javascript可以完全控制SVG Dom 元素 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 ARIA attributes. SVG的结构是 XML，其可访问性（盲文、声音朗读等）、可操作性、可编程性、可被CSS样式化完胜Canvas。另外，其支持 ARIA 属性，使其如虎添翼。

Canvas

SVG

High performance 2D surface for drawing anything you want.
画2D图形时，页面渲染性能比较高

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
画出来的图形可以直接保存为 .png 或者 .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的这个特性使得它在不同的平台或者媒体下表现良好，无论屏幕分辨率如何

SVG has very good support for animations. Elements can be animated using a declarative syntax, or via JavaScript.
SVG对动画的支持较好；其DOM结构可以被其特定语法或者Javascript控制，从而轻松的实现动画

You have full control over each element using the SVG DOM API in JavaScript.
Javascript可以完全控制SVG Dom 元素

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 ARIA attributes.
SVG的结构是 XML，其可访问性（盲文、声音朗读等）、可操作性、可编程性、可被CSS样式化完胜Canvas。另外，其支持 ARIA 属性，使其如虎添翼。

Disadvantages

缺点列举

Canvas	SVG
There are no DOM nodes for anything you draw. It is all pixels. 整个就是一张图，无论你往上画什么东西——没有DOM 结点可供操作 There’s no API for animation. You have to resort to timers and other events to update the Canvas when needed. 没有实现动画的API，你必须依靠定时器和其他事件来更新Canvas 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 element 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就白瞎了。 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. 用户界面交互要求高的（比如TIBCO的很多产品），我们一般不用Canvas，因为你会崩溃的。不管你信不信，反正我是信了。	Slow rendering when document complexity increases — anything that uses the DOM a lot will be slow. DOM么~~当然是比正常的图形慢了，而且如果其结点多而杂，就更慢了。 SVG might not be suited by itself for applications like games. Perhaps the best choice would be a Canvas + SVG combination. SVG 画点报表什么的，还在行；在网页游戏前，就束手无策了；当然，我们可以结合 Canvas + SVG，实现梦想。

Canvas

SVG

There are no DOM nodes for anything you draw. It is all pixels.
整个就是一张图，无论你往上画什么东西——没有DOM 结点可供操作

There’s no API for animation. You have to resort to timers and other events to update the Canvas when needed.
没有实现动画的API，你必须依靠定时器和其他事件来更新Canvas

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 element 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就白瞎了。

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.
用户界面交互要求高的（比如TIBCO的很多产品），我们一般不用Canvas，因为你会崩溃的。不管你信不信，反正我是信了。

Slow rendering when document complexity increases — anything that uses the DOM a lot will be slow.
DOM么~~当然是比正常的图形慢了，而且如果其结点多而杂，就更慢了。

SVG might not be suited by itself for applications like games. Perhaps the best choice would be a Canvas + SVG combination.
SVG 画点报表什么的，还在行；在网页游戏前，就束手无策了；当然，我们可以结合 Canvas + SVG，实现梦想。

小方翻译，外加注释，如有雷同，不胜荣幸，多有得罪，还请见谅。