使用gulp工具生成svgsprites
简介
SVG即可缩放矢量图形 (Scalable Vector Graphics)的简称, 是一种用来描述二维矢量图形的XML标记语言. SVG图形不依赖于分辨率, 因此图形不会因为放大而显示出明显的锯齿边缘.使用svg格式我们可以直接用代码来描绘图像,可以用任何文字处理工具打开svg图像,通过改变部分代码来使图像具有交互功能,并可以随时插入到HTML中通过浏览器来浏览。
优点:
- 缩放无损还原
- 可设置颜色,大小,使用较灵活
- 可利用CSS实现动画
- 减少HTTP请求
缺点:
- SVG在绘制的性能上比PNG要差
- 复杂的图形或渐变可能显示不全
- 兼容性稍差
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的更多相关文章
- mybatis代码生成(generator工具生成代码)
generator工具生成代码 下载地址 http://pan.baidu.com/s/1bY8C0I
- 使用linux perf工具生成java程序火焰图
pre.cjk { font-family: "Nimbus Mono L", monospace } p { margin-bottom: 0.1in; line-height: ...
- C# 利用VS自带的WSDL工具生成WebService服务类
C# 利用VS自带的WSDL工具生成WebService服务类 WebService有两种使用方式,一种是直接通过添加服务引用,另一种则是通过WSDL生成. 添加服务引用大家基本都用过,这里就不讲 ...
- 使用autogen工具生成Makefile遇到问题解决思路
使用autogen工具生成Makefile,最新的应用程序很多都使用autogen,本着知行合一的精神 最近有空也研究了一下该工具的使用,详细步骤请参考文档: http://blog.csdn.net ...
- 使用web3j工具生成java版本的智能合约
这里需要使用的环境 web3j,nodejs 安装编译sol工具 $ npm install -g solc 保存为hello.sol文件到本地 pragma solidity 0.4.19; con ...
- tomcat配置https–采用JDK自带的keytool工具生成证书
转自:http://blog.csdn.net/huangxinyu_it/article/details/41693633 有关http与https的区别请看<浅谈http与https的区别( ...
- 根据wsdl,axis2工具生成客户端代码
根据wsdl,axis2工具生成客户端代码 步骤: 1,下载axis2版本http://axis.apache.org/axis2/java/core/download.html 2,下载完成后解压, ...
- 根据wsdl,apache cxf的wsdl2java工具生成客户端、服务端代码
根据wsdl,apache cxf的wsdl2java工具生成客户端.服务端代码 apache cxf的wsdl2java工具的简单使用: 使用步骤如下: 一.下载apache cxf的包,如apac ...
- 如何使用OpenSSL工具生成根证书与应用证书
如何使用OpenSSL工具生成根证书与应用证书 一.步骤简记 // 生成顶级CA的公钥证书和私钥文件,有效期10年(RSA 1024bits,默认) openssl req -new -x509 -d ...
随机推荐
- 有问题得就分享(此实现不是 Windows 平台 FIPS 验证的加密算法的一部分)
今天呢,我写完了MD5加密算法的代码,可是我正高兴的想运行时,按了F5.突然了个这样的窗体 我当时就纳闷了,怎么回事? 代码又没有错,这是乍回事! 于是呢上网查了看看:可以这样解决的 在window中 ...
- 001.Getting Started -- 【入门指南】
Getting Started 入门指南 662 of 756 people found this helpful Meng.Net 自译 1. Install .NET Core 到官网安装 .NE ...
- hexo博客进阶-相册和独立域名
之前我已经写了一篇文章详细的讲述了如何使用hexo搭建github博客.如果还没有看的可以去看看,hexo搭建博客 其实,根据这篇文章的过程我们就能够搭建一个专属于自己,并且非常美观的博客了.但是如果 ...
- django基础篇
Python的WEB框架有Django.Tornado.Flask 等多种,Django相较与其他WEB框架其优势为:大而全,框架本身集成了ORM.模型绑定.模板引擎.缓存.Session等诸多功能. ...
- JavaScript区分click事件和mousedown(mouseup、mousemove)方法
在前端开发工作中,会遇到这样问题:针对同一个dom元素,即希望为它绑定click事件,又想该元素可以允许拖拽的效果.而使用拖拽的效果,我们一般就会用到mousedown,mousemove和mouse ...
- Angular+Grunt+Bower+Karma+Protractor (Atom)
1. 配置bower 1.安装bower npm install -g bower 2.创建.bowerrc文件 { "directory": "src/bower&qu ...
- Snort 安装 配置 - Archlinux
About Snort Snort是一套开放源代码(OpenSource and free)的网络入侵预防软件(NIPS)与网络入侵检测软件(NIDS).Snort使用了以侦测签名(signature ...
- 解决xcode8模拟器不能删除应用的问题
问题描述:想删除模拟器上的测试项目,但是长按之后主界面模糊一下,并没有出现小叉叉来删除. 原因:这是因为xcode8中模拟器自带Touch3D,我们控制不好触摸板的力度. 解决方法: 1. ...
- CGGeometry.h 文件详解
这些是在CGGeometry.h里的 CGPoint.CGSize.CGRect.CGRectEdge实际上都是结构体 struct CGPoint { CGFloat x; CGFloat y; } ...
- mysql数据库乱码解决方法之一
在前端页面向数据库中插入带中文字符的数据,到数据库时中文都变成了"?",其中jsp页面已经是设为utf-8编码的,建数据库时选择的编码也是utf-8; 1.解决的办法是在连接数据库 ...