SVG( Scalable Vector Graphics): 是可缩放的矢量图形的简称，它是一种使用XML来描述二维图形及其应用的语言。
首先了解一下XML, 它和html 类似,如 <greeting>Hello</greeting>, 但是语法结构非常严格, 一个xml文档只有一个根元素；标签元素必须一一对应匹配；元素必须有结束标记，尤其是单标签；元素属性必须赋值，且值必须用引号括起来；最后这两点要注意一下，因为在html中,单标签后面的结束标记可以省略，如<br> 和<br /> 都可以；布尔属性的话，可以只写属性，<input type="checkbox" checked>
<svg></svg> 元素：<svg> 元素定义了一个矩形区域供客户端的SVG解析器渲染，就如同浏览器通过<html>和</html> 元素知道了网页的开始和结束一样，<svg>元素帮助解析器获得这个矩形区域的位置，大小等信息。它有几个常用的属性：
1，xmlns： 取值为 http://www.w3.org/2000/svg, 定义了XML的命名空间;
2，x: svg元素所定义的矩形区域左上角的X轴坐标, 默认值为0;
3，y: svg元素所定义的矩形区域左上角的Y轴坐标, 默认值为0;
4, width: svg元素所定义的矩形区域的宽度, 默认值为100%;
5, height: svg元素所定义的矩形区域的主高度, 默认值为100%;
<g></g>元素： 它是一个容器元素，可以把相关的图形元素组合起来。比如用svg 画一辆汽车，汽车是由许多图形组成的，如果你要让这 汽车沿着一定的路径运动，这时就要把汽车看成一个整体，我们可以把组成汽车的图形都放到<g>元素，这样它们就是一个整体了，只要给<g>元素施加动作,所有的图形都会运动. 并且子元素继承<g>元素的属性和样式，代码更为简洁。简单画一下汽车
<svg width="500" height="200" xmlns="http://www.w3.org/2000/svg">
<g id="car">
<g> <!--上面的黑色方块-->
<rect x=‘36‘ y=‘80‘ width=‘150‘ height=‘60‘/>
</g>
<g fill=‘#fff‘ stroke=‘#000‘> <!--下面的圆形-->
<circle cx=‘110‘ cy=‘154‘ r=‘17‘></circle>
</g>
</g>
</svg>
可以看到汽车长成了下面这个样子，非常丑陋。
我们给它增加一个动画，让它运动一下，同时看一下放到<g></g> 元素，可以把它们看成一个整体。最简单的动画就是css3 的transition和transfrom了，当鼠标放到svg元素上的时候，小车向右移动100px; css样式如下
<style>
svg {
background: yellow;
}
svg:hover #car {
transform:translate(100px);
transition: 3s;
}
</style>
当鼠标放到黄色区域时，小车整体向右移动了100px, 它们显然是一个整体了，这就是<g></g>元素容器的作用。
<image></image>元素， 引用外部的图片和svg 文件， 最主要的属性是xlink:href, 它的取值就是外部的url, 和html中的img 的src 一致，其他还有四个属性：
x,y, width, height ,x, y定义坐标，width/height 定义宽和高。
SVG 中的基本图形：
1， 线段: <line> 元素。两点确定一条线段，所以线段的基本属性，就是它的起止点的坐标， 一共有四个属性
x1: 线段起点的X轴坐标，默认值为0；
y1: 线段起点的Y轴坐标，默认值为0；
x1: 线段终点的X轴坐标，默认值为0；
x1: 线段终点的Y轴坐标，默认值为0；
画一条简单的线段
<svg width="500" height="200" xmlns="http://www.w3.org/2000/svg">
<line x1=‘50‘ y1=‘100‘ x2=‘200‘ y2=‘50‘></line>
</svg>
2， 矩形 <rect>元素：