方便前端使用的SVG雪碧图
更多代码详情:github.crmeb.net/u/LXT
简介
由于SVG自身的矢量性质,不管在什么情况下,图标都很清晰,可以适应不同尺寸大小和不同分辨率。不用担心模糊和锯齿。同时还能更改图标的填充颜色。
CSS雪碧图和SVG雪碧图
传统的CSS图标可以分为图片图标和字体图标。
图片图标是将所有的icon整合到一张图中,然后通过定位获取其中的某个图标。优点是管理简单,网络请求少。缺点是在高像素屏幕上图标和周边内容相比会显得比较模糊;大小固定;大多数样式无法修改,单个图标使用场景有限。
相对来说字体图标会好很多。字体图标的基本原理是将Icon定义为字体图像, 在CSS中用@font-face引入Icon Font自定义字体, 再利用font-family和字符码显示出指定的图标。
@font-face {
font-family: 'iconfont';
src: url(/res/icon2.ttf) format('truetype');
}
.icon2 {
font-family: 'iconfont';
}
字体图标的优点是可以修改图标的颜色和大小(font-size),网络请求少。缺点就是添加图标比较麻烦,图标放大后有可能带有锯齿。跟SVG图标相比,字体图标可以修改的样式属性也是很有限的。
相对于图片图标和字体图标,SVG图标可以保持清晰的无限伸缩、具有较多的样式可以动态更改。
SVG图标 SVG在HTML代码中是以SVG代码节点存在而不是一个图标链接的引用,这是它得以修改样式的前提。但它又不是在需要用到的地方直接将SVG代码添加上去,而是有固定的地方来管理所有的图标,只需定义每个图标的Id,在需要用到的地方直接通过Id来引用即可。这种使用方式使得图标在使用时不会被复杂的SVG代码影响到业务代码的可读性,同时最主要的是可以复用SVG图标和统一管理。
SVG可以做到这一点主要跟SVG中的两个子标签< symbol >、< use >相关。
symbol标签
在SVG雪碧图的使用中,< symbol >标签用于定义图标内容。
symbol元素是什么呢?
symbol元素用来定义一个图形模板对象,只是单单的定义不会渲染出来,定义后可以在自身所在的SVG中或者其他的SVG中通过< use >标签元素实例化图标,也就是通过< use >引用从而被渲染出来。symbol里面可以添加任意的SVG绘图元素,包括动画,但不包括< defs >,除了不显示外基本和SVG跟标签< svg >标签差不多,同样可以设置viewbox这些属性。
我们在定义图标时,每一个symbol代表一个图标。除了不显示外,整个< symbol >就是一个完成的SVG图标。
<svg>
<symbol id="svg-test" viewBox="0 0 26 26">
<desc>居中对齐</desc>
<path d="M7,9h12c0.5,0,1-0.5,1-1s-0.5-1-1-1H7C6.5,7,6,7.5,6,8S6.5,9,7,9z"/>
<path d="M19,17H7c-0.5,0-1,0.5-1,1s0.5,1,1,1h12c0.5,0,1-0.5,1-1S19.5,17,19,17z"/>
<path d="M10,12c-0.5,0-1,0.5-1,1s0.5,1,1,1h6c0.5,0,1-0.5,1-1s-0.5-1-1-1H10z"/>
</symbol>
<symbol id="svg-tool-stroke-5" viewBox="0 0 30 16" >
<desc>描边5</desc>
<rect x="-10" y="6" width="7" height="2"/>
<rect x="-1" y="6" width="2" height="2"/>
<rect x="3" y="6" width="7" height="2"/>
<rect x="12" y="6" width="2" height="2"/>
<rect x="16" y="6" width="7" height="2"/>
<rect x="25" y="6" width="2" height="2"/>
<rect x="29" y="6" width="7" height="2"/>
<rect x="38" y="6" width="2" height="2"/>
</symbol>
</svg>
需要留意的是,里面无法定义< defs >的,所以如果设计纹理或者渐变之类的图标样式,需要在< symbol >所在的SVG之前,再用一个SVG来定义这些填充内容。然后再引用到< symbol >中。
<svg id="defs-svg">
<linearGradient id="linear-gradient" x1="0.122" y1="0.147" x2="0.902" y2="0.872" gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#f4d039"/>
<stop offset="1" stop-color="#f73"/>
</linearGradient>
</svg>
<svg id="sym-svg">
<symbol id="svg-tool-rect" viewBox="0 0 30 16" >
<desc>矩形</desc>
<rect x="0" y="0" width="24" height="14" fill="url(#linear-gradient)"/>
</symbol>
</svg>
SVG图标的定义一定要在使用前面,也就是< symbol >
标签一定要在< use >标签前面,一般我们在文档流的头部引入图标的定义,确保整个文档流任意地方都可以用到我们定义的图标。同时将图标处理成不可见。#defs-svg 这个SVG在文档流中是不能被隐藏的,隐藏后那些渐变滤镜等效果就无法使用,所以一般设置宽高为0,层级最低。而#sym-svg可以被隐藏,隐藏后不会印象图标的使用。
use标签
< use >标签是一个引用的标签,可以通过节点id引用定义在< defs >中的元素,也可以引用< symbol >标签。
use标签有两个作用:
1、可重复调用
2、跨SVG调用
<svg>
<defs>
<g id="shape">
<rect x="0" y="0" width="50" height="50" />
<circle cx="0" cy="0" r="50" />
</g>
</defs>
<use xlink:href="#shape" x="50" y="50" />
<use xlink:href="#shape" x="200" y="50" />
</svg>
<svg width="500" height="110"><use xlink:href="#shape" x="50" y="50" /></svg>
<!-- 直接调用上一节定义好的symbol -->
<svg width="500" height="110"><use xlink:href="#svg-tool-rect" x="50" y="100" /></svg>
< use >是SVG图标使用原理中的一个关键点,我们可以把SVG图标全部定义在一个SVG中,统一处理。在需要使用的地方再重新创建一个SVG,通过use标签来调用图标。
这样做的好处是可以降低图标代码的重复使用、减少图标代码对业务代码的影响。
更改SVG图标的样式
我们通过< use >标签添加到svg中图标,可以更改SVG的一些样式,如fill,stroke等,然后通过样式继承,将属性值继承到子元素中,从而起到更改图标样式的作用。
要更改填充色,首先在symbol下定义的图标自身标签上不能带有颜色,然后在使用时我们直接改SVG的fill,这个fill的颜色值会继承到里面去。如果我们在symbol里面已经定义好了颜色的是无法在使用时更改的。
<svg>
<symbol id="svg-test" viewBox="0 0 26 26">
<desc>居中对齐</desc>
<path d="M7,9h12c0.5,0,1-0.5,1-1s-0.5-1-1-1H7C6.5,7,6,7.5,6,8S6.5,9,7,9z"/>
<path d="M19,17H7c-0.5,0-1,0.5-1,1s0.5,1,1,1h12c0.5,0,1-0.5,1-1S19.5,17,19,17z"/>
<path d="M10,12c-0.5,0-1,0.5-1,1s0.5,1,1,1h6c0.5,0,1-0.5,1-1s-0.5-1-1-1H10z"/>
</symbol>
</svg>
<svg fill="red">
<use xlink:href="#svg-test"/>
</svg>
<svg fill="blue">
<use xlink:href="#svg-test"/>
</svg>
如何更改图标中的多个颜色
根据上面描述知道,如果按照上面的方式,那能够更改的只有图标中的一种颜色。当然是可以设置多个颜色。这里使用到css的自定义属性 CSS Custom Properties
需要对< symbol >里面的图标代码进行更改,将图形的颜色设置为fill: var(–*[, default])的形式。
<symbol id="icon-flag" width="150" height="100" viewBox="0 0 3 2">
<rect width="1" height="2" x="0" style="fill: var(--color0, #008d46)" />
<rect width="1" height="2" x="1" style="fill: var(--color1, #fff)"/>
<rect width="1" height="2" x="2" style="fill: var(--color2, #d2232c)"/>
</symbol>
定义css样式
.flag-belgium {
--color0: #201b18;
--color1: #f1ee3d;
--color2: #dc352f;
}
<svg class="icon">
<use xlink:href="#icon-flag"/>
</svg>
<svg class="icon flag-belgium">
<use xlink:href="#icon-flag"/>
</svg>
< symbol >中的标签在获取填充色时,会先获取–color的颜色,如果颜色值不存在则获取默认色值。
这就是如何在SVG雪碧图的制作原理,主要包含两步,一步是使用定义图标模板、一步是利用添加图标。使用SVG图标最麻烦的就是在定义图标这一块,设计师一般只提供SVG图标,不会提供< symbol >代码,需要你手动去求改SVG代码,这一步比直接使用位图图标麻烦得多。当然如果有条件的话,也可以写一个脚本去自动将设计师给你的SVG图片转换成< symbol >代码。这样就省心多了。
webpack合并svg小文件,转为雪碧图
var SVGSprites = require('svg-sprite-plugin')
new SVGSprites({
src: '../../static/vast/',
log: 'info',
sprites_conf: {
'icons': {
shape: {
id: {
separator: '-'
}
},
mode: {
css: {
dest: config.staticPath + 'vast/css/',
layout: "diagonal",
sprite: 'sprite.svg',
bust: false,
render: {
css: true
}
}
}
}
}
})
方便前端使用的SVG雪碧图的更多相关文章
- 前端优化:css雪碧图实践应用详解
一 为什么需要使用雪碧图 二CSS雪碧图原理及应用 前端是接近用户体验的一个项目组成部分,合适的优化能够大大减少网页响应时间,合理的资源加载自然成为了工作中的要务,现在就结合实例讲解到底什么是css雪 ...
- 前端工程师技能之photoshop巧用系列第五篇——雪碧图
× 目录 [1]定义 [2]应用场景 [3]合并[4]实现[5]维护 前面的话 前面已经介绍过,描述性图片最终要合并为雪碧图.本文是photoshop巧用系列第五篇——雪碧图 定义 css雪碧图(sp ...
- 前端-如何用gulp快速搭建项目(sass预编译,代码压缩,css前缀,浏览器自动刷新,雪碧图合成)
一:gulp优点: 易于使用 通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理: 插件高质 Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作. 构建快速 利用 Node ...
- web前端sprite,精灵图,雪碧图
css sprite 俗称:精灵图,雪碧图,指将整个页面不同的图片or图标合并在一张图上:优点:使用CSS Sprite 可以减少网络请求,提高网页加载性能,不会出现网页上端加载完毕下面还在加载中这一 ...
- css雪碧图(精灵图)与字体图标的介绍以及对比
css雪碧图(精灵图)与字体图标的介绍以及对比 设想一个实际场景:在一个页面为了展示,我们放置了很多独立的小图片,浏览器在显示页面的时候,就需要向服务器就会发送很多请求,来获取并加载这些小图片,但是这 ...
- 图标字体 VS 雪碧图——图标字体应用实践
本文介绍使用图标字体和SVG取代雪碧图的方法.雪碧图是很多网站经常用到的一种技术,但是它有缺点:高清屏会模糊.无法动态变化如hover时候反色.而使用图标字体可以完美解决上述问题,同时具备兼容性好,生 ...
- CSS3与页面布局学习笔记(五)——Web Font与CSS Sprites(又称CSS精灵、雪碧图)技术
一.web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体.先了解操作系统中的字体: a).安装好操作系统后,会默认安装一些字体,这些字体文件描 ...
- css 雪碧图的制作
很多网站其实都用了雪碧图,确实方便了制作,以前以为这种小图标,都是一个一个图片呢(笑) 效果图如下: 代码如下: <html> <head lang="en"&g ...
- 使用Compass制作雪碧图
遇见好的文章,笔者也会转载.但是正所谓好记性不如烂笔头,单纯的拿来主义也不如自己的亲自实践.所以每次需要转载的文章,我都会自己敲一遍,中间加入一些自己的思考. 这篇文章转载自:http://www.h ...
随机推荐
- 对snapshot isolation和write-snapshot isolation的一些思考
数据库中存在读异常和写异常. 所谓snapshot,目的在于保证事务执行的各个阶段,读相同的数据项得到的结果没有变化,这样一来就避免了不可重复读.幻读等读数据异常. 但是仅仅是读数据不变还不够,因为这 ...
- Alpha2
队名:福大帮 组长博客链接:https://www.cnblogs.com/mhq-mhq/p/11885037.html 作业博客 :https://edu.cnblogs.com/campus/f ...
- 如何在CentOS上升级php5.4至5.6?
如何在CentOS上升级php5.4至5.6? 2017-01-10技术运维PHPApacheCentOSLinux 由于CentOS的默认的php安装源版本都是5.4以下的,如果你的项目对php版本 ...
- MySQL实现按天分组统计,提供完整日期列表,无数据自动补0
业务需求最近要在系统中加个统计功能,要求是按指定日期范围里按天分组统计数据量,并且要能够查看该时间段内每天的数据量. 解决思路直接按数据表日期字段group by统计,发现如果某天没数据,该日期是不出 ...
- ISO/IEC 9899:2011 前言
前言 1.ISO(国际标准组织)与IEC(国际电工技术委员会)为全世界标准形成了专门的系统.作为ISO或IEC成员的国家机构,通过由各自组织所建立的技术委员会来加入国际标准的开发,以处理特定领域的技术 ...
- (转)Python3的四舍五入round()函数坑爹?不,更科学!
原文:https://blog.csdn.net/lly1122334/article/details/80596026 Python3的四舍五入round()函数坑爹?不,更科学!Python2中, ...
- docker卷挂载与容器内外互相拷贝数据
一.宿主机与容器的挂载 docker可以支持把一个宿主机上的目录挂载到镜像里.命令如下: docker run -it -v /mydownload:/download nginx:v1 /bin/b ...
- docker 删除含有指定字符的container
docker container ls -a|grep 指定字符 | awk '{print $1}'| xargs -I{} docker rm {}
- [LeetCode] 235. Lowest Common Ancestor of a Binary Search Tree 二叉搜索树的最近公共祖先
Given a binary search tree (BST), find the lowest common ancestor (LCA) of two given nodes in the BS ...
- mysql查询之部门工资最高的员工
最近发现一个网站 力扣 查看 上面有很多算法和数据库的题目,做了一下,发现自己平时都疏忽了,因此边做边记录下来 Employee 表包含所有员工信息,每个员工有其对应的 Id, salary 和 de ...