这是一个创建于 1090 天前的主题，其中的信息可能已经有所发展或是发生改变。
本人 UI 设计师，想问一下用 background-image 里直接引用一个 svg 图标的链接，和把 svg 图标放在 HTML 里渲染有什么区别？找了几个大厂的网页发现都是采用后者的模式。
 |
1
bnm965321 2021-12-24 16:52:06 +08:00
链接需要网络请求后才能渲染，可能会有一段背景是空白的时间
|
 |
2
yaphets666 2021-12-24 16:54:01 +08:00
其实设计师不用考虑这些问题.主要是程序上的问题.比如维护这个 url 的字符串.我不希望他出现在 css 里.而且用 bg 和用 svg 都得一个标签.没必要去用 bg
|
 |
3
MissSixty 2021-12-24 16:57:06 +08:00  1
第一种每个 svg 都会请求一个 url ，而第二种前端优化后会让所有 svg 只请求一次
|
 |
4
VictorFrank1 OP @bnm965321 刚确实发现了这个问题，图标 hover 时，确实会空白闪一下再变成 hover 状态。
|
|
5
VictorFrank1 OP @yaphets666 我感觉稍微了解一下才能更好的跟前端同学打交道，目前项目的图标到色号都比较混乱，想整体重构一下
@MissSixty 准备让前端同学用个 2 倍 png 切图了，好像 svg 不能很好的支持渐变色 |
 |
6
demo 2021-12-24 17:10:06 +08:00
设计师随便设计，前端是有解决方案的，比如用 svg-sprite-loader 直接全部挂到 DOM 里。
|
 |
7
superfatboy 2021-12-24 17:14:00 +08:00
@MissSixty 不过好多网站都采用内联的 svg 方式，无需额外的请求
|
 |
8
FFFFourwood 2021-12-24 17:42:59 +08:00
我个人的看法：
1 ，在写一些自适应页面时候，比如一个页面 一套代码， 兼容 小到 iphone5 大到 5k 8k 的超大屏，，直接写在 src 或者直接用<svg></svg>，可以很轻松的做到自适应调整图片的大小或者一些奇奇怪怪的动画 2 ，src 或者<svg> 直接写 后期好维护，直接替换就行了，，不至于还要改 css 文件 3 ，只有涉及到雪碧图之类的 用 background 方式 比较方便，一次加载，节省资源 |
 |
9
duduaba 2021-12-24 17:45:04 +08:00
网络慢就看出差异了，但是一般这个可以忽略，有的有技术规范，比如一定数量级减少 http 请求，跟设计没关系。
|
 |
10
renmu123 2021-12-24 18:12:00 +08:00 via Android
要不用 font ，好处多多
|
 |
11
thinkershare 2021-12-24 18:12:49 +08:00
HTTP2 后面应该就不需要考虑这些破事了, 反正链接可以多路复用, 现在为了加速加载实际, 会使用一些类似 css sprite 这样的技巧, 尽量在一个 HTTP 请求里面加载好资源, 可以节省服务器资源
|
|
12
VictorFrank1 OP @renmu123 用浏览器字体渲染 icon 吗
|
 |
13
kidonng 2021-12-24 20:11:25 +08:00
其实其他格式的图像也能 base64 后直接放 HTML 省请求，只是 SVG 比较适合这种用途罢了。
SVG 还有 <use> 这种专门用来复用的元素。 |
 |
14
old9 2021-12-24 21:13:46 +08:00
放在 HTML 里灵活很多，可以用 CSS 控制样式，也可以用 JS 控制内容
|
 |
15
nondanee 2021-12-24 23:13:27 +08:00
其实在 background-image 里用 svg 也可以是内联的，不一定需要网络请求
做一下 urlencode 就行，可以用这个转换 https://yoksel.github.io/url-encoder/ svg 内联在 html 的好处楼上大佬已经说的很多了，svg 放在 background-image 中也有些好处 1. 如果 svg 里定义了 id (比如用了渐变 /遮罩效果)，内联在 html 中 id 相同可能会有 bug ，在 background-image 中即使 id 相同也不会相互干扰 2. 垂直居中问题，如果上下间距和除不尽 2 ，那 html 中内联 svg 就很难居中，放在 background-image 里用 `background-position: center` 保证是居中的 |
 |
16
shenyuzhi 2021-12-25 11:55:50 +08:00
1 前者没有 dom ，性能好，更干净。后者有 dom ，有时候还很多。
2 前者无法用 css 进一步修改，后者可以用 css 进一步修改（主要是可以改颜色，别的没什么要改的）。 3 作为背景图片，前者定位很方便，center/cover/contain 就一两行 css 的事情。后者麻烦一点。 4 前者的缓存由浏览器控制，更方便。后者由开发者自己控制，没处理好可能会抖一下。 |
 |
17
lysS 2021-12-25 15:15:46 +08:00
@VictorFrank1 不只是闪一下的问题，新的 http 请求会加大服务器负担，而且如果是 https 的话，光证书的大小都有 1~2KB ，而且还要进行一系列协商啥的，至少 5 个 RTT 以上。所以小文件能放在一起就放在一起，包括 js,css 啥的
|
|
18
yaphets666 2021-12-26 22:36:12 +08:00
@VictorFrank1 看你们是什么项目了。偏向中后台或者 B 端的项目，其实没必要优化了，下次做好吧。哪怕调个颜色，前端调个颜色没你想的那么简单，有时候样式是被程序（ js ）控制的。
|
Select Language