浏览器支持情况
IE9+、Chrome33.0+、Firefox 28.0+、Safari 7.0+
svg的视窗，视野
canvas与svg两者区别:
canvas:
1)依赖分辨率
2）不支持事件处理器
3）弱的文本渲染能力
4）能够以.png或.jpg格式保存结果图像
5）最适合图像密集型的游戏，其中的许多对象会被频繁重绘
应用场景：提供的功能更原始，适合像素处理，动态渲染和大数据量绘制
Canvas可以针对比较复杂动画制作
svg：
1）不依赖分辨率
2）支持事件处理器
3）最适合带有大型渲染区域的应用程序（比如谷歌地图）
4）复杂度高会减慢渲染速度（任何过度使用DOMD的应用都不快）
5）不适合游戏应用
应用场景：功能更完善，适合静态图片展示，高保真文档查看和打印的应用场景
Svg可以用来制作logo等
基本图形和属性
Path路径设置：
字符串
命令
命令基本规律
区分大小写：大写表示坐标参数为绝对位置，小写则为相对位置
最后的参数表示最终要到达的位置
上一个命令结束的位置就是下一个命令开始的位置
命令可以重复参数表示重复执行同一条命令
案例
M移动位置可以重新设置
<path d="M200 200 h300 v100 l100 -100" stroke="red" fill="none"/>
效果图
<path d="M200 200 h300 v100 l100 -100" stroke="red"/>
矩形rect
例子
<svg>
<rect x="10" y="10" rx="10" ry="10" width="150" height="100" stroke="red" fill="none" /></rect>
</svg>
效果图
圆形circle
例子
<circle cx="250" cy="60" r="50" stroke="green" fill="none">
</circle>
效果图
椭圆ellipse
例子
<ellipse cx="150" cy="80" rx="100" ry="50"
style="fill:yellow;stroke:purple;stroke-width:2"></ellipse>
效果图
直线line
画法：
和多边形的画法很像，都根据顶点来画（宽高和位置都需要根据顶点数值来调）
例子
<line x1="10" y1="120" x2="460" y2="420" stroke="blue"></line>
效果图
折线points
画法：
例子
<polyline points="20,20,40,25 60,40 80,120 120,140 200,180"
style="fill:none;stroke:black;stroke-width:3"></polyline>
效果图
多边形polygon
五角星画法：
<polygon points="122 59,72 205,194 114,49 114,171 205" stroke="red" fill="rgb(36, 108, 140)" />
正方形画法：
<polygon points="10 30,10 100,100 100,100 30" stroke="red" fill="rgb(36, 108, 140)" />
其他图形一般画法：
（长宽都是在坐标里面改，还有位置--记得在对应坐标改，才能形成你想要的模样）
例子
<polygon points="220,10 300,210 170,250 123,234" style="fill:blue;stroke:purple;stroke-width:1" />
效果图
弧线设置
属性：
案例：
（设置fill="none",）
<path d="M200 200 A200 100 0 1 1 300 300" stroke="red" fill="none"/>
效果图
没加上fill属性，默认填充为黑色
<path d="M200 200 A200 100 0 1 1 300 300" stroke="red"/>
效果图
填充，描边和变换
fill,stroke,stroke-width,transform
完整的案例：
Github地址：https://github.com/lilyping/svg_smallYellowCute
由于svg知识篇幅有点多，方便简书小伙伴们更好阅读，分开（一）和（二）篇；文章有些知识点借鉴网上的，感谢提供资料的作者；同时希望总结这些知识点，可以帮到读者们，若文章有写的不好或有错误，请指正和体谅；祝大家心想事成！
本文作者lilyping
越努力，越幸运
原文链接：https://www.jianshu.com/u/3908e601f4ec
微信公众号：BestLilyPing
github:https://github.com/lilyping
Demos源码地址：https://github.com/lilyping
