解决问题
- 最早开始使用的图片形式
多倍图，一般做2倍，在小分辨率下就很浪费
为了挺升用户体验，会分开做几套图片，根据用户的dpi判断加载对应的图片
- 使用iconfont字体图标
iconfont本身就是字体文件，会矢量适配各种不同dpi。支持单色，变色填充
但是在PC上当图标小于等于16px时，或者复杂度高的图标会出现比较
严重锯齿，图标无法展示清晰，特别在chrome下的表现尤为严重。正因为如此这个技术在推进过程中遇到许多困难，因为在很多场景下图标
确实会较小甚至小于16px，而且有些16px的图标如果复杂度较高，iconfont实现出来的icon会经常出现看不清的情况，而且国内PC用户是占
最多的，所以iconfont的这种表现效果很多用户和设计师无法接受
理想的渲染状态、黑白渲染、灰度渲染、次像素渲染
目前chrom,ff采用的是次像素渲染机制，Retina屏幕上，一个像素被拆成了4个像素，由于它的密度非常高，肉眼根本是看不出锯齿的。但pc电脑的dpi没那么高，就会锯齿明显些
所以目前大的站点：淘宝，qq空间，腾讯云都是局部使用
- svg
SVG是W3C制定的一种新的二维矢量图形格式，也是规范中的网络矢量图形标准。SVG严格遵从XML语法，并用文本格式的描述性语言来描述图
Svg icon 的几个使用方法
inline SVG
直接把SVG标签写入到HTML中去，直接通过修改fill和stroke属性来控制填充颜色和边框颜色，但是缺点就是维护性不好，如果一个页面Icon特别多，可能要写好几十个SVG在页面，复用性差，后期扩展性也不佳。
img/object 标签
这种方法直接将SVG ICON保存成一个一个单独文件，通过img或object标签引用，他的缺点就是请求数增加，每个图标都去独自加载，对服务器负载和页面高速加载不好。
<img src="svg/16-16.svg" alt="test icon">
background and Data URIs
.icon {
backgound-image: url(test.svg)
}
SVG Sprites
目前市面上有很多提供ICON FONT制作的网站，例如：icomoon不止开源，而且功能实在强大，可以提供输出SVG Sprites的功能，SVG Sprites它的使用方法其实就跟Png sprites是一样的，把多个SVG ICON合并到一个SVG文件里面去，然后通过background-position进行定位，这种方法可以解决请求数增多的问题。
.icon {
width: 16px;
height: 16px;
display: inline-block;
background-repeat: no-repeat;
background-image: url(sprite.svg);
background-position: 0 0;
}
总结
SVG目前还是存在许多问题，Windows下使用IE的兼容性和渲染效果都太差，在PC侧我们无法全量使用，所以我们可以用上面的这套解决方案解决PC下所有浏览器下兼容问题，在Retina下，不管是device =2还是3都可以兼容，不管未来是否会有更高的devicePixelRatio出来，按照上面的方法都能完美兼容，并且在对应不同的devicePixelRatio下浏览器会自动选择加载SVG或者PNG，不会两张都同时加载。
基于目前的项目，我们用的是vue的框架
vue-svg-icon
工作中用到svg格式的图标，既然是svg，当然不想用古老的img方式引用，希望能凭借定义svg的fill属性，随意定义图标的颜色；同时不想将整段svg代码写入组建内，于是找到了使用vue-svg-icon来实现这个功能。