SVG vs Image, SVG vs Iconfont
这可能是个别人写过很多次的话题,但貌似由于兼容性的原因?图标的显示还是用着 Iconfont
或者 CSS Sprite
的形式?
希望通过自己新瓶装旧酒的方式能重新引导一下问题。
SVG vs Image
比方说现在要做下图这样的视觉效果:
分析:可能需要三张图片
- 鼠标移入时的背景图
- 渐变色前景图
- 鼠标移入时白色前景图
独立图像
现在对比一下背景图使用图片与使用 SVG 格式的体积大小(做图的时候拿错颜色了,其他都一样,能说明道理就行,见谅见谅)
可以看出,在肉眼感觉差异不大的情况下,WebP
格式体积最小,其次是 SVG
,而 PNG
的体积过大。
这个 SVG
是在 Sketch
设计稿中导出来的,源码包含了很多冗余无效的代码,实际上是可以优化的,如下。
内部源码
优化后
优化后大约可以减去 1K
个字符。当然这个需要内联使用(Inline SVG)
CSS Sprite
使用 CSS Sprite
的方式可以减少 HTTP
请求,貌似还可以减少总体图片体积。
这里用前景图来对比一下,实际上背景图和前景图都可以合成一张 sprite
。
可以看出,CSS Sprite
的体积比 Inline SVG + CSS
的方式大很多。
SVG vs Image 结论
绿色部分表示 SVG
比 Image
略胜一筹的地方,黄色部分表示有所欠缺的地方,灰绿色表示差不多。
1、如今已接近 2019
年了,对于 IE9 (2011年)
这种古老的浏览器都支持 SVG
,所以再过多强调更低的兼容性也没有什么意思。
2、Inline SVG
在浏览器应该是被渲染成 DOM
节点,所以关于 DOM
节点的性能优化都有必要注意;一个 SVG
图像可能就会有很多路径,即 DOM
节点,太多的 DOM
节点必然会影响浏览器的渲染性能及内存占用,而纯位图的渲染方式应该是没有这方面的顾虑。(DOM
数量影响参考:Google WEB 开发者文档)
综上结论:
除开复杂图像,选择 Inline SVG
或者 <img/>
标签的方式引入 SVG
,会比使用 独立图像
或 组合图像 (CSS sprite)
的方式更好。
SVG vs Iconfont
书写对比
首先看下
Iconfont
与SVG
图标的使用方式,来源 阿里 Iconfont 平台
很明显 SVG Sprite
使用起来没有 Iconfont
方便,需要写 3
行代码, 而后者只需要写 1
行。
当然上面的不是重点,重点是下面的换色与多色支持
换色与多色支持
换色
1、Iconfont
通过 CSS color
可以轻松更换图标颜色。
2、而 SVG Sprite
比较麻烦,SVG Sprite
的代码原理如下。
// 定义 symbol
<svg>
<symbol id="icon-arrow-left" viewBox="0 0 1024 1024">
<path d="M694 ... 44.576-45.952"></path>
</symbol>
<symbol id="icon-arrow-right" viewBox="0 0 1024 1024">
<path d="M693 ... 0-0.48-46.4"></path>
</symbol>
</svg>
// 使用
<svg><use xlink:href="#icon-arrow-left"/></svg>
<svg><use xlink:href="#icon-arrow-right"/></svg>
渲染出来的 DOM
结构是这样的:
渲染在了 Shadow DOM
中(关于 Shadow DOM
的知识可以阅读下这篇文章或这篇),
这样的 DOM
元素样式就具有了作用域,外面的 CSS
对 shadow-root
内的元素不会生效,
如果想要更换元素的颜色,需要使用 /deep/
来穿透添加样式,如下。
svg /deep/ path {
fill: red;
}
当然,实际上在只需要在父级元素上添加 fill: red
这样的 CSS
也能起到同样的效果,里面的元素会继承父级的样式。
PS:
/deep/
是shadow DOM v0
的写法,v1
已经把这样的写法抛弃了,实际上支持v1
的shadow DOM
, 父级的样式可以直接作用在shadow-root
里面的元素。
多色支持
1、Iconfont
是不支持多色图标的。
2、而 SVG Sprite
可以利用 CSS
变量或 shadow DOM
的方式支持多色图标,shadow DOM
的方式上面已经说明,下面借用他人的文章解释 CSS
变量实现多色,如下。
不过使用 CSS
变量或 shadow DOM
的方式兼容性都不好,
CSS
变量:Edge15+shadow DOM
:更差。兼容性列表
3、Inline SVG
可以良好地支持多色及多色变化。
渐变色支持
Iconfont
与 SVG Sprite
不支持渐变色。Inline SVG
支持渐变色,并且兼容性良好。
渲染无抖动
使用 Iconfont
,因为字体文件是异步加载的,所以在字体文件还没有加载完毕之前,图标位会留空,加载完毕后才会显示出来,这个过程就会出现向下图(来自 GitHub blog)这样的抖动,而 SVG Sprite
或 Inline SVG
内联加载则不会出现这样的抖动。
当然,Iconfont
也可以内联加载,不过需要转换成 base64
同样式表一起加载,转换后的文件体积则会变为原来的 1.3
倍左右
这是由 base64
编码决定的(编码知识链接)。
字体转换成
base64
的一个在线工具:https://transfonter.org/
体积较大
这个是 SVG
对比于 Iconfont
的一个不足之处,如下图。
Inline SVG
与SVG Sprite
体积差不多。
开发成本
三者的开发成本都差不多,不过 SVG
的两种方式都需要前期做些配置,后期开发就会顺手很多(单页应用)。
以 vue + vue cli
为例说明 Inline SVG
便捷使用。
1、 配置 Webpack loader
:
{
// 排除需要转换成 Inline SVG 的目录
exclude: [resolve('src/svgicons')],
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 1,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
// 指定特定的目录用于 Inline SVG
include: [resolve('src/svgicons')],
test: /\.svg$/,
use: [
// 读取 SVG 源代码
{ loader: 'raw-loader' },
// 精简优化 SVG 源代码
{
loader: 'svgo-loader',
options: {
plugins: [
{ removeTitle: true },
{ removeViewBox: false },
{ removeDimensions: true },
// ...其他参数
]
}
}
]
}
2、 创建 SvgIcon.vue
组件:
<template>
<div class="svg-icon">
<div class="svg-icon-wrapper" v-html="icon"></div>
</div>
</template>
<script>
export default {
name: 'SvgIcon',
props: {
name: {
type: String,
required: true,
},
},
data () {
return {
icon: this.getIcon(),
}
},
watch: {
name () {
this.icon = this.getIcon()
},
},
methods: {
getIcon () {
return require(`@/svgicons/${this.name}.svg`)
},
},
}
</script>
<style lang="stylus" scoped>
.svg-icon {
overflow hidden
display inline-block
width 1em
height 1em
&-wrapper {
display flex
align-items center
>>> svg {
width 100%
height 100%
fill currentColor
}
}
}
</style>
3、使用:
<SvgIcon name="arrow-right" />
SVG vs Iconfont 结论
应该是 Inline SVG vs SVG Sprite vs Iconfont
的结论,如下图。
综上结论
选择 Inline SVG
或许是一个不错地选择去替代 Iconfont
的使用方式。
扩展阅读
- GitHub 网站很早之前已经将图标的展示方式由
Iconfont
转成了Inline SVG
, 这一篇文章是他们的描述:
https://blog.github.com/2016-... - 很早的一篇文章关于两者的对比:https://css-tricks.com/icon-f...
最后
欢迎各抒己见谈论一下对 SVG
和 Iconfont
的看法,优缺点,欢迎留言。
然后,本文同步发表于【凹凸实验室博客】或微信公众号,欢迎关注我们,么么哒。
SVG vs Image, SVG vs Iconfont的更多相关文章
- 【翻译svg教程 】svg 的坐标系统
http://tutorials.jenkov.com/svg/svg-coordinate-system.html svg的坐标系统(和大多数计算机绘图的坐标系统)和数学中绘图系统有点不一样 数学/ ...
- SVG Drawing Animation - SVG 绘制动画
一个小实验,探索 SVG 线图动画的使用情况,以前沿的展示形式呈现图形或网站元素的外观,模拟它们的加载.SVG 真的很强大,有许多创造性和可能性,使用 SVG 可以制作各种有趣的网站交互效果.今天这篇 ...
- SVG 学习<八> SVG的路径——path(2)贝塞尔曲线命令、光滑贝塞尔曲线命令
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
- SVG 学习<七> SVG的路径——path(1)直线命令、弧线命令
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
- SVG 学习<六> SVG的transform
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
- SVG 学习<五> SVG动画
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
- 使用在线编辑 svg 软件修改 svg 图片
网站需要使用图标字体,但设计师给的图标大小有问题,故使用下面说陈述方法简单修改了一下.使用到的在线编辑软件地址为:https://editor.method.ac/ 问题: 注:至于如何使用图标字体( ...
- 2. svg学习笔记-svg中的坐标系统和viewbox
我是通过<SVG精髓>这本书学习的svg,说实话,这本书写的不好,或者说翻译的不好,我没有看过这本书的原版,不知道原文写的怎么样,但是翻译出来的有些句子真的很拗口.以前老师给我们API文档 ...
- svg图标(svg实现的QQ图标)
与传统的图片相比,用svg实现的图标要更好控制. 比如.若要改变图标的颜色,如果用图片的话,就需要UI设计人员调整图片,而如果用svg的话,就不用那么麻烦,开发人员改样式就行了. 附一个svg实现的Q ...
随机推荐
- LeetCode-095-不同的二叉搜索树 II
不同的二叉搜索树 II 题目描述:给你一个整数 n ,请你生成并返回所有由 n 个节点组成且节点值从 1 到 n 互不相同的不同 二叉搜索树 .可以按 任意顺序 返回答案. 二叉搜索树(Binary ...
- pandas常用操作详解——info()与descirbe()
概述 df.info():主要介绍数据集各列的数据类型,是否为空值,内存占用情况: df.describe(): 主要介绍数据集各列的数据统计情况(最大值.最小值.标准偏差.分位数等等). df.in ...
- web自动化之selenium(六)利用坐标点定位
这是通过第三发库实现对元素的定位,因为在无法定位元素的时候,只能通过外部来定位,此时就可以使用pyautogui模块,操作鼠标,模拟人进行操作 # 使用注意事项,不要过于的依赖它 1.使用时需要在通过 ...
- vue中使用keepAlice的各种问题
项目需求:从项目列表页index,进入到列表的详情页detail,再从detail返回到index,需要缓存index的数据 在App.vue中的配置 <template> <div ...
- SQL基础语法_张三
1.1 建库表语法 1.2 字段数据类型 大致可以分为三类:数值.日期/时间和字符串 (字符)类型. 2. 增删查改 3. 关联查询 4. 子查询
- 对 Kubernetes 部署进行故障排除的视觉指南
链接:https://learnk8s.io/troubleshooting-deployments
- python+pytest接口自动化(10)-session会话保持
在接口测试的过程中,经常会遇到有些接口需要在登录的状态下才能请求,否则会提示请登录,那么怎样解决呢? 上一篇文章我们介绍了Cookie绕过登录,其实这就是保持登录状态的方法之一. 另外一种方式则是通过 ...
- 入门级的Makefile制作dynamic lib
代码文件结构: . ├── dynamiclib_add.c ├── dynamiclib_mul.c ├── dynamiclibs.h ├── libs └── Makefile 1 direct ...
- 从文件下载视角来理解Web API
一.问题源起 从Web From过来的人应该会比较熟悉以下下载文件的代码: [HttpPost] [Route("Download")] public void Download( ...
- overflow原理?
overflow: hidden能清除块内子元素的浮动影响. 因为该属性进行超出隐藏时需要计算盒子内所有元素的高度, 所以会隐式清除浮动 创建BFC条件(满足一个): float的值不为none: o ...