浅谈SVG Sprite
随着前端技术的发展，有越来越多的方法实现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：
为避免其他浏览器加载，可以加上条件注释。
这样就完美啦~
本文作者：wh_wang 转载请注明来自： 携程设计委员会
正文到此结束
热门推荐
相关文章
近期评论
-
文章和留言都翻到11页了 没有OOM
-
-
朋友，翻页到11页，及以后，会出现OOM，无法访问
-
-
搞个gitee的项目
-
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
-
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
