网站 SVG 图标的处理思路

分享一个在网站页面编辑过程中比较小的细节点。

一般我们为了页面好看一点，会在一些 CTA 按钮、引导文案上加上一些图标来引导用户操作。

比如最常见的询盘表单上，我一般习惯在提交按钮上加个小飞机的图标，来明确告诉用户填完信息之后可以点击提交按钮。

这类小图标的添加其实非常简单，像 Elementor 这样的页面便捷器，自己本身就已经带了图标库，那我们需要添加图标时，直接从现成的图标库里选择心仪的图标便可以。

但是我最近被朋友问到一个小问题，具体情况是：

他在页面的顶部加了一个促销的宣传信息，然后在文案的左侧加了一个闹钟图标，看起来一切都很完美。

但是当他在无痕浏览器上浏览页面效果时，发现一个比较奇怪的点，就是在页面刚刚加载的时候，会发现在页面顶部的这个小图标会变得非常大，占据了整个屏幕。

大约过了半秒之后，一切才恢复正常，所以他就比较好奇到底是什么原因导致了这个问题。

其实这种情况就是比较典型的布局跳动了，如果有技术基础的话基本就能知道这是因为在页面加载初期，Elemenor 编辑器的样式代码还未完全生效，就导致了那个闹钟 SVG 图标被原样显示了。

也是为什么半秒之后，页面显示恢复正常了，究其原因就是因为半秒内编辑器的样式代码生效了。

所以怎么完善这个点呢。

最简单的方案，如果你的网站没有非常强的细节要求，直接放置不管就好了，毕竟不是技术问题不影响网站整体的功能呈现。

如果你觉得这个问题必须要完善，那干脆换个思路，自己编辑一个 SVG 图标放到这个顶部宣传栏里。

像上面这个网站，里面就有非常丰富的图标数据。

选择一个自己喜欢的点击进去自定义编辑一下，主要就是修改下图标的长宽尺寸（一般这类图标用最小尺寸便可以）。

初步编辑完成之后，将图标下载到本机上，用这个自己编辑的图标去替换掉顶部宣传栏里的那个闹钟图标就好。

因为我们自己编辑好的图标，一般长款是 15 像素，那上传到网站后基本不会占据太大的布局。

即便在页面加载初期，编辑器的样式代码不生效的情况下，这个图标的呈现大小依旧还是 15 像素，基本不会发生布局跳动这种情况。

于是那个小细节便完美解决了。