SVG 转 Base64 编码

SVG 转 Base64 是将 SVG（可缩放矢量图形）的 XML 代码通过 Base64 算法编码成一串纯文本字符。将编码后的字符串以 data:image/svg+xml;base64,... 的格式直接嵌入 CSS 的 background-image 属性中，可以减少额外的 HTTP 请求，图标或图案随 CSS 文件一起加载，提升页面渲染速度。特别适合小图标、装饰性纹理和 UI 元素的场景。

是的，Base64 编码后的体积大约比原始 SVG 增大 33% 左右。但可以通过以下方式优化：① 在编码前压缩 SVG（移除注释、多余空白、冗余属性）；② 使用 SVG 优化工具（如 SVGO）精简路径数据；③ 对于简单图形，编码后的增量绝对值很小（通常仅几十到几百字节），内嵌带来的请求数减少收益远大于体积增量；④ 配合 Gzip/Brotli 压缩，Base64 字符串的压缩效率很高。

标准语法为：
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0i...");
其中 PHN2ZyB4bWxucz0i... 就是 SVG 的 Base64 编码字符串。Data URI 由三部分组成：MIME 类型（image/svg+xml）、编码声明（base64）和编码数据。本工具会自动拼接完整代码，直接复制即可使用。

内嵌 Base64：✅ 减少 HTTP 请求，✅ 随 CSS 缓存，✅ 避免路径问题，✅ 适合小图标（<2KB）；❌ 体积增大约 33%，❌ CSS 文件变大，❌ 不便于独立更新图标。
外部 SVG 文件：✅ 浏览器可独立缓存，✅ 便于维护替换，✅ 适合大图或频繁变动的资源；❌ 额外 HTTP 请求（HTTP/2 下影响较小），❌ 需要管理文件路径。
建议：小于 1-2KB 的装饰性 SVG 内嵌；较大或需要动态替换的 SVG 使用外部引用。

本工具提供了颜色替换功能，勾选后可以将 SVG 中的填充色（fill）统一替换为您选择的颜色。需要注意的是，一旦 SVG 以 Base64 格式嵌入 CSS，就无法通过 CSS 变量或外部样式修改其内部颜色了。如果需要动态变色，可以考虑：① 使用 CSS mask-image 配合 background-color（将 SVG 作为遮罩）；② 使用 filter 属性调整颜色；③ 准备多个颜色版本的 Base64 编码。

是的，所有现代浏览器（Chrome、Firefox、Safari、Edge）以及 IE9+ 都完美支持 data:image/svg+xml;base64 格式的 Data URI。SVG 作为背景图时表现一致。需要注意：① 确保 SVG 代码本身是有效的（标签闭合、命名空间正确）；② 某些特殊字符在编码前需正确处理（本工具使用 TextEncoder 确保 Unicode 安全）；③ 部分老旧移动浏览器对大型 Base64 背景支持有限，建议控制编码后大小在 10KB 以内。

一个实用的判断标准：原始 SVG 小于 1.5KB 且不会频繁修改 → 适合 Base64 内嵌；大于 2KB 或需要动态更新 → 适合外部引用。另外，如果在同一页面中多次使用同一个 SVG 背景，外部引用 + 浏览器缓存会更高效（因为只加载一次），而 Base64 内嵌会在 CSS 中重复出现。本工具会实时显示编码前后的大小对比，帮助您做出判断。