利用SVG中的Symbol成分制作Icon,把UI图里的小Logo制

浅谈SVG Sprite

2016/03/06 · HTML5 · SVG

原稿出处: 蜂窝网设计划委员会员会   

趁着前端才能的开辟进取,有更加的多的点子达成icon的造作,同期为了知足市道上种种大显示器分辨率,字体图标icon font应际而生,字体Logo的造作也是一种全新的统一打算方法,可是icon font 在windows系统下,字体较时辰,锯齿难点相比较严重,那么今天要讲的svg sprite,不仅能够随性所欲改造Logo大小不会时有发生锯齿,还是可以随随意便的填写颜色。

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

第一步:制作SVG图标
首先的预备一套SVGLogo,大家间接到icomoon.io上下载。

1.选中Logo

星彩彩票app下载 1

2.点击Generate

星彩彩票app下载 2

3.下载

星彩彩票app下载 3

接下来大家得以在解压文件中,找到呼应的svg图标文件夹。

星彩彩票app下载 4 星彩彩票app下载 5

第二步:合并SVG图标
桑土盘算好svgLogo后,大家必要把多少个svg图标整合到三个svg文件中。
此间须求用到自动化合併工具(grunt),grunt有个名叫svgstore的插件。
有关grunt情状的设置,就不在这里演讲 。

条件设置好后,在品种目录下实行上面包车型地铁下令,安装插件:

星彩彩票app下载 6

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

星彩彩票app下载 7

星彩彩票app下载 8

通晓越来越多安顿项:

安顿好现在,大家需求把第一步下载下来的svgLogo,放到sprites文件夹中,如下图:

星彩彩票app下载 9

到那截至,一切筹划稳妥,只需步向到 grunt-svgstore目录,推行命令:

星彩彩票app下载 10

运作命令后,能够见到成功开创了sprite.svg文件

星彩彩票app下载 11

第三步:应用

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

星彩彩票app下载 12

再来看看浏览器里页面的效用~~~

星彩彩票app下载 13

到那边svg sprite Logo就早就实现了。

兼容性:

星彩彩票app下载 14

对于ie8以下,大家得以增多三个标签,使用css sprite:

为幸免别的浏览器加载,能够加多条件注释。

星彩彩票app下载 15

如此那般就完善啦~

 

2 赞 5 收藏 评论

星彩彩票app下载 16

前言

乘机大显示屏分辨率的推广以至各样运动设备比比都已经的移位网络时代的过来,我们在网址设计时更应当关切内容在各个设施上的阅读性和出示效果。大家都盼望能在别的时刻,任何设施上都能明白的,高效的传递音讯给客商。

而随着各个高清视网膜显示器的产出,今后web设计也急需思索各个高清显示器的来得效果,一样前端在代码完成的时候也急需基于显示屏的分裂来输出不一样分辨率的图片。为了使大家的网页能够适配视网膜显示屏上的高分辨率,在前端开采中平时须求安不忘危两套区别尺寸的图纸来应对,一套在日常显示器上显得;一套在高清荧屏上海展览中心示。

为了解决显示器分辨率对Logo影响的主题材料,字体Logo即icon font顺势而生。字体Logo是一种全新的规划方法。更主要的是比照图片来讲,使用字体来构建Logo能够不受于显示屏分辨率的熏陶,那对于当今种种分辨率荧屏的活动互连网时代,比起用图片来讲真的有十分大的优势。所今后后在web开拓中,使用字体来制作icon应用的也越扩展。

莫非大家唯有这一种选拔么?No,追根求源,其实字体Logo也是一种基于矢量图形的一种本领封装而已。那篇小说我们就来看看使用正宗的矢量图形SVG来构建icon的运用,看过以往相信您会有一种“拈花微笑,飞叶伤人”的感到到。

