svg 的一些用法讲解及梳理总结
在运用了一些SVG技术之后，对它进行一定的梳理，目录如下：
1、SVG是什么？
2、SVG和Canvas有什么区别
3、SVG的支持情况
4、SVG的几种基本图形
5、SVG在移动端的一些使用技巧
6、引申高度：SVG对于前端工程师的重要性
首先，我们来说下SVG是什么，名称的全拼是可缩放矢量图形（Scalable Vector Graphics），官方的解释是SVG是基于XML来描述二维图形和绘制程序的语言，它有几个特点，一：它是矢量的，在放大和缩小的情况下不会变形，二：它是用XML格式来绘制的；XML是什么，它是被设计用来传输和储存数据的一种可标记语言，简单点来说就是用规则允许内用自己设计的标签来储存数据用的
那么它和Canvas有什么区别呢，个人认为最大的不同就是在于绘制方式的不同，一个是用XML来绘制的，一个是用js来绘制的，js依赖像素，所以Canvas图形依赖屏幕分辨率，图形在不同的屏幕下可能有不同程度的失真，官方的解释更为全面一些，参考网址：http://www.w3school.com.cn/html5/html_5_canvas_vs_svg.asp；
SVG图形基于矢量的特点一定会被广泛的应用，那么它的支持情况怎样呢，SVG支持IE9及其以上和现代所有的浏览器，而且是可以直接镶嵌在h5页面当中的，也就是<!DOCTYPE html>标记的，这里特别提示一些命名空间的概念，也就是SVG的xmlns属性，命名空间就是一套标准，就是该元素的所有内容都是用这个空间的标准来解析；但是看到张大大的一篇文章说在火狐浏览器上有一些bug，本人没有测试过，附上原文链接一睹bug壮观，http://www.zhangxinxu.com/wordpress/2012/08/svg-feature-support-bugs/
SVG有七种基本图形，分别为矩形、圆形、椭圆、线、折线、多边形、路径，一些简单的图形可以使直接用这些预定义好的标签，当然这些图形都是可以使用路径来实现的，对于路径的书写来说，它是由几个命令控制的，分别是M、L、H、V、C、S、Q、T、A、Z，命令很多，但是对于绘制一些基本的图形来说，有很多是我们并不需要的，参考网址：http://www.zhangxinxu.com/wordpress/2014/06/deep-understand-svg-path-bezier-curves-command/
SVG它是有一个默认的宽高的，所以，在使用的时候可以适当的更改，拿在移动端的实例来说，我要做一个上边凹形，下边平行的形状，这个时候就要更改下他的宽高，而且移动端的屏幕一般都不是很大，一个图形是很占据地方的，所以，对于位置是一定要把握很精准的，可以使用rem这个单位，而且对于绘制的图形的那些点来说，CSS是不适合的，因为在屏幕的宽度改变的时候，会出现很难看的情况，比如说下面的情况：
所以，在书写他们的那些点的时候，可以使用js来定义位置，这样就可以解决问题了
最后最后，对于一个前端工程师来说，绘制图形真的是一个非常重要的技术能力，与诸君共勉之。
