不要把 svg 转成 base64

2023-07-21 00:16| 来源: 网络整理| 查看: 265

不是什么新知识，一个小技巧而已。

今天遇到一个项目中使用纯色图标的问题，用字体麻烦用图片low，所以就想直接用svg，毕竟只有一两个图标。

第一想法是用 DataURI，然后想到了之前 CSS-tricks 的文章，翻了下做下汇总：

不建议把 svg 转 base64 来用 base64 本身浏览器解码也会消耗一定的资源 svg 转 base64 后反而会变大解决方案：压缩 svg 文件，使用 SVGO 或者 SVGOMG 使用 DataURI 而不用 base64 ，DataURI 的用法是 data:[][;base64], base64 只是声明 data 使用 base64 编码而已，非必须（via RFC 2397）可以直接把 svg 代码用作 data，前提是进行 URL-safe 编码，可以通过 codepen.io/jakob-e/pen… 来完成这个倒也不难。

比如，前端观察的 logo 的 svg，sketch 导出后有 702 byte，svgo 压缩后是 292 byte，base64 转码后是 937 byte。

最后代码如下：

background-image: url("data:image/svg+xml,%3Csvg width='288' height='288' viewBox='0 0 288 288' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3Eqianduan logo%3C/title%3E%3Cpath d='M222 144v-6l-41-23v12l30.304 17L181 161v12l41-23v-6zm-144.304 0L108 127v-12l-41 23v12l41 23v-12l-30.304-17z' fill='%2318BC9C'/%3E%3C/svg%3E"); 复制代码参考 css-tricks.com/probably-do… codepen.io/tigt/post/o…

【本文地址】

公司简介

联系我们