星彩彩票app下载 17

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

      一个互相非常多的UI图里面或许会有好些个小Logo,经常可用sprites图将多少个小Logo弄成一张大图,可能其余的方法,种种法子的可比可参见博主的别的一篇博客使用css3新属性clip-path制作小Logo,本文深远座谈使用icon-font的的制作方法:在PS里面导出svg,制作字体Logo。这种艺术既有sprites图无需浏览器发数十次诉求的长处,也可能有使用clip-path/svg矢量无损的独到之处,并且援救IE6及以上。

      使用sprites图可以自动用PS将多个小Logo放至一张图:

      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

星彩彩票app下载 18

       9. 接下去,依据icomoon,制作字体。展开icommon(要是打不开,得使用代理因为那网址选择了谷歌(Google)的有的服务),点击右上角的Import Icon按键,导入上边保存的svg文件。

       icomoon就能够跳到select页面,选中刚刚导入的Logo:

      再点击右下角的Generate Font:

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

      观看它的施用代码,发掘那一个Logo被拆成了6个span表示6个path,还要调治它们的间距。那不是想要的结果,理想的结果应该是一旦三个span表示那个Logo就好了。

      依据icomoon的交由的提醒:

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

星彩彩票app下载,      开采是由于各样部份的颜料不雷同导致的,上面安装未有出示出来的其余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提供的大方无需付费的Logo和查找功效,可是使用那么些图标的瑕玷是大小可能是不平等的,导致在UI里面原来一样大小的书体图标要求设置差别的的字体大小。而选取UI图制作的svg大小比例就能够贴近UI图,不须要设置八个font-size。

      需求注意的是,借使之后还要再导入新的Logo,须要在原先的底子上增加,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>

      生成的放大镜如同常了:

      还会有的Logo大概是由七个图层组成的,那年需求各自生成svg,然后嵌入一同,用Inkscape或ai调下绝对地方。这里供给点svg的知识,能够参见MDN上的svg教程。

      最终再比较下大小,把地点第一张sprites图里面包车型大巴9个小Logo都制作成icon fonts,生成的文件大小为:

      最大的为6.6KB,小的为2.6KB,而地方生成的sprites图为7.1KB,用tinypng压缩后为3.0KB。能够看到,倘诺独有多少个图标而且Logo本人就十分的小时,在文件大小上,icon-font比sprites图的优势并不显眼。当图标扩张到19个,即把上边的Logo再导入三遍,现制作的icon-fonts大小为:

      二十个icon-font的最大svg格式的为13kb,最小的为4.1KB,sprites图为6KB,思量到svg格式的并不太会或者被浏览器下载, 如下图所示。所以在文件大小上,icon-fonts照旧比sprites图有优势的,假诺Logo个数没多少的话差距相当小。要是Logo要求体现得非常大的话,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的最大亮点是矢量无损,劣势是只可以扶助单色的Logo,因为它是二个常备的书体,还或然有在营造上稍麻烦。

 

参考:

      1. 选用css3新属性clip-path制作小Logo

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

      3. PSD to SVG

 

 

 

font,uiicon 三个互相比相当多的UI图里面只怕会有不菲小Logo,通常可用sprites图将多个小Logo弄成一张大图,大概...

SVG优势

乘胜高清显示屏的遍布,比较使用png等位图来讲,使用SVG等矢量图形是一种全新的统筹方法。更要紧的是看待位图来说,SVG有着当世无双的优势。这里小编总括一下SVG具体的片段优势:

  1. SVG是矢量图形文件,能够轻松变动大小,而不影响Logo品质。
  2. 能够用CSS样式来自由定义图标颜色,比如颜色/尺寸等成效。

  3. 怀有的SVG能够整个在三个文件中,节省HTTP央浼 。

  4. 动用SMIL、CSS或然是javascript能够制作充满灵性的互相动画效果。

  5. 鉴于SVG也是一种XML节点的文本,所以能够选拔gzip的章程把文件减少到异常的小。

