使用gulp工具生成svgsprites

简介

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
时间: 2024-10-13 22:24:38

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

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

pre.cjk { font-family: "Nimbus Mono L", monospace } p { margin-bottom: 0.1in; line-height: 120% } a:link { } 重要参考文献:www.brendangregg.com/blog/2017-06-30/package-flame-graph.html Java FlameGraph(火焰图)能够非常直观的展示java程序的性能分析结果,方便发现程序热点和进一步调优.本文将展示如何使用

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

C# 利用VS自带的WSDL工具生成WebService服务类 wsdl /language:c# /n:空间名 /out:D:/类名 webService接口地址

javadoc 工具生成开发API文档

=====================先来一点成就感===================== 1 package com.springMybatis.dao; 2 3 import com.springMybatis.model.*; 4 5 6 /** 7 * AuthorizationDao 定义Authorization接口 8 * @author g.qu 9 * @see java.lang 10 */ 11 public interface AuthorizationDao{

java利用zxing开源工具生成二维码QRCode

原文:java利用zxing开源工具生成二维码QRCode 源代码下载地址:http://www.zuidaima.com/share/1550463727340544.htm

使用openssl工具生成证书

第一步. 生成rsa私钥文件 :\> openssl genrsa -out bexio.pem 1024 : 若要加密生成的rsa私钥文件(des3加密) :\> openssl genrsa -des3 -out bexio.pem 1024 第二步. 生成Certificate Signing Request(CSR - 证书请求文件) :\> openssl req -new -key bexio.pem -out bexio.csr -config openssl.cnf :

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

根据wsdl,axis2工具生成客户端代码 步骤: 1,下载axis2版本http://axis.apache.org/axis2/java/core/download.html 2,下载完成后解压,设置环境变量,加入AXIS2_HOME=<Axis2客户端安装目录>,path中追加;%AXIS2_HOME%\bin 3,打开命令行,进入bin目录下,执行命令: ${installdir}>WSDL2Java -uri http://192.168.52.80:8080/test/web

微信扫码支付功能(1)---通过谷歌二维码工具生成付款码

生成付款二维码 一.微信网站扫码支付介绍 1.扫码支付文档 微信开发官方文档:https://pay.weixin.qq.com/wiki/doc/api/native.php?chapter=6_5 有关微信支付的流程图微信官方已经说的很清楚了,这里也无需其它解释.这边采用微信支付扫码模式二(不依赖商户平台设置回调url),所以在生成二维码之前 要先调用微信统一下单支付接口,获得code_url,再通过谷歌二维码工具将code_url生成二维码图片. 2.名称理解 在微信扫码支付功能开发之前,

如何使用JumpTool工具生成的二维码实现自动跳转和下载功能

前言在使用微信打开别人分享的链接或二维码时经常不能直接直接跳转到目标页面也不能直接下载,而 是需要点击右上方竖着的"三点"图标,在弹出的菜单中选择浏览器打开,如图所示: 在引导用户打开链接或扫码下载apk时我们是不希望出现这些多余的步骤从而消耗用户耐心的,简 便快捷才能更好的提高用户体验感.对于这种情况,我这里分享两种解决方案. 解决方案:一:使用引导页遮罩层引导用户使用外部浏览器打开. 这种方法是加一个引导页遮罩层,给用户引导.虽说在一定程度上消除了用户的排斥感,但是并 没有减少多余

创建基于ASP.NET core 3.1 的RazorPagesMovie项目(二)-应用模型类配合基架生成工具生成Razor页面

本节中,将学习添加用于管理跨平台的SQLLite数据库中的电影的类Movie.从ASP.NET core 模板创建的应用使用SQLLite数据库. 应用模型类(Movie)配合Entity Framework core(简称EF core,这是一种对象关系映射框架(ORM),它可以简化数据访问)使用,以处理数据库 模型类称为POCO类,因为它们与EF Core 没有任何依赖关系.它定义了数据库中存储的数据属性. 一.添加数据模型“Movie” 1.右键单击“RazorPagesMovie”项目>