该如何正确的使用SVG sprites？

首席填坑官∙苏南的专栏，SVG的使用技巧

    大家好，这里是@IT·平头哥联盟，我是`首席填坑官`——苏南，今天要给大家分享的是SVG sprite(也叫雪碧图)，所谓雪碧图，当然就不是我们常喝的雪碧饮料（Sprites）哦，哈哈～

    当下流程的移动端，手机型号太多太多，今天工作项目中突然发现还有同事在使用以前大家 曾经包括现在还很熟悉的CSS 图片精灵，被我们的测试MM找来说图片在iphone6、iphone plus、iphone x等大屏的手机全糊了，当时我就懵逼了，我说怎么会呢，后面一看，果然如此啊，看了下代码，原来是用的图片，我说为什么不用svg呢？？然后同事说一个一个的图标好麻烦，我说可以用svg sprite啊，～～＞﹏＜，这个时候轮到同事一脸懵逼了……，所以想着可能是不是同样还有很多同学也不知道SVG symbols呢，那么这就给大家分享一下：

      大家都知道svg( Scalable Vector Graphics)可伸缩矢量图形，SVG是一种采用XML 来描述二维图形的语言,无论如何放大缩小都不会糊,而图片当展示的尺寸大于图片本身，就会糊了，糊了，糊了……

<div class="icon-sprite"></div>

.icon-sprite {     width: 45px; height: 45px;     background-image: url(https://github.com/meibin08/img/sprite_icon.png);     background-size: 100px 350px; background-position: 0 -60px;//**重点在于它**     background-repeat: no-repeat; }

    在以前我们为了性能优化，多图标合在一张图上面，然后再使用css的 background-position，来定位，好处是减少了页面的加载，要命的问题是定位遇到兼容问题，1px\.5px偏差时，搞的你死去活来，后来移动端更是不清晰，被人骂了又骂。

    当后来有一天，我发现了它svg,当然仅仅svg就拿出来吹水，肯定是会被人喷的一脸口水的，SVG symbols/**SVG symbols**/SVG symbols **重要的事说三遍不过份吧**，这项技术基于两个元素的使用：<symbol>和<use>

从ps或者Illustrator创建并导出SVG图标，源码大概是这样的：

重点来了，那么我们用symbols包装后是这个样子的：

那么问题来了，我们直接在页面上引用吗？结果是否定的，什么都不会显示：

那么该如何摆正姿势，正确的使用它呢？高潮部分来了：

首席填坑官∙苏南的专栏

苏南的专栏

本文由@IT·平头哥联盟-首席填坑官∙苏南分享

为什么图标会显示呢？因为要显示图标，我们还需要使用<use>元素，通俗的讲就是你定义了一组图形对象（使用<symbol>元素）之后，可以使用<use>元素来对它进行无限次实例化展示。你使用xlink:href属性来指定你想要展示哪一组图标（相当于css图片精灵中的background-position），这里，我们要展示的是id为#svg-github的<symbol>，

      大家可能还发现了style="display:none",你可以把它理解为是css sprite里的图片base64转化后的文件，而**方法二**里的xlink:href="./icon.svg#svg-github"，可以理解为是css sprite里我们background-image 引入图片一样，而 #svg-github 就是background-position里的坐标，还有颜色的改变，我们可以直接在svg内的 path上写行内式 fill="#06c"、style="fill:#06c";都是可以的，在维护上，是不是比图片更加方便呢？？？

      当然啦，大家都懂的，越漂亮的妹子追的人越多啦，代码也一样，越好用的东西往往也是不可能那么完美啦，看到这里，是不是觉得想骂娘呢？白看你说这么多废话，最后不能用，坑爹……

    别慌，其实也没有那么糟糕啦 ，**SVG只在IE9以上支持；所以如果你需要支持IE8及以下的浏览器**，你需要另外再写一套降级（例如，使用png图片方案），随着科技的发展，IE9以上大多数人还是能接受啦，特别是手机端的用户，再也不用担心测试MM来找你，图标不清晰的问题了啦，是不是很开心，有没有～～

　　以上就是今天的分享，写了蛮久，最近才在开始尝试写博客，新手上路中，如果文章中有不对之处，烦请各位大神斧正。如果你觉得这篇文章对你有所帮助，请记得点赞哦～，更多内容可关注我的公众号哦(^_^)

宝剑锋从磨砺出，梅花香自苦寒来，做有温度的攻城狮，公众号：honeyBadger8

作者：苏南 - 首席填坑官 链接：https://susouth.com/ 交流群：912594095，公众号：honeyBadger8 本文原创，著作权归作者所有。商业转载请联系`@IT·平头哥联盟`获得授权，非商业转载请注明原链接及出处。