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图标文件