svg
使用xml描述的矢量文件
W3C标准（1.1）
浏览器支持情况IE9+，chrome33.0+，firefox 28.0+ ，safari 7.0+
位图：是基于颜色的描述，马赛克！！！
矢量图：是基础数学的描述
QQ图片20161218125222.png
svg的使用方式
浏览器直接打开
在html中使用img标签引用
直接在html中使用svg标签
作为css背景
svg的图形与属性<rect> <circle> <line> <polyline> <polygon>
基本属性fill stroke stroke-width transform
rect: x y width height rx ry 可以定义矩形的圆角 倘若没有给RX 它会使用另外一个充当属性
circle: cx cy r
ellipse:cx cy rx ry
line:x1 y1 x2 y2
polyline:points 格式xi,yi空格分开 会将第一个和最后一个点连接起来
基本操作api
创建图形：document.createElementNS(ns,tagName)
添加图形：element.appendChild(childElement)
设置/获取属性：
element.setAttribute(name,value)
element.getAttribute(name)
svg渐变:
<svg>
<defs>
<linearGradient x1="" y1="" x2="" y2=""></linearGradient>
</defs>
</svg>
offset:值为百分比
stop-color:设置渐变颜色
stop-opacity:设置渐变颜色的透明度
使用fill属性，值为url(#XXX)
扇形渐变雷同
svg高斯模糊效果
<svg width="500" height="500">
<defs>
<filter id="Gaussian_Blur">
//fegaussianblur- 高斯模糊,stdDeviation - 设置模糊程度
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
</defs>
<rect x="0" y="0" width="400" height="400" filter="url(#def)">
</svg>
two.js插件，待续
