转载

SVG Sprite

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

SVG Sprite

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

设置图标

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

SVG Sprite

生成SVG图标

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

SVG Sprite

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

SVG Sprite

下载SVG图标文件

在IcoMoon运用程序中，得到了我们需要的图标，但这仅停留在运用程序之中。接下来需要点击” 下载按钮 “将需要的资源下载到自己的本地电脑中：

SVG Sprite

将下载下来的文件解压缩，就能看到我们需要的sprite.svg文件。

SVG Sprite

或许你会想看看 sprite.svg 文件是什么东东？如果你通过编辑器打开该文件，你会看到下面一坨代码：

SVG Sprite

或许你还会说，这些都是什么什么呀？我又不懂SVG，但还是好奇，生成出来的是啥，那么你还可以通过浏览器打开这个文件，你会看到这样的效果：

SVG Sprite

如果你从未接触过SVG相关的技术，但又对其感兴趣，可以猛击这里进行了解与学习。

Web中如何运用SVG Sprite

通过IcoMoon运用程序，你已经得到了需要的SVG Sprite文件，现在更为关注的是如何在Web页面中使用。那么下面的过程，我们一起来看看如何在Web页面中实现。

HTML结构

将文章开头示例所示的效果称作为一个媒体分享模块，制作这个模块需析结构实现很简单：

<h1>分享：</h1> <ul class="social">   <li><a href="##" class="icon-google-plus">Google Plus</a></li>   <li><a href="##" class="icon-facebook">Facebook</a></li>   <li><a href="##" class="icon-twitter">Twitter</a></li>   <li><a href="##" class="icon-feed">Feed</a></li>   <li><a href="##" class="icon-youtube">Youtube</a></li>   <li><a href="##" class="icon-vimeo">Vimeo</a></li>   <li><a href="##" class="icon-lanyrd">Lanyrd</a></li>   <li><a href="##" class="icon-forrst">Forrst</a></li>   <li><a href="##" class="icon-deviantart">Deviantart</a></li>   <li><a href="##" class="icon-steam">Steam</a></li>   <li><a href="##" class="icon-github">Github</a></li>   <li><a href="##" class="icon-wordpress">Wordpress</a></li>   <li><a href="##" class="icon-blogger">Blogger</a></li>   <li><a href="##" class="icon-tumblr">Tumblr</a></li>   <li><a href="##" class="icon-soundcloud">Soundcloud</a></li>   <li><a href="##" class="icon-linkedin">Linkedin</a></li>   <li><a href="##" class="icon-lastfm">Lastfm</a></li>   <li><a href="##" class="icon-delicious">Delicious</a></li>   <li><a href="##" class="icon-stumbleupon">Stumbleupon</a></li>   <li><a href="##" class="icon-pinterest">Pinterest</a></li>   <li><a href="##" class="icon-xing">Xing</a></li>   <li><a href="##" class="icon-flattr">Flattr</a></li> </ul>

你在你的浏览器浏览该文件时，看到下图这样的效果：

SVG Sprite

样式

接下来就是样式的处理。来看实际代码，更具有意思：

body {   font: 1.2em/1.5 Sans-serif;   text-align: center;   padding-top: 30px; } .social {   list-style: none outside none;   margin: 0 auto;   padding: 0;   width: 550px;    li {     display: inline-block;     margin: 5px;   }    [class^="icon-"]{     display: block;     width: 32px;     height: 32px;     text-indent: 100%;     overflow: hidden;     white-space: nowrap;     background: url(http://www.w3cplus.com/sites/default/files/blogs/2015/1506/sprite.svg) no-repeat;   } }

刷新浏览器，看到下图效果：

SVG Sprite

接下来是要对号入座了，那么问题又来了。以前位置的Sprite可以通过相关工具得到对应的ICON坐标值，那么SVG Sprite我又要如何获取呢？其实也很简单，你只需要用编辑器打开 sprite.svg 文件，你就可以查到相关的信息：

比如 facebook 和 twitter 两个图标，其对应的坐标分别是 0,42 和 0 84 ，这也意味着， .icon-facebook 的 background-position 值为 0 -42px ，而 .icon-twitter 的 background-position 值为 0 -84px 。依此类推，可以将各个图标的位置确认：

$icons: google-plus,facebook,twitter,feed,youtube,vimeo,lanyrd,forrst,deviantart,steam,github,wordpress,blogger,tumblr,soundcloud,linkedin,lastfm,delicious,stumbleupon,pinterest,xing,flattr; body {   font: 1.2em/1.5 Sans-serif;   text-align: center;   padding-top: 30px; } .social {   list-style: none outside none;   margin: 0 auto;   padding: 0;   width: 550px;    li {     display: inline-block;     margin: 5px;   }    [class^="icon-"]{     display: block;     width: 32px;     height: 32px;     text-indent: 100%;     overflow: hidden;     white-space: nowrap;     background: url(http://www.w3cplus.com/sites/default/files/blogs/2015/1506/sprite.svg) no-repeat;      @for $i from 1 through length($icons){       &.icon-#{nth($icons,$i)}{         background-position: 0  -1 * (($i - 1) * 42px);       }      }   } }

这里使用的是Sass来编译，如果您从示接触过Sass，可以点击这里阅读。

你将看到的效果如下：

SVG Sprite

接下来，咱们给Icon图标上点色。给ICON上色，不是通过 background-color 来设置，而是修改 sprite.svg 文件。回过来看 sprite.svg 文件，不能发现，每个icon对应的代码中有一个 fill 属性。默认值为 #444444 :

SVG Sprite

将修改后的文件保存，并刷新浏览器：

这就是你需要的效果。SVG有一个最强大的优势，就是页面放大缩小时，ICON图标不会失真。另外，我们需要修改图标大小也非常方便，比如现在的图标是 32px X 32px ，要换成 64px X 64px ，只需要借助于CSS3的 background-size 就可以搞定：

自动化生成SVG Sprite

上面介绍的是借助IcoMoon运用程序，手工合成的SVG Sprite文件。其实大家还可以借助类似 gulp 这样的自动化工具来生成SVG Sprite文件。

在这篇文章中不做过多阐述，如果感兴趣的同学，可以阅读 @Mike Street 写的一篇《 Creating SVG Sprites using Gulp and Sass 》文章。

总结

本文主要介绍了如何借助IcoMoon运用程序生成SVG Sprite文件，并且基于此文件上实现ICON的图标制作。在整个文章介绍中运用到了IcoMoon运用程序的简单使用、SVG相关知识以及Sass的相关技术。如果你对相关方面技术有更好的建议或想法，欢迎在下面的评论中与我们一起分享。

扩展阅读

IcoMoon+@font-face+Sass制作Icons
如何把你的图标转换成web字体
SVG symbol a Good Choice for Icons
Create an SVG Sprite Sheet
如何实现跨浏览器的SVG Sprites

大漠

常用昵称“大漠”，W3CPlus, Sass中国创始人，目前就职于手淘。中国Drupal社区核心成员之一。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验，尤其专注对CSS3的研究，是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《图解CSS3：核心技术与案例实战》。

正文到此结束