.什么是SVG?
SVG全称Scalable Vector Graphics,指可伸缩矢量图形.
2.什么是矢量图
计算机中显示的图形一般可以分为两大类：位图，矢量图。 平时拍的照片就是位图，它是由一个个像素点组成，放大后就是马赛克。 而矢量图只能靠软件生成，也就是需要设计师来创造出的图像，其元素对象可编辑，图像放大或缩小不影响图像的分辨率， 说白点也就是再怎么放大也不会有马赛克或锯齿。因为它本来就是人用软件创造出的图形。
3.SVG优点
SVG 是一种基于 XML 语法的图像格式，其他图像格式都是基于像素处理的， SVG 则是属于对图像的形状描述，所以它本质上是文本文件，体积较小，且不管放大多少倍都不会失真。
4.SVG简单的标签及属性
1).SVG 代码都放在顶层标签<svg>之中。
2).<svg>的width和height属性，如果不指定的话默认的是宽300px，高150px;
3).如果只想展示SVG图像的一部分，就要指定viewBox属性。<viewBox>属性的值有四个数字，分别是左上角的横坐标和纵坐标、视口的宽度和高度。
4).<circle>标签的cx、cy、r属性分别为横坐标、纵坐标和半径，单位为像素。坐标都是相对于<svg>画布的左上角原点。
5).SVG 的 CSS 属性与网页元素有所不同。
fill:填充色； stroke:描边色； stroke-width:边框宽度
5.用SVG画简单的图
<svg width="100" height="100" viewBox="50 50 50 50">
<circle id="mycircle" cx="50" cy="50" r="50" />
</svg>上面代码中，SVG 图像是100像素宽 x 100像素高，viewBox属性指定视口从(50, 50)这个点开始。所以，实际看到的是右下角的四分之一圆。
注意，视口必须适配所在的空间。上面代码中，视口的大小是 50 x 50，由于 SVG 图像的大小是 100 x 100，所以视口会放大去适配 SVG图像的大小，即放大了四倍。
需要注意的是如果不指定width属性和height属性，只指定viewBox属性，则相当于只给定 SVG 图像的长宽比。这时，SVG 图像的默认大小将等于所在的 HTML 元素的大小。
