特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)
Sprite(雪碧图)在Web运用中已不是新技术,但大部分同学都还停留在位图的Sprite运用,比如.png
图的合成。而这种技术对于现在的Web页面而言并不完美,比如位图在Retina屏幕带来的图标不清晰等现像,是我们技术人员必须面对的一件事情。而今天要说的,就是如何避开使用位图制作Sprite,来适应所有屏幕的显示。而这种技术就是SVG的Sprite来替代早期的位图Sprite。
制作媒体分享模块
假设在Web的页面中有一个媒体分享的模块,如下所示:
如果让一位Web人员来实现上例的效果,已不是难题。但如果我们避开早期的技术,而使用SVG的Sprite来实现,就不是一件轻易的事情。我们必须要面对:
- SVG图标如何制作
- SVG Sprite如何获取
- SVG Sprite如何运用到Web页面
接下来就针对这几个问题做简单的解释,让大家能在自己的Web页面中轻松的运用上SVG Sprite。
SVG图标如何制作
制作SVG这样的矢量图标,可以通过一些矢量制作软件来绘制,但问题又来了,对于未曾使用过矢量制作软件的同学,要怎么样才能实现呢?值得幸运的是,就算你不懂也无仿,我们可以使用现成的Web运用程序来制作,比如较为流行的IcoMoon运用程序。
通过IcoMoon生成需要的图标
IcoMoon运用程序是一个简单的Web运用程序,就算你从未接触过也能轻松的掌握,接下来我们来看如何使用IcoMoon运用程序实现文章开头演示的媒体分享图标。
选择对应的ICON
在你的Web浏览器中打开IcoMoon运用程序,并选择你需要的ICON图标:
如果默认的图标选项中没有你自己需要的图标,你可以先绘制,然后导入到IcoMoon运用程序中,有关于这方面详细的介绍,可以阅读早期分享的《如何把你的图标转换成web字体》一文。
设置图标
选择了需要的Icons图标之后,可以在IcoMoon运用程序中直接设置ICONS图标的大小,比如说将所有ICON设置为32px X 32px
:
生成SVG图标
在IcoMoon运用程序中,可以将选择好的图标生成Web运用中所需的文件形式,比如.png
图标,Web字体图标,也还可以生成我们需要的SVG图标:
这只是生成了SVG图标,但并不是我们需要的SVG Sprite文件。接下来只需要点击配置按钮,设置相关的参数,就能轻易得到我们需要的SVG Sprite:
下载SVG图标文件
如需转载,烦请注明出处:https://www.w3cplus.com/svg/create-svg-sprite-sheet.html
如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!