SVG 转 Base64 转换器
将 SVG 文件或原始 SVG 代码转换为 Base64——并获取可直接使用的 Data URI、HTML 嵌入代码、CSS background-image 或 JSON 载荷。含实时预览及 Base64 与 URL 编码输出的体积对比。
拖拽 SVG 到此处或 点击选择文件
仅支持 SVG 文件 · 最大 10 MB
上传 SVG 文件后显示 Base64 输出
如何将 SVG 转换为 Base64
上传或粘贴
将 SVG 文件拖放到上传区域，或切换到「粘贴 SVG 代码」直接粘贴原始 SVG 标记。两种方式输出结果完全一致。
选择输出格式
从 Data URI、HTML <img>、CSS background-image（同时展示 Base64 和 URL 编码两种形式）、Markdown、原始 Base64 或 JSON 中选择。
复制或下载
点击「复制」将结果发送到剪贴板。工具还会显示实时预览，以及 Base64 与 URL 编码输出的体积对比。
SVG Base64 与 URL 编码 SVG 对比
SVG 是少数情况下 URL 编码往往优于 Base64 的格式。
Base64 Data URI
data:image/svg+xml;base64,…
<img src="data:image/svg+xml;base64,PHN2Zy..." />
URL-encoded SVG
data:image/svg+xml,…
background: url("data:image/svg+xml,%3Csvg...");Base64 与 URL 编码——哪种更适合您的 SVG？
详细对比两种方式，包含体积基准测试和浏览器支持说明。
SVG Base64 输出格式
六种格式——均可直接粘贴到代码中。
包含 MIME 类型前缀的完整 URI——可在任何接受 URL 的地方使用。
data:image/svg+xml;base64,PHN2ZyB4bWxucz0i...
可直接粘贴的 <img> 标签，将 Base64 Data URI 作为 src，支持可选的 alt 文本。
<img src="data:image/svg+xml;base64,..." alt="icon" />
同时展示 Base64 和 URL 编码两种形式的 background-image 规则，便于对比。
.el { background-image: url("data:image/svg+xml;base64,..."); }适用于 GitHub README、Notion 等 Markdown 渲染器的内联图片语法。
仅编码字符串——适用于期望不带 URI 前缀的纯 Base64 数据的系统。
PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcv...
包含文件名、MIME 类型和 Base64 数据的结构化载荷——用于 API 集成。
{ "mime": "image/svg+xml", "data": "PHN2Zy..." }何时使用 Base64 SVG
最适合小型 SVG，此时消除 HTTP 请求比文件大小更重要。
在 CSS 中内联图标
将 UI 图标直接嵌入样式表——无需图标字体、无需精灵图、无需额外请求。使用 URL 编码格式可获得最佳体积。
独立的 HTML 邮件
邮件客户端会屏蔽外部图片，但能渲染内联 Data URI。嵌入 SVG 徽标和图标，确保它们始终正常显示。
关键路径 Logo 渲染
将网站 Logo 以 Base64 Data URI 的形式内联到 HTML <head> 中，随第一个字节一同渲染，无需等待 CSS 文件加载。
组件库图标
将 SVG 图标以 Base64 Data URI 字符串的形式打包到 JavaScript 或 TypeScript 模块中——无需构建时处理 SVG。
常见问题
应该使用 Base64 还是 URL 编码 SVG？
对于 CSS background-image，URL 编码 SVG 通常体积更小，解析速度略快——浏览器无需解码 Base64。对于 HTML <img> 的 src 或嵌入 JSON 时，Base64 Data URI 是标准选择。CSS 选项卡同时展示两种格式，方便对比体积。
Base64 编码能保留 SVG 动画吗？
可以。Base64 是无损编码——解码后的 SVG 与原始文件逐字节完全相同。SMIL 动画、<style> 标签内的 CSS 动画以及 JavaScript 驱动的 SVG 均能完整保留。
为什么 URL 编码版本有时更小？
Base64 会使任何输入体积增加约 33%。SVG 是 XML 文本，其中许多字符（字母、空格、<、>）在 URL 编码后表示形式紧凑，或直接原样传输。对于典型的 SVG 图标，URL 编码字符串通常比 Base64 等效版本短 10–20%。
可以在 CSS 文件中嵌入 Base64 SVG 吗？
可以——使用 background-image: url("data:image/svg+xml;base64,...")。Base64 和 URL 编码两种形式均在所有现代浏览器中支持。避免在 CSS 中嵌入过大的 SVG，因为这会阻止样式表被单独缓存。
粘贴 SVG 代码和上传文件有什么区别？
输出结果完全相同。当您已从图标库或设计工具获取 SVG 标记时，粘贴更方便。当您磁盘上有 .svg 文件时，上传更简单。
SVG 文件会上传到服务器吗？
不会。所有编码均在浏览器中通过 FileReader API 和 TextEncoder/btoa 完成。您的 SVG 标记不会离开设备。