解决问题
- 最早开始使用的图片形式
多倍图,一般做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来实现这个功能。