浅谈SVG Sprite

2016/03/06 · HTML5 ·
SVG

初稿出处：
携程设计委员会   

趁着前端技术的向上，有更进一步多的不二法门已毕icon的制作，同时为了满意市面上各样大显示器分辨率，字体图标icon
font应运而生，字体图标的创设也是一种全新的安排性艺术，但是icon font
在windows系统下，字体较小时，锯齿难点比较严重，那么明天要讲的svg
sprite，不仅可以擅自变更图标大小不会发出锯齿，仍能随便的填写颜色。

上边来来介绍一下矢量图形SVG Pepsi-Cola在页面中的应用。

第一步：制作SVG图标
首先的备选一套SVG图标，大家一直到icomoon.io上下载。

1.选中图标

2.点击Generate

3.下载

然后我们得以在解压文件中，找到相应的svg图标文件夹。

第二步：合并SVG图标
未雨绸缪好svg图标后，大家要求把三个svg图标整合到一个svg文件中。
此处需求用到自动化合并工具（grunt），grunt有个名为svgstore的插件。
关于grunt环境的安装，就不在那讲演 。

环境设置好后，在项目目录下举办上面的吩咐，安装插件：

安装好后，可以观望grunt-svgstore文件夹里有个Gruntfiles.js配置文件。
咱俩参预以下两段代码：

打听愈多布署项：

布局好之后，我们要求把第一步下载下来的svg图标，放到sprites文件夹中，如下图：

到那截止，一切准备妥当，只需进入到 grunt-svgstore目录，执行命令：

运作命令后，可以寓目成功创办了sprite.svg文件

第三步：应用

大家来看下生成文书的源代码：

再来看看浏览器里页面的机能~~~

到那里svg sprite 图标就已经到位了。

兼容性：

对此ie8以下，大家得以添加一个标签，使用css sprite：

为制止其余浏览器加载，可以添加条件注释。

诸如此类就周密啦~

 

2 赞 5 收藏
评论

前言

趁着大显示屏分辨率的普及以及各样运动装备见怪不怪的运动互连网时代的来临，大家在网站设计时更应当关注内容在种种设施上的阅读性和出示效果。我们都希望能在任几时间，任何设施上都能了然的，高效的传递音讯给用户。

而随着各类高清视网膜显示器的面世，现在web设计也急需考虑各类高清屏幕的显得效果，同样前端在代码完成的时候也亟需根据显示器的例外来输出不相同分辨率的图纸。为了使大家的网页可以适配视网膜屏幕上的高分辨率，在前端开发中貌似需求预备两套不相同尺寸的图样来答复，一套在常常显示屏上显示；一套在高清屏幕上出示。

为了化解显示屏分辨率对图标影响的标题，字体图标即icon
font顺势而生。字体图标是一种全新的设计方法。更关键的是相对而言图片而言，使用字体来制作图标可以不受于显示屏分辨率的震慑，那对于当今种种分辨率显示屏的运动互连网时代，比起用图形来说确实有很大的优势。所以现在在web开发中，使用字体来打造icon应用的也更为多。

难道说大家只有这一种选取么？No，追根溯源，其实字体图标也是一种基于矢量图形的一种技术封装而已。那篇作品大家就来探视使用正宗的矢量图形SVG来创立icon的选用，看过之后相信你会有一种“拈花微笑,飞叶伤人”的感觉到。

把UI图里的小图标制作成icon font，uiicon

     
一个互相相比较多的UI图里面或者会有众多小图标，一般可用sprites图将多少个小图标弄成一张大图，或者其余的艺术，各样艺术的比较可参见博主的别的一篇博客使用css3新属性clip-path制作小图标，本文深刻琢磨使用icon-font的的制作方法：在PS里面导出svg，制作字体图标。那种形式既有sprites图不须求浏览器发多次伸手的优点，也有应用clip-path/svg矢量无损的长处，并且协理IE6及以上。

      使用sprites图可以自行用PS将多个小图标放至一张图：

     
sprites图的弱点是或不是矢量的，在适配布局里，在伸缩时可能会失真。而利用icon
fonts是矢量放大无损的。

      接下去介绍制作icon fonts的章程。

      1. 亟需安装PS、AI

      2. 下载一个PS的台本：PSD to
