web项目中图标的前端处理方案
工程中用到图标是常事,那这些图标我们前端一般是怎么解决的呢?这几种方案有什么优缺点呢?
第一种: SVG Sprite
SVG sprite其实就是svg的集合。SVG即可缩放矢量图形 (Scalable Vector Graphics)的简称,是一种用来描述二维矢量图形的XML标记语言。SVG图形不依赖于分辨率, 因此图形不会因为放大而显示出明显的锯齿边缘.使用svg格式我们可以直接用代码来描绘图像,可以用任何文字处理工具打开svg图像,通过改变部分代码来使图像具有交互功能,并可以随时插入到HTML中通过浏览器来浏览。
单个SVG图的使用
<svg width="16" height="16" viewBox="0 0 16 16"><path fill="#000000" d="M16 9.226l-8-6.21-8 6.21v-2.532l8-6.21 8 6.21zM14 9v6h-4v-4h-4v4h-4v-6l6-4.5z"></path>
</svg>
多个SVG图的使用
SVG属性中,可以利用 symbol 来定义一个图形模板对象,并利用 use 将其实例化。use 使用时加入 symbol 的id名就可以显示该图标。
<svg><symbol id="001-home" viewBox="0 0 16 16"><path fill="#000000" d="M16 9.226l-8-6.21-8 6.21v-2.532l8-6.21 8 6.21zM14 9v6h-4v-4h-4v4h-4v-6l6-4.5z"/></symbol><symbol id="002-home2" viewBox="0 0 16 16"><path fill="#000000" d="M8 0.5l-8 8 1.5 1.5 1.5-1.5v6.5h4v-3h2v3h4v-6.5l1.5 1.5 1.5-1.5-8-8zM8 7c-0.552 0-1-0.448-1-1s0.448-1 1-1c0.552 0 1 0.448 1 1s-0.448 1-1 1z"/></symbol><symbol id="003-home3" viewBox="0 0 16 16"><path fill="#000000" d="M16 9.5l-3-3v-4.5h-2v2.5l-3-3-8 8v0.5h2v5h5v-3h2v3h5v-5h2z"/></symbol>
</svg><svg><use xlink:href="#001-home"/></svg>
<svg><use xlink:href="#002-home2"/></svg>
如果 SVG symbol 不是内嵌在 html 中,而是独立的SVG文件,则use 使用路径名来引用。
<svg><use xlink:href="images/aa.svg#001-home"/></svg>
多个SVG文件的合并可以使用gulp构建工具来完成,这里不详细叙述。可以在SVG标签上增加样式名,控制图标的显示。
优点:
- 缩放无损还原。
- 可设置样式,控制图标的颜色,大小,渐变等效果。
- 可利用CSS实现动画。
- 减少HTTP请求。
缺点
- SVG在绘制的性能上比PNG要差。
- 复杂的图形或渐变可能显示不全。
- 兼容性稍差,支持 ie9+,及现代浏览器。
第二种:iconfont
使用字体图标,这种方式也正在被大家接受和认可。将多个矢量图合并生成字体文件,然后在CSS中引用对应的字体编码即可显示图标。字体图标适用于各个浏览器屏幕。通过控制font-size的大小调整图标大小。常用的字体图标网站是http://www.iconfont.cn/ 和 icomoon.io/
方式一:font class引用
将字体的编码加在样式的伪类上来实现。
css代码如下:
@font-face {font-family: "iconfont";src: url('iconfont.eot?t=1502445479693'); /* IE9*/src: url('iconfont.eot?t=1502445479693#iefix') format('embedded-opentype'), /* IE6-IE8 */url('iconfont.woff?t=1502445479693') format('woff'), /* chrome, firefox */url('iconfont.ttf?t=1502445479693') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/url('iconfont.svg?t=1502445479693#iconfont') format('svg'); /* iOS 4.1- */
}.icon {font-family:"iconfont" !important;font-size:16px;
}.icon-close:before { content: "\e736"; }.icon-down:before { content: "\e971"; }
html代码如下:
<i class="icon icon-close"></i>
特点:
- 兼容性良好,支持ie8+,及所有现代浏览器。
- 相比于直接在html代码里写unicode,这种写法语意明确,书写更直观,直接看样式名就知道是什么icon了。
- 因为使用class来定义图标,所以当要替换图标时,只需更换样式名就可以了。
- 不支持多色图标。
方式二:unicode引用
跟方式一类似,只是unicode代码引用位置不同而已。
css代码如下:
@font-face {font-family: "iconfont";src: url('iconfont.eot'); /* IE9*/src: url('iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */url('iconfont.woff') format('woff'), /* chrome, firefox */url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}.icon {font-family:"iconfont" !important;font-size:16px;
}
html代码如下:
<i class="icon"></i>
<i class="icon"></i>
特点:
- 兼容性最好,支持ie6+,及所有现代浏览器。
- 支持按字体的方式去动态调整图标大小,颜色等等。
- 只支持单色图标。
- 可读性不好,需要在html代码里写上unicode字符。
此种方式已经不常用了。
第三种:DataURI
DataURI是利用规范将图片转换成Base64编码的文本字符,不仅是图片,还可以编码JS、CSS、HTML等文件。通过将图标文件编码成文本字符,从而可以直接写在HTML/CSS文件里面,不会增加任何多余的请求。
但是DataURI的劣势也是很明显的,每次都需要解码从而阻塞了CSS渲染,而且CSS的体积也会增加不少。这种方法一般不建议使用。常用解码网站http://tool.css-js.com/base64.html
第四种:image sprite
将多个小图标合成雪碧图,这是比较古老的图片处理方式了。将多个图标合成一个图片文件,然后利用css的background-position定位显示不同的icon图标。
优点:
- PC端兼容性好。不同浏览器公用一个图片文件,不用考虑兼容性问题。
- 减少图标的请求数。多个图标合成一个文件后,只需请求一次就可以。且该文件可以被浏览器缓存。
- 减少图片字节。合并后的图片字节比单个图标相加的字节少得多。
缺点:
- 维护困难。每新增一个图标,都需要改动原来的合并图片源文件。
- 定位不够灵活。图标的位置要有一定的规范,图标与图标之间需要留有一定间距,避免相互干扰影响定位。
- 操作繁琐。需要维护图片,修改样式。
- 对高dpr的屏幕图标还得额外维护一份。
鉴于前面几种更好的方法,此种图片合并的方式已经过时。
转载于:https://juejin.im/post/5bf60b24e51d450cb4186b15
web项目中图标的前端处理方案相关推荐
- Web项目中前端页面引用外部Js和Css的路径问题
公众号:南宫一梦 Web项目中前端页面引用外部Js和Css的路径问题 一般我们在做Web项目时,通常会将多个页面引入的公共js和css文件抽取出来,单独写成一个公共文件,以期方便各个页面单独引入,达到 ...
- 聊聊WEB项目中的图片
最近一直在鼓捣图片相关的代码,今天抽时间写篇总结.此文没有什么高深的知识点,不汲及第三方的OSS相关点,更不汲及分布式文件存储框架,算是一篇关于WEB项目中图片相关功能的扫盲文; 同时与大家分享码字时 ...
- JAVA Web项目中所出现错误及解决方式合集(不断更新中)
JAVA Web项目中所出现错误及解决方式合集 前言 一.几个或许会用到的软件下载官网 二.Eclipse的[preferences]下没有[sever]选项 三.Tomcat的安装路径找不到 四.T ...
- Redis在Web项目中的应用与实践
Redis作为一个开源的(BSD)基于内存的高性能存储系统,已经被各大互联网公司广泛使用,并且有着诸多的应用场景.本篇文章将基于PHP来详细讲解Redis在Web项目中的主要应用与实践. 缓存 这里所 ...
- 存储服务器在监控中的作用,监控项目中存储服务器IPSAN云存储方案的优劣势对比...
<监控项目中存储服务器IPSAN云存储方案的优劣势对比>由会员分享,可在线阅读,更多相关<监控项目中存储服务器IPSAN云存储方案的优劣势对比(4页珍藏版)>请在人人文库网上搜 ...
- Java Web项目中使用Freemarker生成Word文档
Web项目中生成Word文档的操作屡见不鲜,基于Java的解决方案也是很多的,包括使用Jacob.Apache POI.Java2Word.iText等各种方式,其实在从Office 2003开始,就 ...
- java手机验证码登陆_在Web项目中手机短信验证码实现的全过程记录
这篇文章主要给大家介绍了关于在Web项目中实现短信验证码的全过程记录,文中通过示例代码介绍的非常详细,在文末跟大家提供了源码下载,需要的朋友可以参考借鉴,下面随着小编来一起学习学习吧. 前言 最近在做 ...
- html调用腾讯地图定位当前位置,vue web项目中调用腾讯地图API获取当前位置的经纬度...
vue web项目中调用腾讯地图API获取当前位置的经纬度 vue web项目中调用腾讯地图API获取当前位置的经纬度 在main.js 中添加一下代码 import axios from 'axio ...
- SpringBoot前后端分离项目中如何制作前端jar包(类似swaggerUI前端jar包制作方法)
SpringBoot前后端分离项目中如何制作前端jar包(类似swaggerUI前端jar包制作方法) 可用于SpringBoot引用的前端UI的Jar包,类似于SwaggerUI包 WABJAR介绍 ...
- 网页中调用matlab,在C#的Web项目中调用Matlab代码的步骤
在C#的Web项目中调用Matlab代码的方法 为了毕设的图形检索方向的研究,本人需要在信科的师兄师姐们已经完成的C#界面中,调用现在研究的算法的Matlab代码,以便看到实验的效果.前段时间已经拖延 ...
最新文章
- android电源驱动程序,[转]Android虚拟电源管理驱动
- python if __name__ == '__main__'
- nginx https http2
- Docker化Spring Boot应用程序
- 诗与远方:无题(四十)
- Go如何对数组切片进行去重
- mysql的局限_Mysql数据分区局限性大总结
- python不能安装的问题_无法安装pythoncolam
- vue 父循环怎么拿子循环中的值_Vue 父组件循环使用refs调用子组件方法出现undefined的问题...
- Vue源码笔记之项目架构
- 运用SQL工具还原数据库
- 徒留标点暧昧不明的微笑-转自www.97w.com
- 如何打开电脑c语言窗口,C语言控制台窗口图形界面编程(五). -电脑资料
- 中山大学软件工程c语言,2017年中山大学085212软件工程考研参考书目推荐
- 华侨城集团欲借华侨城A 实现主业整合上市
- 同余定理在计算机科学的应用,同余定理在小学数学竞赛中的应用
- 使用xmanager打开远程桌面
- 关于MPU6050陀螺仪模块的测量误差分析
- Bcftools的下载与安装
- Python 自学笔记(三)
热门文章
- 【疾病分类】基于matlab GUI模糊逻辑分类叶病严重程度分级系统【含Matlab源码 194期】
- AMOS问卷数据建模前传【SPSS 052期】
- heroku_如何通过5个步骤在Heroku上部署机器学习UI
- 全自动驾驶论文_自动驾驶汽车:我们距离全自动驾驶有多近?
- 例2.10 查找学生信息 - 九度教程第18题(查找)
- 蓝桥杯_算法训练_审美课
- yolo-v5连接手机摄像头实时检测的步骤
- Html垂直居中不起作用,html – 垂直居中不起作用,因为行不会达到100%的高度
- 浙江高级职称英语 计算机考试时间2016,浙江省2016年度全国专业技术人员职称外语等级统一考试时间...
- subplot()函数--Matplotlib