用于HTML5浏览器的SVG还是Canvas？

Question

如果浏览器的最低支持是IE9、Chrome16、FF13、Safari5.1.&Opera10，那么用HTML/JavaScript创建图形的最佳方法是什么？SVG还是Canvas？

Google Charts？

Answer 1

使用https://stackoverflow.com/a/1651167/138772和http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/

您应该使用Canvas执行以下操作：

• 交互式图像编辑:裁剪、调整大小、滤镜(考虑去除红眼、深褐色、着色、etc.)
• Generating栅格图形:数据可视化、数据绘图、渲染分形、函数绘图)。
• 图像分析:读取像素以收集直方图、颜色使用情况以及其他任何您可以imagine.
• Rendering游戏图形的数据，如精灵和backgrounds.

您应该使用SVG执行以下操作：

• Resolution-independent网络应用程序用户interfaces.
• Highly交互式动画用户interfaces.
• Data图表和plots.
• Vector图像编辑。

因此，基本上，如果您想要有漂亮的矢量化图形和通过DOM操作它们的能力，请使用SVG，但如果您只想绘制它们，而不需要矢量化(您可以设置它，使其无论如何都可以缩放到页面/窗口大小)或DOM使用，则使用Canvas。不过，我个人还是推荐SVG，因为我喜欢矢量图形。