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

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

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

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

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

1.<svg>

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

2.<g>

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

3.<use>

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

4.<defs>

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

5.<symbol>

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

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

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position:absolute;width:0;height:0">
    <defs>
        <symbol viewBox="0 0 40 40" id="invest">
             <!--这里是要用到的SVG图标代码-->
            <svg width="48px" height="48px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
              <!-- Generator: sketchtool 43.1 (39012) - http://www.bohemiancoding.com/sketch -->
              <title>5149C164-7F20-468F-B3BB-AAA3546BA928</title>
              <desc>Created with sketchtool.</desc>
              <defs></defs>
              <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                <g id="新图标" transform="translate(-279.000000, -146.000000)" fill="#666666">
                  <g id="机构选中" transform="translate(279.000000, 146.000000)">
                    <path d="M16.6343235,12.9540132 L18.7324265,12.9540132 C19.0400588,12.9540132 19.2895735,12.7044985 19.2895735,12.3968662 L19.2895735,12.3968662 C19.2895735,12.0889544 19.0400588,11.8394397 18.7324265,11.8394397 L16.6343235,11.8394397 C16.3266912,11.8394397 16.0771765,12.0889544 16.0771765,12.3968662 L16.0771765,12.3968662 C16.0771765,12.7044985 16.3266912,12.9540132 16.6343235,12.9540132" id="Fill-22"></path>
                    <path d="M20.9176779,19.6409235 L23.0157809,19.6409235 C23.3234132,19.6409235 23.5729279,19.3914088 23.5729279,19.0837765 L23.5729279,19.0837765 C23.5729279,18.7758647 23.3234132,18.52635 23.0157809,18.52635 L20.9176779,18.52635 C20.6100456,18.52635 20.3605309,18.7758647 20.3605309,19.0837765 L20.3605309,19.0837765 C20.3605309,19.3914088 20.6100456,19.6409235 20.9176779,19.6409235" id="Fill-24"></path>
                    <path d="M16.6343235,16.2974824 L18.7324265,16.2974824 C19.0400588,16.2974824 19.2895735,16.0479676 19.2895735,15.7403353 L19.2895735,15.7403353 C19.2895735,15.4324235 19.0400588,15.1829088 18.7324265,15.1829088 L16.6343235,15.1829088 C16.3266912,15.1829088 16.0771765,15.4324235 16.0771765,15.7403353 L16.0771765,15.7403353 C16.0771765,16.0479676 16.3266912,16.2974824 16.6343235,16.2974824" id="Fill-26"></path>
                    <path d="M16.6343235,19.6409235 L18.7324265,19.6409235 C19.0400588,19.6409235 19.2895735,19.3914088 19.2895735,19.0837765 L19.2895735,19.0837765 C19.2895735,18.7758647 19.0400588,18.52635 18.7324265,18.52635 L16.6343235,18.52635 C16.3266912,18.52635 16.0771765,18.7758647 16.0771765,19.0837765 L16.0771765,19.0837765 C16.0771765,19.3914088 16.3266912,19.6409235 16.6343235,19.6409235" id="Fill-28"></path>
                    <path d="M27.3426397,18.5264618 L29.4407426,18.5264618 C29.748375,18.5264618 29.9978897,18.2769471 29.9978897,17.9693147 L29.9978897,17.9693147 C29.9978897,17.6614029 29.748375,17.4118882 29.4407426,17.4118882 L27.3426397,17.4118882 C27.0350074,17.4118882 26.7854926,17.6614029 26.7854926,17.9693147 L26.7854926,17.9693147 C26.7854926,18.2769471 27.0350074,18.5264618 27.3426397,18.5264618" id="Fill-30"></path>
                    <path d="M27.3426397,21.8699029 L29.4407426,21.8699029 C29.748375,21.8699029 29.9978897,21.6203882 29.9978897,21.3127559 L29.9978897,21.3127559 C29.9978897,21.0048441 29.748375,20.7553294 29.4407426,20.7553294 L27.3426397,20.7553294 C27.0350074,20.7553294 26.7854926,21.0048441 26.7854926,21.3127559 L26.7854926,21.3127559 C26.7854926,21.6203882 27.0350074,21.8699029 27.3426397,21.8699029" id="Fill-32"></path>
                    <path d="M20.9176779,12.9540132 L23.0157809,12.9540132 C23.3234132,12.9540132 23.5729279,12.7044985 23.5729279,12.3968662 L23.5729279,12.3968662 C23.5729279,12.0889544 23.3234132,11.8394397 23.0157809,11.8394397 L20.9176779,11.8394397 C20.6100456,11.8394397 20.3605309,12.0889544 20.3605309,12.3968662 L20.3605309,12.3968662 C20.3605309,12.7044985 20.6100456,12.9540132 20.9176779,12.9540132" id="Fill-34"></path>
                    <path d="M20.9176779,16.2974824 L23.0157809,16.2974824 C23.3234132,16.2974824 23.5729279,16.0479676 23.5729279,15.7403353 L23.5729279,15.7403353 C23.5729279,15.4324235 23.3234132,15.1829088 23.0157809,15.1829088 L20.9176779,15.1829088 C20.6100456,15.1829088 20.3605309,15.4324235 20.3605309,15.7403353 L20.3605309,15.7403353 C20.3605309,16.0479676 20.6100456,16.2974824 20.9176779,16.2974824" id="Fill-36"></path>
                    <path d="M24.6437456,24.6556941 L15.006275,24.6556941 L15.006275,9.33303235 C15.006275,8.71692941 15.4857456,8.21873824 16.0769809,8.21873824 L23.5727603,8.21873824 C24.164275,8.21873824 24.6437456,8.71692941 24.6437456,9.33303235 L24.6437456,24.6556941 Z M33.7380397,25.1192382 C33.6936132,24.8454147 33.436275,24.6556941 33.1588191,24.6556941 L32.8064809,24.6556941 L32.139525,24.6556941 L31.0688191,24.6556941 L30.4664074,24.6556941 L25.7144515,24.6556941 L25.7144515,14.6262088 L29.9978338,14.6262088 C30.5893485,14.6262088 31.0688191,15.1244 31.0688191,15.7407824 L31.0688191,23.7001059 C31.0688191,23.9957235 31.3085544,24.2354588 31.6041721,24.2354588 C31.8997897,24.2354588 32.139525,23.9957235 32.139525,23.7001059 L32.139525,15.7407824 C32.139525,14.5091353 31.1808632,13.5116353 29.9978338,13.5116353 L25.7144515,13.5116353 L25.7144515,9.33303235 C25.7144515,8.10250294 24.7557897,7.10416471 23.5727603,7.10416471 L16.0769809,7.10416471 C14.8942309,7.10416471 13.9355691,8.10250294 13.9355691,9.33303235 L13.9355691,24.6556941 L12.6586574,24.6556941 C12.3812015,24.6556941 12.1238632,24.8454147 12.0794368,25.1192382 C12.0224368,25.4685029 12.2903926,25.7702676 12.6290397,25.7702676 L33.1884368,25.7702676 C33.5270838,25.7702676 33.7950397,25.4685029 33.7380397,25.1192382 L33.7380397,25.1192382 Z" id="Fill-38"></path>
                    <text id="找投资" font-family="PingFangSC-Semibold, PingFang SC" font-size="10" font-weight="500">
                      <tspan x="10" y="41">找投资</tspan>
                    </text>
                  </g>
                </g>
              </g>
            </svg>
        <symbol>
    <defs>
<svg>

<section>
    <svg>
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#invest"></use>
    </svg>
</section>

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