iconfont与雪碧图的优缺点

iconfont（图标字体）

可以缩放的矢量图标。你可以使用CSS对它们进行修改:大小，颜色，阴影等。体积特别的小。可能几百个图标才几十KB。
优点：

1. 高清保真，因为是SVG图形
2. 灵活性，可以设置大小，颜色等
3. 兼容性好，支持IE6
4. 开源的字体库很多
5. 减少HTTP请求

缺点：

1. 维护自己的字体库麻烦一些
2. 图表字体只能被渲染为单色的

使用中可能会遇到的坑：
1、webkit浏览器会在加缘加粗1个像素
这个问题在间距比较小的时候就会比较明显。解决文案是加一个font-smoothing的属性：-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
2、注意缓存：加版本号

iconfont 的 symbol引用(多色图标)

优缺点：

1. 支持多色图标了，不再受单色限制
2. 通过一些技巧，支持像字体那样，通过font-size,color来调整样式
3. 兼容性较差，支持 ie9+,及现代浏览器
4. 浏览器渲染svg的性能一般，还不如png

使用办法：
第一步：拷贝项目下面生成的symbol代码：在本地项目中引入iconfont.js(在线的可能读取不出来)
//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js
第二步：加入通用css代码（引入一次就行）：

<style type="text/css">
   .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
</style>

第三步：挑选相应图标并获取类名，应用于页面：

icon-xxx(点击Unicode/Font class/Symbol中的Symbol，然后对应的图标点击复制就可以)
<svg class="icon" aria-hidden="true">
     <use xlink:href="#icon-xxx"></use>
</svg>

雪碧图

除了叫雪碧图外，它还有很多名字，css sprite, css 精灵等。原理就是将一些小图标合并到一张图片上，然后用css的背景定位来显示需要显示的部分。
优点：

1. 减少对服务器的请求次数比如页面有五个图标，把他们放到一张背景图上，只需要加载一次。然后用css定位从这张图片来取就可以了；因为浏览器同一时间能够加载的资源数是一定的，IE 8是6个，Chrome是6个，Firefox是8个
2. 提高页面的加载速度减少了页面的请求次数，自然会提高了页面的加载速度

缺点：

1. 维护麻烦，如果修改其中的一张图，你需要修改整张图
2. 高清失真，为了适应不同的分辨率，可能要准备多个规格的图片

SVG

SVG的兼容性，除了IE 8不支持，其它的都还好
有几种使用SVG的方法：
1. 直接copy到页面
<%@includefile=“loc-svg.jsp”%>
缺点是浏览器没办法缓存，同时会阻碍页面的加载。优点是由于是内联的，可以直接用CSS控制svg的样式
2. 使用embed/object
<embed src="loc.svg" width="100" height="200"/>
除此之外，还可以使用img标签，将svg的路径作为src属性，这种方法的缺点是没办法用CSS控制样式。还可以转化为base64的方式。
3. 合并SVG
通过一个个的symbol，将多个svg合在了一起，同时将每个symbol svg定义一个id，使用的时候会用到

<svg>
    <symbolviewBox="0 0 101.557.9" id="active-triangle"><pathfill="#15c0f1"d="M10.4.5L50.7 57.1 1.1.5h99.3z"/>
    <symbolviewBox="0 0 101.5 57.9"id="logo"><pathfill="#15c0f1"d="M120.4.5L50.7 57.1 1.1.5h99.3z"/>
</svg>

使用的时候通过外链的办法将svg引到页面上，如要用到上面定义的logo，通过“文件名#ID”的方式：

<svgviewBox="0 0 100 100">
    <usexlink:href="icon.svg#logo"></use>
</svg>

然而IE不支持外链，但是写个插件让IE支持，原理是检测到浏览器不支持外链的时候就将其外链替换成相应的svg内容。使用SVG的还有highCharts和d3.js等。