svg和canvas的区别

svg是线条图，和分辨率无关.。方法缩小依旧可以高清显示适应
cavans是基于像素的，可以对每个像素点进行操作。

Canvas适用场景

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

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

SVG适用场景
SVG功能更完善，适合静态图片展示，高保真文档查看和打印的应用场景(例如百度地图的实现，放大缩小不会失真模糊)

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

svg优点：

矢量图，不依赖于像素，无限放大后不会失真。
以dom的形式表示，事件绑定由浏览器直接分发到节点上。

svg缺点：

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

canvas优点：

定制型更强，可以绘制绘制自己想要的东西。
非dom结构形式，用JavaScript进行绘制，涉及到动画性能较高。

canvas缺点：

事件分发由canvas处理，绘制的内容的事件需要自己做处理。
依赖于像素，无法高效保真，画布较大时候性能较低。

为什么SVG不会是矢量图，不失真？
因为是使用对线条进行操作，记录的是起始点和终点以及线条的路径。放大缩小时，坐标也跟着放大缩小，所以不会失真。
而我们的canvas是像素，放大会失真，也和屏幕分辨率有关。

为什么svg不适合动画？
因为svg是dom，当图片动画改变，会引起dom的重绘。
而我们的canvas是js操作像素点，可以线上图片和视频（canvas视频操作）