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、svg适用于大型渲染区域区域程序(比如谷歌地图),canvas适用于图像密集型游戏。