Base64 转 SVG
解码 Base64 SVG 字符串,预览 SVG 图像,并下载为 .svg 文件。支持原始 Base64 和 data:image/svg+xml;base64, Data URL。
在上方粘贴 Base64 字符串或 SVG Data URL 后点击 解码 SVG
有 SVG 需要转成 Base64?
将 SVG 文件编码为 Base64、Data URL、HTML img 标签或 CSS background-image。
如何将 Base64 解码为 SVG
粘贴 Base64
在文本框中粘贴原始 Base64 字符串,或以 data:image/svg+xml;base64, 开头的完整 Data URL。
解码 SVG
点击「解码 SVG」。工具会解码 Base64、验证 SVG 结构,并渲染实时预览。
复制或下载
将 SVG 源代码复制到剪贴板,或下载为 .svg 文件,可在任何地方直接使用。
如何预览 Base64 SVG
解码完成后,工具会直接使用 Base64 Data URI 将 SVG 渲染在<img> 标签中。棋盘格背景可使透明区域清晰可见。
您也可以将以下内容粘贴到浏览器地址栏中,直接预览任意 Base64 SVG:
浏览器地址栏
data:image/svg+xml;base64,<your-base64>Base64 SVG 从哪里来?
您可能在以下场景中遇到 Base64 SVG:
- CSS background-image — 以 url("data:image/svg+xml;base64,…") 形式内联嵌入的 SVG 图标
- HTML img src — 直接嵌入 HTML 中的 SVG,无需单独的文件请求
- JSON / API 响应 — 以 Base64 字符串形式在 API 载荷中返回的 SVG 图标或 logo
- 字体文件和设计令牌 — 导出为 Base64 的 SVG 资源,用于设计系统
Base64 vs URL 编码 SVG
SVG 也可以不用 Base64,通过 URL 编码方式嵌入——data:image/svg+xml,…。了解两种方案各自在何时体积更小、兼容性更好。
常见问题
什么是 Base64 SVG?
Base64 SVG 是将 SVG 文件编码为 Base64 文本后的结果,可以嵌入 HTML、CSS、JSON 或 API 载荷中,无需单独的文件。常见形式为 Data URL,如 data:image/svg+xml;base64,PHN2Zy4uLg==。
如何解码 Base64 SVG?
将 Base64 字符串粘贴到上方工具中,点击「解码 SVG」即可。工具会自动处理原始 Base64 和 Data URL 两种格式,无需任何库或命令行工具。
下载前可以预览 SVG 吗?
可以。工具会显示解码后 SVG 的实时棋盘格背景预览,方便您在复制或下载前确认效果是否正确。
工具会进行哪些验证?
工具会检查解码后的文本是否同时包含 <svg 和 </svg> 标签。如果两者均未找到,会提示内容不是有效的 SVG 文件。当存在 Data URL 前缀时,还会验证 MIME 类型。
工具支持 URL 编码的 SVG(非 Base64)吗?
本工具专门解码 Base64 编码的 SVG。对于 URL 编码的 SVG(data:image/svg+xml,%3Csvg…),需要先进行 URL 解码。如需将 SVG 编码为 Base64 或 URL 格式,请使用我们的「SVG 转 Base64」工具。
我的 SVG 在哪里处理?
完全在您的浏览器中处理。Base64 字符串不会发送到任何服务器。解码、验证、预览和下载均在浏览器内置的 Web API 中本地完成。