转载自：https://www.yuque.com/gmyoon/dfy2l5/vmamwl

一、SVG 的几种使用方式

1. SVG as Img

首先，SVG 可以像 JPG，PNG，GIF 一样，作为图片文件去使用。

<img src="../../assets/branch.svg" alt="">

background-image: url("./assets/branch.svg")

不管是将它作为背景图片，或者是作为<img/>的src属性都可以。

2. SVG as Sprite

为了减少图片资源请求数量，会将大多数的小图标合并成雪碧图。

1、传统的做法

使用AI或者合并SVG图像，然后用background-postion。打开AI，新建一个30 * 60(px)的画布，设置好网格和参考线.。用AI打开svg文件，然后复制路径到画布上调整大小。

其他就和css-sprite没有差异了。

.icon-bg {
    display: inline-block;
    width: 30px;
    height: 30px;
    background: url(./res/svg-sprite-background.svg);
    background-size:100% 100%;
    vertical-align: middle;
}
.icon-facebook-logo {
    background-position: 0 0;
}
.icon-earth {
    background-position: 0 -30px;
}
.icon-like {
    background-position: 0 -60px;
}

html 中使用。

<p class="btn-group">
    <a href="#" class="btn btn-default"><span class="icon-bg icon-facebook-logo"></span></a>
    <a href="#" class="btn btn-default"><span class="icon-bg icon-earth"></span></a>
    <a href="#" class="btn btn-success"><span class="icon-bg icon-like2"></span></a>
</p>

效果如下，反正是不喜欢这样用

2、Iconfont方式