SVG 与 HTML5 的 canvas 优缺点

Canvas适用场景

    Canvas提供的功能更原始，适合像素处理，动态渲染和大数据量绘制

• 依赖分辨率 
• 不支持事件处理器
• 弱的文本渲染能力
• 能够以 .png 或 .jpg 格式保存结果图像
• 最适合图像密集型的游戏，其中的许多对象会被频繁重绘

SVG适用场景

   SVG功能更完善，适合静态图片展示，高保真文档查看和打印的应用场景

• 不依赖分辨率,无限放大后不会失真
• 支持事件处理器
• 最适合带有大型渲染区域的应用程序（比如谷歌地图）
• 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
• 不适合游戏应用

 

svg优点：

矢量图，不依赖于像素，无限放大后不会失真。

以dom的形式表示，事件绑定由浏览器直接分发到节点上。

svg缺点：

dom形式，涉及到动画时候需要更新dom，性能较低。

 

canvas优点：

定制型更强，可以绘制绘制自己想要的东西。

非dom结构形式，用JavaScript进行绘制，涉及到动画性能较高。

canvas缺点：

事件分发由canvas处理，绘制的内容的事件需要自己做处理。

依赖于像素，无法高效保真，画布较大时候性能较低。