简介

SVG即可缩放矢量图形 (Scalable Vector Graphics)的简称, 是一种用来描述二维矢量图形的XML标记语言. SVG图形不依赖于分辨率, 因此图形不会因为放大而显示出明显的锯齿边缘.使用svg格式我们可以直接用代码来描绘图像,可以用任何文字处理工具打开svg图像,通过改变部分代码来使图像具有交互功能,并可以随时插入到HTML中通过浏览器来浏览。

优点:

  1. 缩放无损还原
  2. 可设置颜色,大小,使用较灵活
  3. 可利用CSS实现动画
  4. 减少HTTP请求

缺点:

  1. SVG在绘制的性能上比PNG要差
  2. 复杂的图形或渐变可能显示不全
  3. 兼容性稍差

svg sprites

CSS sprites我们都很熟悉,将多个图标合在一个图片文件上,然后通过CSS设置背景图片的坐标来显示对应的部分.CSS sprites技术较成熟,兼容性好。但是缺点就是不够灵活,图标都是切死的,而且放大缩小会显示锯齿。所以如果需求里有图标是可变化的,可以尝试使用SVG图。如果有多个SVG图,可使用gulp-svg-symbols工具自动生成svg sprites图。

1.直接将SVG的代码添加在html中:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
<path fill="#000000" d="M16 9.226l-8-6.21-8 6.21v-2.532l8-6.21 8 6.21zM14 9v6h-4v-4h-4v4h-4v-6l6-4.5z"></path>
</svg>

此时SVG图像会直接在页面上显示。

2.SVG Sprites

SVG属性中, 可以利用(symbol)来定义一个图形模板对象, 并利用(use)将其实例化.只有symbol元素的实例(亦即,一个引用了symbol的 元素)才能呈现。

<svg>
<symbol id="001-home" viewBox="0 0 16 16">
<path fill="#000000" d="M16 9.226l-8-6.21-8 6.21v-2.532l8-6.21 8 6.21zM14 9v6h-4v-4h-4v4h-4v-6l6-4.5z"/>
</symbol>
<symbol id="002-home2" viewBox="0 0 16 16">
<path fill="#000000" d="M8 0.5l-8 8 1.5 1.5 1.5-1.5v6.5h4v-3h2v3h4v-6.5l1.5 1.5 1.5-1.5-8-8zM8 7c-0.552 0-1-0.448-1-1s0.448-1 1-1c0.552 0 1 0.448 1 1s-0.448 1-1 1z"/>
</symbol>
<symbol id="003-home3" viewBox="0 0 16 16">
<path fill="#000000" d="M16 9.5l-3-3v-4.5h-2v2.5l-3-3-8 8v0.5h2v5h5v-3h2v3h5v-5h2z"/>
</symbol>
</svg> <svg><use xlink:href="#001-home"/></svg>
<svg><use xlink:href="#002-home2"/></svg>

自动化合并

1.全局,本地安装gulp

npm install -g gulp
npm install gulp gulp-cli --save

2.本地安装gulp-svg-symbols

npm install gulp-svg-symbols --save

3.在目录下新建gulpfile.js,定义构建任务

var gulp = require('gulp');
var svgSymbols = require('gulp-svg-symbols'); gulp.task('svgsprites',function () {
return gulp.src('./src/svg/*.svg')
.pipe(svgSymbols())
.pipe(gulp.dest('./src/svgsprites'))
});

4.开始构建

gulp svgsprites

git地址:

https://github.com/rainnaZR/svgsprites.git

