SVG可以帮我们干什么
SVG 是一种基于 XML 语法的图像格式，全称是可缩放矢量图（Scalable Vector Graphics）。其他图像格式都是基于像素处理的，SVG 则是属于对图像的形状描述，所以它本质上是文本文件，体积较小，且不管放大多少倍都不会失真。
在真实的项目中，SVG主要是帮助我们绘制好看的图标，比如折线图，换装图，分布图等等。
目前市场上有很多成熟的JS库可以帮助我们快速绘制好看的图标，比如 D3.js，但是如果我们想要胜任工作中的各种图标业务，那么必须要了解SVG的基础知识。
下面结合我自己的学习和工作经验，跟大家分享SVG中，我们需要掌握的知识。
SVG的简单示例和三个常用属性
首先我们先看一个 SVG 简单的示例，在页面中绘制一个半径50px的黄色圆。
<div id="container" style="width: 800px; height: 400px; border: 2px solid lightblue;">
<svg width="100%" height="100%">
<circle cx="400" cy="200" r="50" fill="orange"></circle>
</svg>
</div>
可以看到，如果我们想要使用 SVG，可以直接在 HTML 元素中插入 标签，这个标签常用的属性有:
- width 和 height: 指定了 SVG 图像在 HTML 元素中所占据的宽度和高度。除了相对单位，也可以采用绝对单位（单位：像素）。如果不指定这两个属性，SVG 图像默认大小是300像素（宽） x 150像素（高）。
- viewBox: 称之为视口，我们使用 SVG 绘制的图形，可以选择性的展示一部分。这个属性可能不是很好理解，我来详细介绍一下。
视口属性的值有四个数字，分别是左上角的横坐标和纵坐标、视口的宽度和高度。我们定义好视口之后，它会适配所在的空间，即在现有元素的大小内，等比例缩放视口大小，直到视口撑满所在的元素。下面我们通过一个动画来理解一下。
比如我们页面上使用 svg 绘制了如下图形，宽度是800，高度是400。
然后给这个 svg 添加了 viewBox 属性，值为(0, 0, 400, 200)。也就是说这个视口的宽度是400px，高度是200px，起始位置是（0， 0），即svg的左上角。
视口定义好之后，他会自动适配 svg 所在的元素空间，即 800 * 400 像素的空间，这里我做了一个动画，来帮助大家了解这个自动适配的过程。
在上述例子中，我们通过设置 viewBox 将 svg 图像放大了4倍，将左上角的圆形显示在 svg 中。你想显示其他的圆形，只需要调整 (0, 0, 400, 200) 中的前两个数值即可。如果你想缩放不同的倍数，可以调整后两个数值。
这里说一下，如果后两个数值大于 svg 宽高的话，效果不是放大，而是缩小。这里可以自己去体验一下。上述代码在这里：
<div id="container" style="width: 800px; height: 400px; border: 2px solid lightblue;">
<svg width="100%" height="100%" viewBox="0 0 400 200">
<circle cx="200" cy="100" r="50" fill="orange"></circle>
<circle cx="600" cy="100" r="50" fill="orange"></circle>
<circle cx="200" cy="300" r="50" fill="orange"></circle>
<circle cx="600" cy="300" r="50" fill="orange"></circle>
</svg>
</div>
在上述 SVG 的三个属性中，他们之间还有这个关系：
如果不指定width属性和height属性，只指定viewBox属性，则相当于只给定 SVG 图像的长宽比。这时，SVG 图像的默认大小将等于所在的 HTML 元素的大小。
