拥抱Web设计新倾向

SVG Symbol可视化学工业具

为了便于高效批量合成SVGLogo生成 SVG
Symbol,提升作用,我们开辟了简易版的SVG Symbol可视化学工业具svg tool

至于浏览器Logo应用方案,一贯就有广大 CSS Sprite,Icon Font,CSS
Icon
以及SVG.相对来说svg矢量Logo以至扶植浏览器本身解析的优点,超级多组织都已在运用了。那篇小说主要表达svgLogo的运用和制作。

svg tool使用:

开垦后界面

图片 1

图片 2

SVG快捷导出

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。

前方步骤与变化背景的图雷同

图片 3

  • 开荒Symbols面板,在Window菜单栏中,或Shift+Ctrl+F11启用。然后,选中单个成分,点击增加。
    图片 4

  • 给标志命名,该名称即为引用的ID
    图片 5

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

效果与利益如下:

图片 6

能够透过CSS去调节填充(fill)或许描边的颜色(stroke)

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

图片 7

使用 icomoon
制作SVG Sprite [推荐]
icommon不仅能够生成icon fonts仍是可以够生成SVG Sprite.

图片 8

文件下载实现解压能够博得的公文夹里面会有demo.html
能够直接张开源码参照他事他说加以侦查使用.

图片 9

Web应用中SVG的选用办法

  • 示范地址
  • 代码

1.利用img、object、embed 标签直接援引SVG

此格局的症结紧要在于种种图标都需单独保存成多个 SVG
文件,使用时单身央浼,扩展了HTTP恳求数量。

XHTML

<img src=”” width=”300″ />

1
<img src="http://www.w3school.com.cn/svg/rect1.svg"  width="300" />
使用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,里面配备选项差不离如下:

图片 10

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

运用限定:

首要支撑单层结构SVG实行联合生产symbol,对于多层结构SVG合并注意手动改善对应颜色。

接纳photoshop举行归总

恐怕过多Logo是图形形状。

  • 张开Photoshop 新建三个30 *60 (px)的画布,我们安插30px
    *30px,设置好网格恐怕参照他事他说加以考察线
  • 用AI展开SVG文件,然后Ctrl+C
    复制路线,然后复制到photoshop文书档案中,接受图层形状,然后再打开调度
  • 选择 ‘文件’ ->’导出’ -> ‘路径到illustrator’
  • 保存为SVG

意义如下:

图片 11

  • 尽管如此做,那犹如萧疏了SVG的比非常多性情.

3.SVG Sprite

此间的Coca Cola本事,相似于CSS中的Pepsi-Cola本事。Logo图形组成在联合具名,实际彰显的时候精确显示特定Logo。其实基本功的SVG
Pepsi-Cola也只是将原本的位图改成了SVG而已,调控SVG大小、颜色须求重新合併SVG文件。

XHTML

.icon-bg{ display: inline-block; width: 30px; height: 30px; background:
url(./res/svg-sprite-background.svg); background-size:100% 100%; }
.icon-facebook-logo{ background-position: 0 0; } .icon-earth{
background-position: 0 -30px; } <span class=”icon-bg
icon-facebook-logo”></span> <span class=”icon-bg
icon-earth”></span>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.icon-bg{
    display: inline-block;
    width: 30px;
    height: 30px;
    background: url(./res/svg-sprite-background.svg);
    background-size:100% 100%;
}
.icon-facebook-logo{
    background-position: 0 0;
}
.icon-earth{
    background-position: 0 -30px;
}
<span class="icon-bg icon-facebook-logo"></span>
<span class="icon-bg icon-earth"></span>
SVG Sprite

古板的做法
使用AI或许联合SVG图像,然后用background-postion;
开采AI,新建一个30 * 60(px)的画布,设置好网格和参谋线.
用AI张开svg文件,然后复制路线到画布上调治大小

图片 12

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

职能如下:

图片 13

2.Inline SVG,直接把SVG写入 HTML 中

Inline SVG
作为HTML文书档案的生龙活虎局部,没有必要独自乞求。偶尔必要改过有些Logo的形状也相比有利。不过Inline
SVG使用上比较麻烦,必要在页面中插入一大块SVG代码不合乎手写,图标复用起来也相比费心。

XHTML

<body> <svg width=”100%” height=”100%”> <rect x=”20″
y=”20″ width=”250″ height=”250″ style=”fill:#fecdddd;”/>
</svg> </body>

1
2
3
4
5
<body>
    <svg width="100%" height="100%">
        <rect x="20" y="20" width="250" height="250" style="fill:#fecdddd;"/>
    </svg>
</body>

SVG导出工具:

  • Photoshop CC 二零一五 以上版本均扶植导出SVG作用
  • Adobe Illustrator 导出
  • export-photoshop-layer-to-svg听别人讲photoshop的SVG导出插件
  • export-svg-with-fireworks依据firework的SVG导出插件

发表评论

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