把UI图里的小图标制作成icon,使用SVG中的Symbol元素制作Icon

浅谈SVG Sprite

2016/03/06 · HTML5 ·
SVG

原文出处:
携程设计委员会   

乘势前端技术的向上,有更多的不二法门完毕icon的创造,同时为了满足市面上种种大屏幕分辨率,字体图标icon
font应运而生,字体图标的造作也是一种全新的设计艺术,不过icon font
在windows系统下,字体较小时,锯齿难题比较严重,那么今日要讲的svg
sprite,不仅可以任意改变图标大小不会发生锯齿,还是可以自由的填充颜色。

下面来来介绍一下矢量图形SVG 七喜在页面中的应用。

第一步:制作SVG图标
第一的备选一套SVG图标,大家一直到icomoon.io上下载。

1.选中图标

美高梅开户网址 1

2.点击Generate

美高梅开户网址 2

3.下载

美高梅开户网址 3

下一场大家可以在解压文件中,找到相应的svg图标文件夹。

美高梅开户网址 4
美高梅开户网址 5

第二步:合并SVG图标
准备好svg图标后,大家必要把几个svg图标整合到一个svg文件中。
此处须求用到自动化合并工具(grunt),grunt有个名为svgstore的插件。
有关grunt环境的装置,就不在那解说 。

条件设置好后,在档次目录下实施上面的吩咐,安装插件:

美高梅开户网址 6

安装好后,可以见到grunt-svgstore文件夹里有个Gruntfiles.js配置文件。
大家投入以下两段代码:

美高梅开户网址 7

美高梅开户网址 8

问询越来越多配备项:

布署好未来,大家须求把第一步下载下来的svg图标,放到sprites文件夹中,如下图:

美高梅开户网址 9

到那为止,一切准备妥当,只需进入到 grunt-svgstore目录,执行命令:

美高梅开户网址 10

运行命令后,可以看出成功创办了sprite.svg文件

美高梅开户网址 11

第三步:应用

我们来看下生成文书的源代码:

美高梅开户网址 12

再来看看浏览器里页面的法力~~~

美高梅开户网址 13

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

兼容性:

美高梅开户网址 14

对此ie8以下,大家得以增加一个标签,使用css sprite:

为幸免其余浏览器加载,可以拉长条件注释。

美高梅开户网址 15

诸如此类就到家啦~

 

2 赞 5 收藏
评论

美高梅开户网址 16

前言

乘胜大屏幕分辨率的推广以及种种活动装备家常便饭的位移互连网时代的赶到,大家在网站设计时更应有关爱内容在种种设施上的阅读性和显示效果。大家都盼望能在其他时刻,任何设施上都能了然的,高效的传递音信给用户。

而随着各个高清视网膜显示屏的出现,现在web设计也亟需考虑各个高清显示屏的来得效果,同样前端在代码完成的时候也急需基于屏幕的不等来输出分化分辨率的图形。为了使大家的网页可以适配视网膜屏幕上的高分辨率,在前端开发中貌似须要未雨绸缪两套分歧尺寸的图纸来应对,一套在平时屏幕上突显;一套在高清显示屏上显得。

为领悟决显示屏分辨率对图标影响的标题,字体图标即icon
font顺势而生。字体图标是一种崭新的规划方法。更关键的是比照图片而言,使用字体来制作图标能够不受于显示器分辨率的震慑,那对于当今各个分辨率显示器的运动互联网时代,比起用图片来说的确有很大的优势。所以现在在web开发中,使用字体来成立icon应用的也更多。

难道说我们只有这一种选拔么?No,追根溯源,其实字体图标也是一种基于矢量图形的一种技术封装而已。那篇文章大家就来探视使用正宗的矢量图形SVG来制作icon的施用,看过未来相信你会有一种“拈花微笑,飞叶伤人”的感觉。

美高梅开户网址 17

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

     
一个交互比较多的UI图里面可能会有许多小图标,一般可用sprites图将四个小图标弄成一张大图,或者另外的措施,各样艺术的相比较可参见博主的其余一篇博客使用css3新属性clip-path制作小图标,本文浓密研讨使用icon-font的的制作方法:在PS里面导出svg,制作字体图标。那种艺术既有sprites图不须求浏览器发很多次请求的助益,也有选取clip-path/svg矢量无损的优点,并且支持IE6及以上。

把UI图里的小图标制作成icon,使用SVG中的Symbol元素制作Icon。      使用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

美高梅开户网址 18

       9.
接下去,借助icomoon,制作字体。打开icommon(假使打不开,得利用代理因为这网站使用了谷歌(Google)的部分劳动),点击右上角的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,所以把它们都改成和左下角那么些都一模一样的颜料:

      保存后上传到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制作的动画,如下图所示:

美高梅开户网址 19

想看它在web上的忠实效果么,请扫描下边的二维码:

美高梅开户网址 20

 