SVG，依据内部表明的法子，将脚本放到PS的本子目录：Adobe
Photoshop/presets/scripts，重启PS。

      3.
将图层里面的icon形状图层复制到一个新文档，并将图层重命名为.svg后缀结尾。弄成svg结尾重倘诺为着脚本识别哪些图层要拓展转移。注意图层命名最好用假名数字和下划线，不然可能会出标题。

      4. 履行文书->脚本->PSD to
SVG脚本，可能会唤起没有保存文档，所以举行前先把新建的图层保存为一个文书。

      6. 推行完脚本后会在psd所在的目录生成三个公文，一个svg和一个ai

      7.
用AI打开生成的ai文件，发现唯有左下角有一个点来得出来了，如下图左突显，当把鼠标放上去的时候发现那么些path是存在的，只是没展现出来。

      8.
所以在AI里面把它填充一下，把呈现出来的部份填充成肉色，然后另存为svg：File->script->saveDocs
as Svg

       9.
接下去，借助icomoon，制作字体。打开icommon(借使打不开，得使用代理因为那网站选拔了谷歌的一些劳务)，点击右上角的Import
Icon按钮，导入上面保存的svg文件。

       icomoon就会跳到select页面，选中刚刚导入的图标：

      再点击右下角的Generate Font:

      跳到了生成好的icon页面，点击get code:

     
观望它的运用代码，发现那么些图标被拆成了6个span表示6个path，还要调节它们的区间。那不是想要的结果，理想的结果应该是如果一个span表示这些图标就好了。

      根据icomoon的交付的唤起：

To avoid multicolor glyphs, reimport your SVG after changing all its colors to the same color.

     
发现是出于种种部份的颜色不一致导致的，下边安装没有显得出来的别样5个部份和曾经体现出来左下角非常点的颜料不均等，于是把它们调成一样的。

     
那里运用linkscape举行编制，因为linkscape可以一贯编辑svg源代码，尤其直观，打开用PS生成的还没改过的svg文件：

      
可以看到，之所以会没出示出来，是因为fill属性设置成了none，所以把它们都改成和左下角那个都平等的水彩：

选取SVG中的Symbol元素制作Icon，把UI图里的小图标制作成icon。      保存后上传到icomoon，再点get
code，生成的字体就是整体的一个实体了：

     
下载后打开，生成的书体文件放在了fonts目录下，同时icomoon提供了demo，使用时，通过一个@font-face导入字体文件：

