SVG和Canvas区别

SVG

SVG是可缩放矢量图形，是基于可扩展标记语言XML描述的2D图形的语言，SVG基于XML就意味着SVG DOM中的每个元素都是可用的，可以为某个元素附加Javascript事件处理器。在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

Canvas

Canvas是画布，通过Javascript来绘制2D图形，是逐像素进行渲染的。其位置发生改变，就会重新进行绘制。

区别

• SVG不依赖分辨率，放大后不会失真，而Canvas依赖分辨率，放大会导致图形失真
• SVG支持事件处理器，Canvas不支持事件处理器
• Canvas渲染文字能力较弱，因为Canvas是按像素来渲染的，
• Canvas可以保存为png、jpg图像

应用

• Canvas是画布，绘画出来的图形是位图，渲染性能较高。一般游戏开发和一些比较复杂的图表都是使用Canvas开发的。

• 而SVG，比较适合做大图，地图，因为放大之后不会失真。