专栏首页IT平头哥联盟该如何正确的使用SVG sprites?
原创

该如何正确的使用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·平头哥联盟`获得授权,非商业转载请注明原链接及出处。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 大家好 这就是2018年的我~

    大家好,今天周五,明天就是周末,再过几天也就是2019,2018即将成为过去,昨晚抽时间对自己的2018做了个年终总结,今天跟大家汇报一下。

    苏南
  • React16.7 useEffect初试之setTimeout引发的bug小记

      周末尝试了一下React新的hooks功能,来封装一个组件,遇到一个bug,所以记录一下过程!

    苏南
  • 职场寒冬 请不要让码农只能活在青春里~

    “我月入3万,怎么会少少了你一个鸡蛋啊?” 这是2017年9月左右的一个新闻,一位煎饼摊大妈因和顾客争执时脱口而出这样一句话而走红。当时还上了各大新闻的头条。

    苏南
  • 【PostgreSQL 】PostgreSQL 12的8大改进,性能大幅度提升

    PostgreSQL 12专注于性能和优化。此版本的发布并未考虑到全新的闪亮功能;相反,它是对现有PostgreSQL功能的微调和精心设计的实现。因为Postg...

    首席架构师智库
  • Oracle聚簇表使用方针

    要针对应用的要求来考虑使用聚簇的优缺点。例如,你需要确定连接语句的性能提升是否超过了修改聚簇值的性能下降,你可能还需要做实验比较聚簇和单独存储所花费的处理时间。

    用户1148526
  • #腾讯云#企业建站首选—2核8G10M三年秒杀只需3069

    腾讯云双十一狂欢,前几天也有放出这个价格的机型,但根本抢不到,可能是今天最后一天,腾讯云放出所有存货,到现在为止还剩41%。3069三年,相当于83/月,相当于...

    夏末浅笑
  • Yii2.0 RESTful API 之版本控制

    之前我写过两篇关于 Yii2.0 RESTful API 如何搭建,以及 认证 等处理,但是没有涉及到版本管理,今天就来谈谈版本管理如何实现。

    hedeqiang
  • 德勤Deloitte:汽车行业的大数据与分析报告(PDF全文)

    随着数据分析能力的提高,预测分析正演化为一种有力的工具,可以大大提升预测效率以及运营和绩效。但挑战在于,汽车制造商是否能玩转这些海量的知识和经验数据。数据分析可...

    华章科技
  • 5G在未来广播中的应用

    本文来自IBC2019(国际广播大会),主要讲述了BBC(英国广播公司)及其合作伙伴使用5G技术进行内容分发和生成方面做出的试验,探索了5G在未来广播中的应用。...

    用户1324186
  • C# 给枚举类型增加一个备注特性

    /// <summary> /// 备注特性 /// </summary> public class RemarkAttribute...

    hbbliyong

扫码关注云+社区

领取腾讯云代金券