项目实战中使用SVG的记录

项目实际开发时，当需要用到小图标，比如分类、选项侧边的icon、以及tab切换的icon，可以考虑使用SVG来显示。关于SVG的优点和缺点就不分析了，这里只是记录如何使用。

上图是一些SVG图标，那么该怎么用到我们的项目中去呢？

首先我们先选择一个SVG图标，拖到浏览器中去显示，右键显示网页源代码，应该是类似下面这样的内容：

这就是所选择的SVG图标的代码了，我们拷贝代码，放到项目的html中就能显示了，是不是很简单？

接下来，我们说说SVG的组成。

1.

最外层的标签，width和height分别控制宽度和高度，viewBox是放SVG图标的容器，前面两个值分别控制水平和垂直方向移动，后面的值默认和SVG图标大小一致

2.

用来对相关图形元素进行分组，以便统一操作，比如旋转，缩放或者添加相关样式等

3.

实现SVG现有图形的重用，可以重用单个SVG图形元素，也可以重用定义的组元素

4.

和元素类似，但是定义不会直接显示的内容，

5.

创建新的视图，同时具备分组和的特点

我们用项目中的实例，来说明如何使用上面的几个标签

上面的实例中，我们把要用到的SVG图标代码放到带有id=invest的标签中，这样其他地方只要使用use，并指定xlink:href的id值，就可以引用了，十分方便。看上去代码很多，其实结构很清楚，需要手写的内容并不多~~