SVG sprite——新的前台图标处理方案

  • 时间:2018-09-11 22:02 作者:学无止境当读书 来源:学无止境当读书 阅读:395
  • 扫一扫,手机访问
摘要:我们在开发前台页面应使用的时候,常常要使用到少量小图标,比方首页、上传、位置、电话、分享,购物车等各式各样的图标。假如每个图标都发送一次http请求的话,这会较大的影响前台性能。通常会将所有图标整合到一起,只占使用一个http请求。整合的方式有CSS sprite和iconfont。CSS spri

我们在开发前台页面应使用的时候,常常要使用到少量小图标,比方首页、上传、位置、电话、分享,购物车等各式各样的图标。假如每个图标都发送一次http请求的话,这会较大的影响前台性能。通常会将所有图标整合到一起,只占使用一个http请求。整合的方式有CSS sprite和iconfont。

CSS sprite的原理其实很简单,就是把所有使用到的图标拼接到同一张png图片里,给图标元素设置背景图片,并通过CSS调整元素的background-position属性,使同一张背景图的不同部位在不同的元素中展示。要注意的是,元素的background-size设置的值应该和元素的大小成肯定的倍数关系。比方设置了图标元素的宽高是40px,而png里每个图标的大小是80*80,这时候background-size应该是"50% auto"。为什么我们在合并图标的时候要做大一点呢?由于在手机上使用,而手机通常是2倍屏、2.5倍屏,甚至3倍屏,按照肯定的比例做大一点,这样在手机上使用才不会发虚。

SVG sprite——新的前台图标处理方案

iconfont,简单的说就是通过CSS的@font-face引入一套自己设置的字体,并命名该字体。在自己设置的字体内部,图标和某个字符串码是逐个对应的,所以假如某个元素想设置为某个图标,在元素内输入该图标对应的字符串码,并设置该元素的font-family为引入的字体名称。因为要记住每个图标对应的字符串码很不方便,所以通常会 通过元素的:before伪元从来实现,":before"的content设置为对应图标的字符串码就可,这样我们即可以通过为元素增加类名来实现展现图标。

SVG sprite——新的前台图标处理方案

以上的任何一种整合方式,都有自身的缺点,CSS sprite无法更改图标颜色,同一个图标的不同颜色要一起整合进去。同时要添加图标比较麻烦,维护困难。iconfont要为不同的浏览器准备不同格式的字体,同时添加图标时也很不方便。

最近看了少量这方面的文章,大家都认为SVG sprite会是主流。简单的说,这种方式是通过svg来绘制图标,每一个图标一个path,并使用symbol标签包裹,使其不显示。在使用到的时候,再通过use标签引使用。假如不需要考虑ie浏览器的话,甚至都不需要在在html内引入所有的svg代码,通过svg的use标签的xlink:href=“test.svg#icon”以文件名+id的方式引使用单个图标。

SVG sprite——新的前台图标处理方案

svg sprite的解决方式,引入的是矢量图标,可以无限放大,并且可以精细的控制图标的每一个线条,让图标内部的颜色可以不一样,增减图标也相较于前两种要方便不少。假如每个图标的svg代码量太多的话,可以找少量工具进行适当的压缩,删除不必要的属性,并对path内的坐标值保留2-3位小数就可。唯一的缺憾在于兼容性上,只有ie9+和现代浏览器可以用这种方式,要兼容ie8及以下的话,还是考虑前两种方式吧。

说到兼容问题,上周去一个公司面试前台岗位,一个小姑娘面的我,说他们做的是政府和事业单位的外包项目,要求兼容ie6,要求兼容ie6,要求兼容ie6.......少量机关单位的网站长得那么丑不是没有道理的,哈哈哈。

阿里的iconfont.cn上有大量的图标,并且提供png、svg、ai几种下载格式,在下载的代码中使用iconfont和svg sprite的用demo,上面明确说了推荐svg的方法。

SVG sprite——新的前台图标处理方案

  • 全部评论(0)
最新发布的资讯信息
【系统环境|】极客时间-数据分析实战45讲【完结】(2021-09-02 16:26)
【系统环境|windows】字节跳动前台面试题解析:盛最多水的容器(2021-03-20 21:27)
【系统环境|windows】DevOps敏捷60问,肯定有你想理解的问题(2021-03-20 21:27)
【系统环境|windows】字节跳动最爱考的前台面试题:JavaScript 基础(2021-03-20 21:27)
【系统环境|windows】JavaScript 的 switch 条件语句(2021-03-20 21:27)
【系统环境|windows】解决 XML 数据应用实践(2021-03-20 21:26)
【系统环境|windows】20个编写现代CSS代码的建议(2021-03-20 21:26)
【系统环境|windows】《vue 3.0探险记》- 运行报错:Error:To install them, you can run: npm install --save core-js/modules/es.arra...(2021-03-20 21:24)
【系统环境|windows】浅谈前台可视化编辑器的实现(2021-03-20 21:24)
【系统环境|windows】产品经理入门迁移学习指南(2021-03-20 21:23)
手机二维码手机访问领取大礼包
返回顶部