公众账号

二维码 微信扫描关注

当前位置:首页 > 技术文章 > 前端开发 >

高清ICON SVG解决方案(下)

  • 高清ICON SVG解决方案(下)

  • 高清ICON SVG解决方案(上)

在上一篇文章中,我们讲述了字体渲染机制和导致iconfont出现锯齿的原因,以及如何才能出绘制高质量SVG ICON,并且提供了一套AI模版供大家参考使用。

下文将讲诉前端侧我们如何用SVG来做成高清IOCN,并且良好支持PC下的各个浏览器,并兼容IE6+以上的浏览器。

从上一篇文章中我们得知SVG 做的图标在IE9+的浏览器渲染效果相当的差,所以在IE下我们我们不使用SVG ICON,我们可以将SVG转成一倍的png图片来进行替代。首先来简单的普及一下SVG ICON的几个使用方法:

第一种Inline SVG

这种方法就是直接把SVG标签写入到HTML中去,直接通过修改fill和stroke属性来控制填充颜色和边框颜色,但是缺点就是维护性不好,如果一个页面Icon特别多,可能要写好几十个SVG在页面,复用性差,后期扩展性也不佳。

<svg  width="74" height="74" viewBox="0 0 74 74">
    <path fill="#444444" d="M25.42 27.737v-11.555c0-6.382 5.174-11.555 11.555-11.555s11.555 5.174 11.555 11.555v11.555h4.622v-11.555c0-8.935-7.243-16.178-16.178-16.178s-16.178 7.243-16.178 16.178v11.555h4.622z"></path>
</svg>

第二种img/object 标签

这种方法直接将SVG ICON保存成一个一个单独文件,通过img或object标签引用,他的缺点就是请求数增加,每个图标都去独自加载,对服务器负载和页面高速加载不好。

<img src="svg/16-16.svg" alt="test icon" />

第三种background and Data URIs

在上一篇文章中我有一种调用方法就是采用 background 去调用SVG文件:

.icon {
backgound-image: url(test.svg)
}

还有如果单独使用background引用SVG也会和第一种方案一样造成请求数增加,所以有不少人通过使用base64 编码来减少HTTP请求:

.icon{ 
  background: url(data:text/svg+xml;base64,)
} 
关于 商务 项目 联系 友情链接网站地图 Copyright ©-2018 UiBQ版权所有(http://www.uibq.com)