svg和canvas的区别

svg定义

1.可伸缩的矢量图形
2.是基于xml进行绘制图形
3.svg放大或者改变尺寸情况下图形质量不会有损。
4.svg 绘制出来的每⼀个图形的元素都是独⽴的 DOM 节点，

canvas定义

1.h5新增属性
2.基于js进行绘制图形

两者区别

1、svg每个图形都可以看作是一个对象，如果对象属性发生变化，浏览器可自动重现图形。根据变化自动改变变化部分即可。canvas图形如果绘制完成，不会再得到浏览器的关注。如果图形位置改变，浏览器需要重新绘制。
2、canvas依赖分辨率，svg不依赖分辨率。
3、canvas不支持事件处理器，svg支持。Canvas 绘制的图像 都在Canvas这个画布里面，是Canvas的一部分，不能用js获取已经绘制好的图形元素。
SVG 的一个图形对应一个元素，所以我们可以像处理 DOM 元素一样，很容易地给 SVG 图形元素添加对应的鼠标事件，这也是SVG相较于Canvas的一个非常大的优点可以让图形的用户交互非常简单。
4、canvas适用于大型渲染区域区域程序（比如谷歌地图），svg适用于图像密集型游戏。