微信号:FrontDev

介绍:分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

浅谈SVG Sprite

2016-03-06 20:12 前端大全

(点击上方,可快速关注)

作者:携程设计委员会 

网址:http://ued.ctrip.com/blog/a-brief-talk-on-svg-sprite.html


随着前端技术的发展,有越来越多的方法实现icon的制作,同时为了满足市面上各种大屏幕分辨率,字体图标icon font应运而生,字体图标的制作也是一种全新的设计方式,但是icon font 在windows系统下,字体较小时,锯齿问题比较严重,那么今天要讲的svg sprite,不仅可以随意改变图标大小不会产生锯齿,还能随心所欲的填充颜色。


下面来来介绍一下矢量图形SVG Sprite在页面中的应用。


第一步:制作SVG图标


首先的准备一套SVG图标,我们直接到icomoon.io上下载。


1.选中图标



2.点击Generate



3.下载



然后我们可以在解压文件中,找到对应的svg图标文件夹。



第二步:合并SVG图标


准备好svg图标后,我们需要把多个svg图标整合到一个svg文件中。

这里需要用到自动化合并工具(grunt),grunt有个名为svgstore的插件。

关于grunt环境的安装,就不在这阐述 。


环境安装好后,在项目目录下执行下面的命令,安装插件:



安装好后,可以看到grunt-svgstore文件夹里有个Gruntfiles.js配置文件。

我们加入以下两段代码:



了解更多配置项:https://www.npmjs.com/package/grunt-svgstore


配置好以后,我们需要把第一步下载下来的svg图标,放到sprites文件夹中,如下图:



到这为止,一切准备就绪,只需进入到 grunt-svgstore目录,执行命令:



运行命令后,可以看到成功创建了sprite.svg文件



第三步:应用


我们来看下生成文件的源代码:



再来看看浏览器里页面的效果~~~



到这里svg sprite 图标就已经完成了。


兼容性:



对于ie8以下,我们可以添加一个标签,使用css sprite:


为避免其他浏览器加载,可以加上条件注释。



这样就完美啦~



【今日微信公号推荐↓】

更多推荐请看值得关注的技术和设计公众号


其中推荐了包括技术设计极客 和 IT相亲相关的热门公众号。技术涵盖:Python、Web前端、Java、安卓、iOS、PHP、C/C++、.NET、Linux、数据库、运维、大数据、算法、IT职场等。点击《值得关注的技术和设计公众号》,发现精彩!


 
前端大全 更多文章 详解Javascript中的Object对象 结合个人经历总结的前端入门方法 前端不为人知的一面–前端冷知识集锦 一份优秀的前端开发工程师简历是怎么样的? 前端工程师面试题汇总
猜您喜欢 萝莉有话说:你的App真正适配了iOS 9吗? JAVA多态。 有一位漂亮女同事是什么样的体验? 2015中国程序员生存报告 你苦你先看 本周招聘信息-2016.06.01