里头使用SVG来塑造动画更是令人憧憬,由于SVG是一种类似DOM节点组成的文本文书档案,所以我们能够相当小巧的支配SVG图形的每二个有个别,並且可以使用CSS3大概是javascript来创造动画效果。上边我们就来看八个用到SVG制作的动画片,如下图所示:

星彩彩票app下载 19

想看它在web上的真实性效果么,请扫描下边包车型客车二维码:

星彩彩票app下载 20

 

千帆竞发以前,能够先下载基本的html和svg代码,下载地址

有关浏览器Logo建设方案,一向就有众多 CSS Sprite,Icon Font,CSS Icon以及SVG.相对来说svg矢量Logo以致扶植浏览器本身深入分析的亮点,比很多集团都曾在动用了。那篇小说主要表明svgLogo的接纳和创建。

运用办法

在web开辟中,SVG主要有下边二种选择方法:

  1. 选取img和object标签直接援用svg。这种格局的症结首要在于必要各类Logo都单身保存成贰个SVG文件,使用时也是单独央求的,增添了HTTP必要。
  2. Inline SVG,直接把SVG写入 HTML 中,这种方法简便直接,并且具有特别好的可调性。Inline SVG 作为HTML文书档案的一局地,无需单独央浼。不常须求修改有些Logo的造型也正如方便。但是Inline SVG使用上比较繁琐,须求在页面中插入第一次全国代表大会块SVG代码不符合手写,Logo复用起来也正如麻烦。
  3. SVG 7-Up。这里所说的百事可乐技能,没有错,类似于CSS中的Coca Cola技能。图标图形组成在联合签名,实际呈现的时候正确显示特定Logo。其实基础的SVG Coca Cola也只是将原本的位图改成了SVG而已。
  4.  最终正是本文的中流砥柱啦。使用svg中的<symbol>成分来塑造icon。

前日,大家根本介绍的是运用svg中的<symbol>成分来创建icon,在上头提及的SVG Pepsi-Cola中,大家必要采用相对地点来支配哪个Logo被出示出来,不过SVG本人的概念是同意你能够使用<use>的艺术平素援引SVG中的某一有的。

那么<symbol>成分是何等吧?按字面意思的话是标志的情趣,假若把多个SVG文件比喻成二个书柜的话,那么<symbol>则就意味着书柜中一书籍分化门类的书本。那些一本本差别品种的图书正是大家要运用的<symbol>图标。

下边包车型地铁代码正是将三个SVGLogo整合成叁个SVG文件从此的标准,能够看来代码中有差别品种的<symbol>成分,它们就是我们要援引的Logo:

星彩彩票app下载 21
各样Symbol设置贰个id作为援用时的名字。使用id援用那一个SVG中的Icon有二种形式。

首先种,将上述SVG作为body的第一个成分插入在HTML中, 此后,在供给显示某个Icon 的地点插入下边包车型大巴代码就可以:

星彩彩票app下载 22

第二种是,是运用完全路线援引Icon。 也便是:

星彩彩票app下载 23

这种办法无需像Sprite那样琐碎的安装图片的活动。使用id命名Logo并采纳时直接使用id引用既直观又简约。

  • 示范地址
  • 代码

自动化合併工具

标题来啊,如若遇上相当多的Logo,难道大家都要手动去联合为贰个SVG吗?当然绝不。

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

上面大家就来以多少个实例一步一步来行使下那些插件。

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

星彩彩票app下载 24

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

理所当然首先是您得有glup境况,至于glup遇到的装置这里就不再演说了,详细的安装使用教程能够去那篇小说看看。

然后在您的品类目录下运转上面包车型地铁一声令下安装插件:

星彩彩票app下载 25

最终在您的连串目录新建贰个**gulpfile.js**文件,写入下边包车型地铁代码:

星彩彩票app下载 26

