3 HTML5 svg

SVG:Scalable Vector Graphics;//可缩放矢量图形 ->svg图像放大情况下图形质量不会损失(失真)；  - ->应用场景：图表、动画、矢量图(点/线/面,形成的基本图形)、常用于制作图标icon

1、canvas与svg的区别：

(1).canvas是由像素点构成的，其依赖分辨率，其放大后会"失真"；其通过js来绘制2D图形，常用来制作游戏、图表(运行速度快)；

(2).svg是由图形(点/线/面)构成的，其不依赖分辨率，放大后也不会"失真"；其通过标签+样式，所以复杂度太高会拖慢页面渲染，其适合制作图标；

补充：canvas -> 小面积：由于是js操作，同步执行，过多使用会阻塞页面；大数量应用场景：其可操作大型应用，游戏、图表等；svg -> 大面积：其是标签+样式，相对js操作而言，其可大量使用；小数量：其往往应用在制作图标；

2、(1).基本图形绘制 -> <svg width="" height=""> 系列操作 </svg>

(2).path指令 -> 自动生成路径： Method Draw: http://editor.method.ac/

(3).SVG渐变 -> 其他滤镜：http://www.w3school.com.cn/svg/svg_filters_intro.asp

(4).svg路径动画属性很常用，viewBox应用场景还OK

(5).js脚本操作

var svg = document.createElementNS("http://www.w3.org/2000/svg","svg");//创建元素方式较特别