SVG 转 Base64 - 以及你为什么多半想要另一种

在我们实测的四个文件上是 36% 到 43%。一个 290 字节的图标变成了 414 字节的 base64 data URI；它的 URL 编码版本是 339 字节。base64 按设计每三个字节要用四个字符，所以这部分增长中有三分之一是结构性的，其余则来自 data URI 前缀。

因为只有少数几个字符需要转义。百分号编码为百分号、井号、尖括号和换行各付出三个字节，其余一切原样保留。而 base64 不管字节内容是什么，都按每个字节固定多付 33%。对文本来说，转义税远比这笔固定税小。

能，在所有在用的浏览器里都能。不带 base64 标记的 data URI 就是普通的百分号编码文本，它是两种形式中更老、支持也更好的那一种。真正非要 base64 不可的地方，只有那些预设了它的流水线，比如某些 CMS 字段和拒绝另一种形式的老旧构建插件。

为了不必转义它们。SVG 大部分内容都是属性，而把每个定界符编码成 %22 每次要多花两个字节。属性定界符改成单引号，CSS 值用双引号包裹，于是两者都不需要转义。本来就含有单引号的值会被原样保留并正常转义。

小而高频使用的图标就内联；更大的一律链接。内联省掉一次请求，但那些字节从此住在每一个用到该图标的页面或样式表里，无法单独缓存。这笔账在 4 KB 左右反转，这也是面板在那里提醒你的原因。

它只会拉大差距，而不是抹平差距。百分号编码的 SVG 仍然是可辨认的文本，带有重复的标签名和属性名，压缩器有大量素材可用。而 base64 的输出在压缩器眼里接近随机噪声，几乎压不动。

会，而且这在这里比在输出像素的转换器里更重要。脚本、on* 事件处理器、远程图片引用和外部样式表导入都会被移除，面板会列出它找到了什么。一旦内联粘贴，未经净化的 SVG 会把它包含的一切都跑起来。

作为 favicon 不行 - 浏览器在那里要的是一个真实 URL。在邮件里同样不行：所有主流客户端都完全屏蔽 SVG，无论是不是 data URI。data URI 是给你自己的网页和样式表用的。要用于邮件，请先把 SVG 转成 PNG，再附件发送或托管它。

因为它用了 currentColor。data URI 是一份独立的文档，无法继承引用它的那个元素的颜色，于是 currentColor 回退到了初始值。我们的 SVG 转 CSS 工具会检测这一点，并给你一段 mask-image 代码，用元素自身的文字颜色来绘制这个形状。

图个方便，还有 alt 属性。这段代码片段已经预先设好了 alt=""，这是装饰性图标的正确取值，也是人们最容易忘掉的一项 - 一张完全没有 alt 属性的图片，会被屏幕阅读器念成它的文件名，而对 data URI 来说那就是一大堵字符墙。

不会。这层编码只是在你浏览器里运行的几行算术，所以你的文件不会发送到服务器，不会被存储，我们也永远看不到它。这也意味着没有排队，除了你自己设备内存能容纳的量之外没有体积上限。