千帆竞发从前,可以先下载基本的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
    Pepsi-Cola。那里所说的Pepsi-Cola技术,没错,类似于CSS中的7-Up技术。图标图形组成在共同,实际展现的时候准确显示特定图标。其实基础的SVG
    Pepsi-Cola也只是将本来的位图改成了SVG而已。
  4.  最终就是本文的台柱啦。使用svg中的<symbol>元一直创设icon。

方今,我们根本介绍的是运用svg中的<symbol>元一直创设icon,在上边说到的SVG
Sprite中,我们要求利用相对地点来控制哪个图标被突显出来,不过SVG本身的概念是同意你可以运用<use>的不二法门间接引用SVG中的某一片段。

那么<symbol>元素是什么样啊?按字面意思的话是符号的情趣,要是把一个SVG文件比喻成一个书柜的话,那么<symbol>则就意味着书柜中一书籍不一样档次的书本。那个一本本不相同类其他书本就是我们要接纳的<symbol>图标。

上边的代码就是将三个SVG图标整合成一个SVG文件从此的规范,可以观望代码中有不一致类其余<symbol>元素,它们就是我们要引用的图标:

美高梅开户网址 21
每个Symbol设置一个id作为引用时的名字。使用id引用这些SVG中的Icon有两种格局。

第一种,将上述SVG作为body的第三个元素插入在HTML中, 此后,在须求体现某个
Icon 的地方插入上边的代码即可:

美高梅开户网址 22

第三种是,是选用完整路径引用Icon。 也就是:

美高梅开户网址 23

那种艺术不须求像Pepsi-Cola这样繁琐的设置图片的移位。使用id命名图标并行使时直接行使id引用既直观又简约。

  • 示范地址
  • 代码

自动化合并工具

标题来啊,如若境遇很多的图标,难道大家都要手动去联合为一个SVG吗?当然绝不。

那边介绍一个特地用来拍卖SVG
Symbols用的glup插件gulp-svg-symbols。

上边大家就来以一个实例一步一步来利用下那么些插件。

先是新建一个文书夹,目录结构如下图所示:

美高梅开户网址 24

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

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

接下来在你的连串目录下运作上边的吩咐安装插件:

美高梅开户网址 25

末尾在您的项目目录新建一个**gulpfile.js**文本,写入上面的代码:

美高梅开户网址 26

ok。基本的条件搭好啊,正所谓,巧妇难为无米之炊。上哪找svg图标去吧?
那里推荐去icomoon.io 那么些专门提供矢量图标网站下载矢量图像,首要的是它提供SVG格式的图纸下载。

我们那边就以icomoon.io为例,首先是点击你须要下载的图纸,选中它,然后点击下载按钮:

美高梅开户网址 27

点击下载svg:

美高梅开户网址 28

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

全体准备妥当,在您的类型目录中,运行gulp sprites命令:

美高梅开户网址 29

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

美高梅开户网址 30

那怎么利用呢它们啊?直接在html文件中选用,并且能够一向使用css来定义宽高、填充颜色等属性。如下代码所示:

美高梅开户网址 31

但是鉴于浏览器安全策略限制的案由,大家不可以在地面一贯打开html文件来预览大家引用的svg文件,要求以服务器的花样来开辟,用gulp也很不难搞定一个简易的服务器环境。首先大家要求设置gulp-connect这些模块,运行下边的授命:

美高梅开户网址 32

接下来修改下gulpfile.js文件中的配置项:

美高梅开户网址 33

运转gulp
webserver命令,打开localhost:8080,就可以阅览我们引入的svg图标了:

美高梅开户网址 34

 

源代码下载

为了更能一贯反映应用SVG来作为图形格式的优势,我分别把上边的四个图标放大到十种例外的尺码,具体结果请不假思索拿起你的手机,扫描下边的二维码。会发觉依然清晰可知:

美高梅开户网址 35

SVG Sprite

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

美高梅开户网址 36

此外就和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> 

功用如下:

美高梅开户网址 37

总结

概括,使用SVG
Symbols的法子来创建图标比选用字体图标有着无可比拟的优势。更要紧的是SVG中的每一个path元素都足以独立主宰,那可以给我们带来怎样啊?点击下边的图纸你就驾驭使用SVG来创设图纸元素带来的魅力啦。

美高梅开户网址 38

我觉的在移动端完全可以推广使用了,主流的安卓和苹果的浏览器都援救SVG。

使用photoshop举行统一

恐怕过多图标是图形形状。

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

成效如下:

美高梅开户网址 39

  • 万一如此做,那如同浪费了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 Sprite的其它一种已毕思路 <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。

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

美高梅开户网址 40

  • 打开Symbols面板,在Window菜单栏中,或Shift+Ctrl+F11启用。然后,选中单个元素,点击添加。
    美高梅开户网址 41

  • 给标记命名,该名称即为引用的ID
    美高梅开户网址 42

  • 封存为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>

效果如下:

美高梅开户网址 43

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

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

美高梅开户网址 44

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

美高梅开户网址 45

文本下载已毕解压可以得到的文本夹里面会有demo.html
能够一贯打开源码参考使用.

美高梅开户网址 46

使用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,里面配备选项大约如下:

美高梅开户网址 47

配置.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

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图