SVG 转 Base64

把小的 SVG 图标内联为数据 URI，可以省去一次 HTTP 请求，让样式表或组件自成一体。本工具把 SVG 文件或粘贴的 SVG 代码转换为两种数据 URI：保持标记可读、通常更小的 URL 编码，以及 Base64，并提供可直接粘贴的 CSS background-image 和 HTML img 代码片段及各自的大小。它会检查代码确实是 SVG，并补上缺失的 xmlns，没有它数据 URI 就无法显示。

使用方法

1. 拖入 .svg 文件或粘贴 SVG 代码。
2. 保持“轻度精简”开启，以去掉 XML 声明、注释和多余空白。
3. 选择 CSS 和 HTML 代码片段所用的数据 URI 类型。
4. 复制您需要的结果；大小会显示哪一种更短。

计算公式

URL 编码：data:image/svg+xml, + SVG（当 SVG 中没有 ' 时把 " 改为 '），只对 %、#、<、>、{、}、&、"、\、^、`、|、控制字符和非 ASCII 字符做百分号编码（UTF-8）。Base64：data:image/svg+xml;base64, + UTF-8 字节的 Base64（每 3 字节对应 4 个字符）。

浏览器在带引号的 url("…") 或 src="…" 中接受未转义的空格、另一种引号、= 和 /，所以只对必须的字符做 URL 编码就能保持简短。# 必须始终转义（否则会开始一个片段标识），% 也是如此。精简会保留一个空格，所以 <text> 的内容不会被改动。

示例

那份 163 字节的测试 SVG 变成 URL 编码的数据 URI 时是 202 个字符（两个 # 变成 %23，七个 < 和 > 变成 %3C 或 %3E），而 Base64 数据 URI 是 246 个字符：4 × ⌈163 ÷ 3⌉ = 220 个 Base64 字符，再加 26 个字符的前缀。