一、什么是SVG？
可缩放矢量图形是基于可扩展标记语言（标准通用标记语言的子集），用于描述二维矢量图形的一种图形格式。它由万维网联盟制定，是一个开放标准。并不属于HTML5专有内容，在HTML5出现之前，就有SVG内容，HTML5只不过提供了SVG原生的内容
二、SVG与canvas的区别：
SVG :
实际开发中，多用SVG
可以被搜索引擎搜索到
不依赖分辨率
支持事件处理器
不适合游戏
大型渲染区域的程序(例如，百度地图)
Canvas
依赖分辨率
不支持事件绑定
最适合网页游戏
可以用图片格式保存图像
不是是SVG还是Canvas，在一个页面中都可以同时定义多个
三、SVG 绘制图形
使用<svg></svg>标签，类似于canvas元素，但可以使用css样式；使用svg绘制图形，必须定义在svg元素中。
- 绘制矩形
<rect x="100" y="100" width="200" height="150" fill="blue" stroke="red"
stroke-width="5"> </rect>
- 圆形
<circle cx="50" cy="50" r="50"></circle>
- 椭圆
<ellipse cx="" cy="" rx="" ry="">
- 直线
<line x1="10" y1="10" x2="200" y2="200" stroke-width="10" stroke="black">
必须加颜色，否则不显示
- 折线
points - 设置起点 折点及重点，x和y用逗号分隔，多个折点用空格隔开
会默认将折线中的区域(起点到终点)，默认提供黑色,将fill设置为canvas的颜
色，将stroke设置为另一种颜色
<polyline points=" 10,10 20,20 30,30">
- 多边形
不用考虑折点的显示问题
<polygon points="10,10 20,20 30,30 10,10">
综合实例：
<svg id="huatu" style="width:400px;height:400px;background:red">
<rect x="10" y="10" width="200" height="150" fill="blue" stroke="white" stroke-width="4"> </rect>
<circle cx="100" cy="230" r="50" fill="yellow" stroke="orange" stroke-width="4"></circle>
<ellipse cx="100" cy="340" rx="80" ry="50" fill="green"></ellipse>
<line x1="230" y1="20" x2="230" y2="380" stroke-width="10" stroke="black"></line>
<!--<polyline points="230,150 300,150 400,40 230,150" fill="red" stroke="white" stroke-width="20px">-->
<polygon points=250,50 350,50 300,200 250,50" fill="red" stroke="white></polygon>
</svg>
SVG绘图
四、渐变
<svg style="width:400px;height:400px">
<!--svg渐变效果几个问题
1.设置linearGradient的坐标值都得是百分比
2.设置通过stop设置颜色，offset的值必须是百分比，而且stop必须要有结束符<stop/>或<stop></stop>
3.将绘制的图形与渐变效果结合时 fill="url(#linearGradient的id值)"-->
<defs >
<!--lineargradient渐变元素-->
<linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="100%">
<!--stop添加渐变颜色-->
<stop offset="0%" stop-color="red"/>
<stop offset="100%" stop-color="green"/>
</linearGradient>
</defs>
<rect x="0" y="0" width="400" height="400" fill="url(#linear)" stroke="black" stroke-width="5" ></rect>
</svg>
渐变
高斯模糊
<svg width="500" height="500" " >
<defs>
<filter id="Gaussian_Blur"> //滤镜
<!--//fegaussianblur- 高斯模糊,stdDeviation - 设置模糊程度 -->
<feGaussianBlur in="SourceGraphic" stdDeviation="10" />
<!--in="SourceGraphic"是固定写法-->
</filter>
</defs>
<rect x="0" y="0" width="400" height="400" fill="red" filter="url(#Gaussian_Blur">
</svg>
高斯模糊
