SVG 转 Base64

如何把 SVG 转成 Base64

1. 把 .svg 文件拖到框里，或者用文件选择器选择它。
2. 输出为 默认是 CSS background-image。如果需要其他形式，可切换为 Data URI、HTML <img>、Markdown 或 纯 Base64。
3. 点击 复制输出，把规则粘贴到样式表中。

SVG 会按保存时的原样编码。这里没有缩放或质量选项，因为矢量图不需要。如果想要更短的字符串，先用 SVG 优化工具处理一下文件；去掉编辑器元数据省下的空间，往往比选择哪种编码更多。

Base64 还是 URL 编码的 SVG

SVG 是文本，所以根本不必用 Base64。只要对少数字符做百分号编码，data URI 就能直接携带代码。下面是同一个 104 字节的三角形图标的两种写法：

/* Base64: 140 characters of data */
.a { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEyIDIgMiAyMmgyMHoiIGZpbGw9IiNmOTAiLz48L3N2Zz4="); }

/* URL-encoded: 118 characters of data */
.b { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 2 22h20z' fill='%23f90'/%3E%3C/svg%3E"); }

URL 编码的版本更短，gzip 之后差距更大：上面两条规则分别压缩到 200 和 162 字节。在一个样式表中放 20 个小图标时，Base64 版本是 4,421 字节（gzip 后 801），URL 编码版本是 3,720 字节（gzip 后 615）。重复的代码压缩效果好，而 Base64 打乱了这种重复。

Base64 不需要任何转义规则，在任何接受 URL 的上下文中都不会出问题，也是许多 API 和构建工具所期望的格式。URL 编码的形式，如果忘记转义 #（它会开始一个 URL 片段），或者引号样式与外层的 url("...") 冲突，就会出错。SVG 转 Data URI 会生成两种版本并显示大小。

SVG data URI 的要求

• MIME 类型 image/svg+xml。 即使类型写错，浏览器也会嗅探 PNG 和 JPEG 数据，但 SVG 不会。用其他任何类型，图片都无法渲染。
• xmlns 属性。 HTML 中的内联 <svg> 没有它也能工作，但作为图片时，根元素必须声明 xmlns="http://www.w3.org/2000/svg"。很多手写的图标缺少它，于是悄无声息地失败。
• 格式正确的 XML。 一个未闭合的标签或未转义的 & 会让整张图片失败，不会部分渲染。

SVG 的 Base64 通常以 PHN2Zy（<svg）或 PD94bWwg（<?xml ）开头。开头是其他内容（比如注释或字节顺序标记）对浏览器没有影响，但会让人更难通过前缀识别格式。

样式和颜色

用作 background-image 或放在 <img> 中的 SVG 是一个独立的文档。页面的 CSS 无法作用到它内部，所以悬停颜色和 currentColor 都不起作用。两种常见的变通办法：

• 把 data URI 用作遮罩，再用 background-color 上色：

.icon {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  mask: url("data:image/svg+xml;base64,PHN2Zy...") center / contain no-repeat;
}

• 当图标需要随状态或主题变化时，把 <svg> 代码内联到 HTML 中。

解码和修复

Base64 转 SVG 可以把 Base64 字符串还原为可读、可编辑的代码。如果 SVG 在编辑器中能渲染、作为 data URI 却不行，先在那里解码，检查根元素上有没有 xmlns。

常见问题