使用gulp工具生成svgsprites的更多相关文章

  1. mybatis代码生成(generator工具生成代码)

    generator工具生成代码 下载地址     http://pan.baidu.com/s/1bY8C0I

  2. 使用linux perf工具生成java程序火焰图

    pre.cjk { font-family: "Nimbus Mono L", monospace } p { margin-bottom: 0.1in; line-height: ...

  3. C# 利用VS自带的WSDL工具生成WebService服务类

    C# 利用VS自带的WSDL工具生成WebService服务类   WebService有两种使用方式,一种是直接通过添加服务引用,另一种则是通过WSDL生成. 添加服务引用大家基本都用过,这里就不讲 ...

  4. 使用autogen工具生成Makefile遇到问题解决思路

    使用autogen工具生成Makefile,最新的应用程序很多都使用autogen,本着知行合一的精神 最近有空也研究了一下该工具的使用,详细步骤请参考文档: http://blog.csdn.net ...

  5. 使用web3j工具生成java版本的智能合约

    这里需要使用的环境 web3j,nodejs 安装编译sol工具 $ npm install -g solc 保存为hello.sol文件到本地 pragma solidity 0.4.19; con ...

  6. tomcat配置https–采用JDK自带的keytool工具生成证书

    转自:http://blog.csdn.net/huangxinyu_it/article/details/41693633 有关http与https的区别请看<浅谈http与https的区别( ...

  7. 根据wsdl,axis2工具生成客户端代码

    根据wsdl,axis2工具生成客户端代码 步骤: 1,下载axis2版本http://axis.apache.org/axis2/java/core/download.html 2,下载完成后解压, ...

  8. 根据wsdl,apache cxf的wsdl2java工具生成客户端、服务端代码

    根据wsdl,apache cxf的wsdl2java工具生成客户端.服务端代码 apache cxf的wsdl2java工具的简单使用: 使用步骤如下: 一.下载apache cxf的包,如apac ...

  9. 如何使用OpenSSL工具生成根证书与应用证书

    如何使用OpenSSL工具生成根证书与应用证书 一.步骤简记 // 生成顶级CA的公钥证书和私钥文件,有效期10年(RSA 1024bits,默认) openssl req -new -x509 -d ...

随机推荐

  1. Unity插件之Unity调用C#编译的DLL

    Unity插件分为两种:托管插件(Managed Plugins)和本地插件(Native Plugins).本文先来说说Unity中的托管插件,本地插件的文章留到下一篇文章再说. 有时候我们会有这样 ...

  2. Android Studio配置OpenCV(非NDK)

    参考:http://www.cnblogs.com/tail/p/4618476.html 工具: 1,Android Studio(AS)1.4 2,Opencv 2.4.11 步骤: 1,解压下载 ...

  3. mysql中You can't specify target table for update in FROM clause错误

    原SQL delete from DEP_SYSTEM_PORTLET_SETTINGS where ID in ( select ID from DEP_SYSTEM_PORTLET_SETTING ...

  4. 二十、Android -- SDcard文件读取和保存

    背景                                                                                            一些东西可以 ...

  5. POJ_3143 验证“歌德巴赫猜想”

    今天晚上的火车回家啦.所以提前更出来~.愉快的收拾我的包裹~滚回家吃半个月~胖几斤又要回学校啦~ T T这个假期虽然很忙.但是我觉得很有意义.很有价值~爱你们~ 描述 验证“歌德巴赫猜想”,即:任意一 ...

  6. 基于AFNetworking3.0的网络封装

    1.创建名为HTTPMethod(自己随便起名字)的头文件 2.导入AFNetworking头文件(在github上下载最新版): #import "AFNetworking.h" ...

  7. hash表、hash算法

    概念: 散列表(Hash table.也叫哈希表),是依据关键码值(Key value)而直接进行訪问的数据结构. 也就是说,它通过把关键码值映射到表中一个位置来訪问记录,以加快查找的速度.这个映射函 ...

  8. win10无法新建文件夹怎么办 win10右键新建菜单设置方法

    有朋友安装了win10系统后发现右键菜单中没有新建项,而平时使用新建 - 文件夹项的机率很高.如何才能恢复桌面右键菜单中的新建项呢? 右键点击桌面空白处,在右键菜单中发现没有新建项: 桌面右键菜单没有 ...

  9. WPF 故事版例子

    Storyboard std = new Storyboard(); DoubleAnimation a = new DoubleAnimation(); a.From =0; a.To =400; ...

  10. ---perl 模块安装方法

    http://blog.csdn.net/lincy100/article/details/7333794 $ perl -MCPAN -e shell install Log::Log4perlin ...