ok。基本的情状搭好啊,正所谓,巧妇难为无米之炊。上哪找svgLogo去吧? 这里推荐去icomoon.io 这么些非常提供矢量Logo网址下载矢量图像,重要的是它提供SVG格式的图纸下载。

我们那边就以icomoon.io为例,首先是点击你需求下载的图纸,选中它,然后点击下载开关:

星彩彩票app下载 27

点击下载svg:

星彩彩票app下载 28

然后根据大家地方的配备文件,我们把下载好的svgLogo放到svg文件夹中。

万事准备伏贴,在您的类型目录中,运营gulp sprites命令:

星彩彩票app下载 29

运作命令之后,它会在您的目录中生成三个svg文件,用你常用的代码编辑器张开svg文件,可以见到svg图标都被统一到三个文书中。而且依据对应SVG文件的称号改动了ID,如下图所示:

星彩彩票app下载 30

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

星彩彩票app下载 31

唯独是因为浏览器安全计策限制的由来,我们不可能在本地一向打开html文件来预览大家援引的svg文件,要求以服务器的情势来开采,用gulp也很轻便化解贰个简练的服务器情状。首先我们须求安装gulp-connect这么些模块,运转上边的命令:

星彩彩票app下载 32

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

星彩彩票app下载 33

运行gulp webserver命令,打开localhost:8080,就足以观看大家引入的svgLogo了:

星彩彩票app下载 34

 

源代码下载

为了更能平昔反映应用SVG来作为图形格式的优势,作者分别把上边的多个Logo放大到十种两样的尺寸,具体结果请不假思索拿起你的无绳电话机,扫描上边包车型地铁二维码。会开采依旧清晰可见:

星彩彩票app下载 35

SVG Sprite

历史观的做法
利用AI恐怕联合SVG图像,然后用background-postion;
开荒AI,新建三个30 * 60(px)的画布,设置好网格和仿照效法线.
用AI张开svg文件,然后复制路线到画布上调度大小

星彩彩票app下载 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> 

效果与利益如下:

星彩彩票app下载 37

总结

综述,使用SVG Symbols的主意来创制Logo比选取字体Logo有着并世无双的优势。更珍视的是SVG中的每二个path元素都可以单独主宰,那能够给大家带来怎样啊?点击上边包车型客车图形你就清楚使用SVG来创设图纸成分带来的魔力啦。

星彩彩票app下载 38

本人觉的在活动端完全能够推广使用了,主流的安卓和苹果的浏览器都扶助SVG。

行使photoshop实行合併

大概过多Logo是图片形状。

  • 展开Photoshop 新建三个30 *60 (px)的画布,我们布置30px *30px,设置好网格只怕仿效线
  • 用AI展开SVG文件,然后Ctrl C 复制路线,然后复制到photoshop文书档案中,选取图层形状,然后再张开调节
  • 选择 '文件' ->'导出' -> '路径到illustrator'
  • 保存为SVG

效能如下:

星彩彩票app下载 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 Pepsi-Cola的此外一种实现思路 <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。

前方步骤与转变背景的图类似

星彩彩票app下载 40

  • 开荒Symbols面板,在Window菜单栏中,或Shift Ctrl F11启用。然后,选中单个成分,点击加多。 星彩彩票app下载 41

  • 给标志命名,该名称即为引用的ID 星彩彩票app下载 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>

成效如下:

星彩彩票app下载 43

能够透过CSS去决定填充(fill)也许描边的颜料(stroke)

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

星彩彩票app下载 44

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

星彩彩票app下载 45

文本下载落成解压能够收获的公文夹里面会有demo.html 能够直接展开源码参谋使用.

星彩彩票app下载 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,里面配备选项大约如下:

星彩彩票app下载 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站点上特别适用于Logo建设方案。
扩大阅读: http://events.jackpu.com/svg/demo.html

本文由星彩网app下载发布于前端技术,转载请注明出处:利用SVG中的Symbol成分制作Icon,把UI图里的小Logo制

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。