SVG Sprite

特别声明:本站已开启付费阅读,年费会员价 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

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图标:

选择ICON图标

如果默认的图标选项中没有你自己需要的图标,你可以先绘制,然后导入到IcoMoon运用程序中,有关于这方面详细的介绍,可以阅读早期分享的《如何把你的图标转换成web字体》一文。

设置图标

选择了需要的Icons图标之后,可以在IcoMoon运用程序中直接设置ICONS图标的大小,比如说将所有ICON设置为32px X 32px

设置ICON图标

生成SVG图标

在IcoMoon运用程序中,可以将选择好的图标生成Web运用中所需的文件形式,比如.png图标,Web字体图标,也还可以生成我们需要的SVG图标:

生成 SVG ICON图标

这只是生成了SVG图标,但并不是我们需要的SVG Sprite文件。接下来只需要点击配置按钮,设置相关的参数,就能轻易得到我们需要的SVG Sprite:

生成 SVG ICON图标

下载SVG图标文件

剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/svg/create-svg-sprite-sheet.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部