@font-face {
    font-family: 'icomoon';
    src:url('fonts/icomoon.eot?3hb5tb');
    src:url('fonts/icomoon.eot?3hb5tb#iefix') format('embedded-opentype'),  /*为了支持低版本的IE*/
        url('fonts/icomoon.ttf?3hb5tb') format('truetype'),
        url('fonts/icomoon.woff?3hb5tb') format('woff'),
        url('fonts/icomoon.svg?3hb5tb#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

    
即使不必要帮衬ie8及以下，可以像上边的言传身教一样用一个before或者after的伪类，假诺要求的话，就在html文件之中用实体代码吧，例如地点的菜谱按钮是：



     
当然也足以用icommon提供的大度免费的图标和寻找成效，可是利用那些图标的缺陷是大小或者是分裂的，导致在UI里面原本相同大小的字体图标要求安装分歧的的字体大小。而使用UI图制作的svg大小比例就会接近UI图，无需设置多个font-size。

     
需求留意的是，如若之后还要再导入新的图标，须求在原本的底子上加上，icommon接济导入project，将上面的下载的包里面的selection.json导入即可。即使把从前的icon和新的icon再导入一回，会招致前边的icon的编码发生变化。

     
上面运用了用AI/linscape的办法校勘PS导出的ai/svg文件，也足以一贯用文件编辑器修改svg文件。

     
有的时候，可能必要手动调整下svg的协会，例如位置的搜索框，在PS里面设计师是画了五个圆和一条线，如上边所示：

<svg version="1.1" width="40.004px" height="40.004px" viewBox="0 0 40.004 40.004" style="enable-background:new 0 0 40.004 40.004;"
     xml:space="preserve">
<!-- 外面的圆 -->
<path style="fill-rule:evenodd;clip-rule:evenodd;fill:#505050;" d="M19,0c10.493,0,19,8.507,19,19s-8.507,19-19,19S0,29.493,0,19
    S8.507,0,19,0z"/>
<!-- 里面的圆 -->
<path style="fill-rule:evenodd;clip-rule:evenodd;fill:#505050;" d="M19,2c9.389,0,17,7.611,17,17s-7.611,17-17,17S2,28.389,2,19
    S9.611,2,19,2z"/>
<!-- 放大镜的手柄 -->
<path style="fill-rule:evenodd;clip-rule:evenodd;fill:#505050;" d="M32.691,31.287l7.022,7.022c0.388,0.388,0.388,1.017,0,1.404
    s-1.017,0.388-1.404,0l-7.022-7.022c-0.388-0.388-0.388-1.016,0-1.404C31.674,30.899,32.303,30.899,32.691,31.287z"/>
</svg>

    
假使三个圆的fill颜色都设置成一样的红色的话，那么生成的文书是这么的：

     
里面分外圆的fill属性的效用导致放大镜中间被填充了，由此须求手动改一下，将八个圆放到同一个path，那样围起来的不二法门就是一个环：

<svg width="40.004px" height="40.004px" viewBox="0 0 40.004 40.004" style="enable-background:new 0 0 40.004 40.004;"
     xml:space="preserve">
<!-- 把两个圆放到一起形成一条封闭的路径，即一个环 -->
<path style="fill-rule:evenodd;clip-rule:evenodd;fill:#505050;" d="M19,0c10.493,0,19,8.507,19,19s-8.507,19-19,19S0,29.493,0,19
    S8.507,0,19,0
    M19,2c9.389,0,17,7.611,17,17s-7.611,17-17,17S2,28.389,2,19
    S9.611,2,19,2z"/>
<!-- 放大镜的手柄 -->
<path style="fill-rule:evenodd;clip-rule:evenodd;fill:#505050;" d="M32.691,31.287l7.022,7.022c0.388,0.388,0.388,1.017,0,1.404
    s-1.017,0.388-1.404,0l-7.022-7.022c-0.388-0.388-0.388-1.016,0-1.404C31.674,30.899,32.303,30.899,32.691,31.287z"/>
</svg>

      生成的放大镜就好像常了：

     
还有的图标可能是由七个图层组成的，那个时候必要各自生成svg，然后嵌入一起，用Inkscape或ai调下相对地方。那里必要点svg的学识，能够参照MDN上的svg教程。

      最终再比较下大小，把地点第一张sprites图里面的9个小图标都制作成icon
fonts，生成的文件大小为：

     
最大的为6.6KB，小的为2.6KB，而地点生成的sprites图为7.1KB，用tinypng压缩后为3.0KB。可以看到，倘诺唯有多少个图标并且图标本身就相比较小时，在文件大小上，icon-font比sprites图的优势并不强烈。当图标伸张到18个，即把下面的图标再导入三回，现制作的icon-fonts大小为：

     
18个icon-font的最大svg格式的为13kb，最小的为4.1KB，sprites图为6KB，考虑到svg格式的并不太会可能被浏览器下载，
如下图所示。所以在文件大小上，icon-fonts仍旧比sprites图有优势的，要是图标个数不多的话差距不大。即使图标必要出示得很大的话，icon
fonts的优势就很鲜明了。

IE6	仅支持 Embedded OpenType(.eot) 格式。
IE7	仅支持 Embedded OpenType(.eot) 格式。
IE8	仅支持 Embedded OpenType(.eot) 格式。
Firefox 3.5	支持 TrueType、OpenType(.ttf, .otf) 格式。
Firefox 3.6	支持 TrueType、OpenType(.ttf, .otf) 及 WOFF 格式。
Chrome	支持 TrueType、OpenType(.ttf, .otf) 及 SVG Font(.svg) 格式。
Safari	支持 TrueType、OpenType(.ttf, .otf) 及 SVG Font(.svg) 格式。
Opera	支持 TrueType、OpenType(.ttf, .otf) 及 SVG Font(.svg) 格式。

来自w3 help

     
使用sprites图的此外一个欠缺是，在活动端低配置的装备，可能会给内存和CPU带来很大的压力，假如sprites图太大的话。而icon
font的最大优点是矢量无损，缺点是不得不协助单色的图标，因为它是一个家常的书体，还有在炮制上稍麻烦。

 

参考：

      1. 施用css3新属性clip-path制作小图标

      2. icomoon，制作icon font的在线工具

      3. PSD to SVG

 

 

 

font，uiicon
一个并行比较多的UI图里面可能会有不少小图标，一般可用sprites图将多个小图标弄成一张大图，或者…

SVG优势

乘势高清屏幕的推广，比较使用png等位图而言，使用SVG等矢量图形是一种崭新的筹划艺术。更要紧的是对照位图而言，SVG有着无可比拟的优势。那里自己总计一下SVG具体的局地优势：

1. SVG是矢量图形文件，可以随心所欲变动大小，而不影响图标质量。

2. 可以用CSS样式来自由定义图标颜色，比如颜色/尺寸等功能。

3. 负有的SVG可以全方位在一个文件中，节省HTTP请求 。

4. 利用SMIL、CSS或者是javascript可以制作充满灵性的互相动画效果。

5. 是因为SVG也是一种XML节点的文件，所以可以使用gzip的不二法门把公文裁减到很小。

里头使用SVG来成立动画更是令人憧憬，由于SVG是一种恍若DOM节点组成的文本文档，所以我们可以很精细的控制SVG图形的每一个局地，并且可以利用CSS3照旧是javascript来制作动画效果。下边我们就来看一个用到SVG制作的动画片，如下图所示：

想看它在web上的实在效果么，请扫描下边的二维码：

 

起来从前，可以先下载基本的html和svg代码，下载地址

关于浏览器图标解决方案，一直就有广大 CSS Sprite，Icon Font，CSS
Icon以及SVG.相对而言svg矢量图标以及辅助浏览器自身分析的长处，很多社团都已经在应用了。那篇小说主要表明svg图标的利用和制作。

运用方法

在web开发中，SVG首要有上边三种拔取办法：

1. 接纳img和object标签直接引用svg。那种艺术的弱点紧要在于要求各样图标都独立保存成一个SVG文件，使用时也是单身请求的，扩充了HTTP请求。
2. Inline SVG，直接把SVG写入 HTML
   中，这种格局不难易行直接，而且具有至极好的可调性。Inline SVG
   作为HTML文档的一有些，不要求单独请求。临时要求修改某个图标的形象也比较方便。可是Inline
   SVG使用上相比繁琐，要求在页面中插入一大块SVG代码不适合手写，图标复用起来也相比较费劲。
3. SVG
   七喜。那里所说的雪碧技术，没错，类似于CSS中的Pepsi-Cola技术。图标图形组成在同步，实际突显的时候准确突显特定图标。其实基础的SVG
   7-Up也只是将本来的位图改成了SVG而已。
4.  最终就是本文的支柱啦。使用svg中的<symbol>元向来构建icon。

目前，大家最主要介绍的是选择svg中的<symbol>元从来创设icon，在上边说到的SVG
7-Up中，大家要求利用绝对位置来控制哪个图标被突显出来，但是SVG本身的概念是允许你可以应用<use>的方法平素引用SVG中的某一局地。

那么<symbol>元素是怎么呢？按字面意思的话是符号的意趣，假使把一个SVG文件比喻成一个书柜的话，那么<symbol>则就象征书柜中一图书分裂门类的书籍。这几个一本本不一样门类的书本就是我们要利用的<symbol>图标。

上面的代码就是将多少个SVG图标整合成一个SVG文件之后的指南，可以见见代码中有两样序列的<symbol>元素，它们就是大家要引用的图标：

各类Symbol设置一个id作为引用时的名字。使用id引用那几个SVG中的Icon有二种艺术。

率先种，将上述SVG作为body的第二个因素插入在HTML中， 此后，在急需显示某个
Icon 的地方插入下边的代码即可：

其次种是，是利用完整路径引用Icon。 也就是：

那种方式不须求像百事可乐那样繁琐的安装图片的移动。使用id命名图标并行使时一贯利用id引用既直观又简便。

• 示范地址
• 代码

自动化合并工具

标题来啦，如若遭受很多的图标，难道大家都要手动去联合为一个SVG吗？当然绝不。

那边介绍一个越发用于拍卖SVG
Symbols用的glup插件gulp-svg-symbols。

下边大家就来以一个实例一步一步来使用下这一个插件。

第一新建一个文件夹，目录结构如下图所示：

svg文件夹是用来存放在svg格式文件的。

当然首先是你得有glup环境，至于glup环境的装置那里就不再讲演了，详细的设置使用教程可以去那篇文章看看。

下一场在你的类型目录下运作上面的指令安装插件：

终极在您的品种目录新建一个**gulpfile.js**文本，写入上边的代码：

ok。基本的环境搭好啊，正所谓，巧妇难为无米之炊。上哪找svg图标去吗？
那里推荐去icomoon.io 这些更加提供矢量图标网站下载矢量图像，紧要的是它提供SVG格式的图片下载。

俺们那边就以icomoon.io为例，首先是点击你须要下载的图形，选中它，然后点击下载按钮：

点击下载svg：

下一场依照大家地点的配备文件，大家把下载好的svg图标放到svg文件夹中。

凡事准备妥当，在您的体系目录中，运行gulp sprites命令：

运行命令之后，它会在你的目录中生成一个svg文件，用你常用的代码编辑器打开svg文件，可以见见svg图标都被统一到一个文本中。并且根据对应SVG文件的名称变更了ID，如下图所示：

那怎么利用呢它们啊？直接在html文件中应用，并且可以直接使用css来定义宽高、填充颜色等属性。如下代码所示：

而是由于浏览器安全策略限制的来由，大家无法在本土一向打开html文件来预览大家引用的svg文件，要求以服务器的花样来开辟，用gulp也很简单搞定一个简练的服务器环境。首先大家需求安装gulp-connect那些模块，运行上面的吩咐：

下一场修改下gulpfile.js文件中的配置项：

运转gulp
webserver命令，打开localhost:8080，就可以看看我们引入的svg图标了：

 

源代码下载

为了更能直接反映应用SVG来作为图形格式的优势，我分别把上面的三个图标放大到十种例外的尺寸，具体结果请不加思索拿起你的手机，扫描下边的二维码。会发觉如故清晰可见：

SVG Sprite

历史观的做法
应用AI或者合并SVG图像，然后用background-postion;
打开AI，新建一个30 * 60(px)的画布，设置好网格和参考线.
用AI打开svg文件，然后复制路径到画布上调整大小

此外就和css-sprite没有距离了

.icon-bg{
   display: inline-block;
   width: 30px; height: 30px;
   background: url(./res/svg-sprite-background.svg);
   background-size:100% 100%; 
  vertical-align: middle;
}
.icon-facebook-logo{
  background-position: 0 0;
 }
.icon-earth{ 
  background-position: 0 -30px;
}
.icon-like{ 
  background-position: 0 -60px;
}

html 中使用

<p class="btn-group">
   <a href="#" class="btn btn-default">

   </a> 
   <a href="#" class="btn btn-default">

   </a>
   <a href="#" class="btn btn-success">

   </a>
</p> 

功效如下：

总结

归咎，使用SVG
Symbols的办法来制作图标比使用字体图标有着无可比拟的优势。更首要的是SVG中的每一个path元素都可以独自主宰，这可以给大家带来如何啊？点击上面的图纸你就通晓使用SVG来创设图纸元素带来的魅力啦。

本身觉的在运动端完全可以推广使用了，主流的安卓和苹果的浏览器都协理SVG。

使用photoshop举行联合

也许过多图标是图形形状。

• 打开Photoshop 新建一个30 *60 (px)的画布，大家布置30px
  *30px,设置好网格或者参考线
• 用AI打开SVG文件，然后Ctrl+C
  复制路径，然后复制到photoshop文档中，选拔图层形状，然后再开展调整
• 选择 ‘文件’ ->’导出’ -> ‘路径到illustrator’
• 亚洲必赢官网 ，保存为SVG

功能如下：

• 万一如此做，那如同浪费了SVG的浩大表征.

参照小说：

Gulp as a Development Web
Server
SVG symbol a Good Choice for
Icons
Inline SVG vs Icon Fonts
replace-icon-fonts-with-svg

 

原文出处： 腾讯ISUX   

SVG 百事可乐的其余一种完毕思路 <symbol> + <use>

• SVG
  <symbol>在svg中重视适用于概念可复用的号子，而那一个概念在symbol元素的样子将不会被展现出来，
  而是通过use元素引用来显示。

• 在SVG中<use>可以在任哪个地方方复用svg文件中定定义的的形，包蕴<g>和
  <symbol>已经<defs>。

• 在应用 use 时，它必必要有一个id，那样 use
  通过xlink:href的值找到该造型的引用。注意，一定要在前头加
  一个#，那样才能引用ID成功。

  <svg width="300" height="300"> 
    <defs> 
      <g id="shape"> 
        <rect x="50" y="50" width="50" height="50" />
        <circle cx="50" cy="50" r="50" /> 
      </g>
    </defs> 
  
    <use xlink:href="#shape" x="50" y="50" /> 
    <use xlink:href="#shape" x="200" y="50" />
  </svg>
  

在使用use时，它必需求有一个id,那样use通过xlink:href的值找到该造型的引用.注意，一定要在前头加一个#，那样才能引用ID成功。

先是我们使用PS+AI生成带有symbol的 SVG。

眼前步骤与变化背景的图类似

• 打开Symbols面板，在Window菜单栏中，或Shift+Ctrl+F11启用。然后，选中单个元素，点击添加。
  

• 给标记命名，该名称即为引用的ID
  

• 保留为SVG时，实际上生成的SVG代码并非我们要使用的，太过臃肿，能够到
  http://www.zhangxinxu.com/sp/svg.html
  进行处理下，方便使用查看DEMO3处理后的代码

• 在Html 里将SVG 放入，并隐藏;
  <svg style=”display:none;”> <symbol id=”earth” …
  </path></symbol></svg>

使用：

  <svg class="icon icon-facebook"><use xlink:href="#facebook"></use></svg>

效率如下：

可以通过CSS去决定填充(fill)或者描边的颜料(stroke)

  .icon-blue{ 
      fill:#1ba1e2;
   }

使用 icomoon
制作SVG Sprite [推荐]
icommon不仅可以生成icon fonts还足以生成SVG Sprite.

文件下载完结解压可以获得的文本夹里面会有demo.html
可以一向打开源码参考使用.

使用svgstore生成SVG Sprite

svgstore是 grunt的一个插件，用于机动得到文件中的SVG文件并机关合并。

    npm install grunt-svgstore --save-dev

设置成功后，能够在 node_modules中看到grunt-svgstore文件夹

可以新建一个项目，svg-demo1

在文书中新建一个 src 文件夹，并把必要统一的svg文件中放进去

下一场新建package.json

{ 
  "name": "svg-store", 
  "version": "0.1.0",
  "private": true, 
  "devDependencies": { "grunt": "^0.4.5", "grunt-svgstore": "~0.5.0" }
}

下一场新建Gruntfile.js,里面配备选项大约如下：

配置.png

接下去输入指令npm install;
电动加载器重项目,再输入指令:

  grunt

其一时候可以看看一个联合的dest-svg.svg文件和一个dest-svg-demo.html文件，打开网页文件，你可以急忙的应用那么些svg
icon了.

局地广大的布置表达:

  options.includedemo // 是否生成一个demo的html文件 一般还是写上比较好 
  options.cleanup //是否支持css 控制图标的fill和stroke属性等，可以传入一个数组实现自定义 ['fill','stroke-    width' ...]
  options.svg // 添加svg的一些属性在生成的svg文件中 viewBox: '0,0,100,100'

越来越多选项:参考这里

小结
依傍第三方工具我们可以很快的造作svg
sprite,相对其他方案，svg尤其灵敏，可决定，矢量突显等优点，在移动端以及一些pc站点上非凡适用于图标解决方案。
扩充阅读:
http://events.jackpu.com/svg/demo.html