SVG 转 Base64 - 在线生成 SVG Data URI

上传 SVG 文件或粘贴 SVG 代码，即时生成 Base64 与 Data URI。支持前缀切换、图形预览、一键复制和下载，全程本地处理。

SVG 转 Base64

点击选择 SVG 文件，或将其拖拽到此区域

仅支持 .svg 格式，文件大小不超过 5MB

Base64 编码结果包含 Data URI 前缀

关于 SVG 转 Base64

什么是 SVG 转 Base64？

SVG 转 Base64 是把 SVG 源代码按 UTF-8 转成字节，再做 Base64 编码，得到一串可以安全放进文本环境的字符。因为 SVG 本身包含尖括号、引号和换行，直接塞进 JSON、CSS 或某些模板引擎时容易破坏语法，编码后就只剩 A-Z、a-z、0-9、+、/ 和 =，粘贴到哪里都不会冲突。

常见的输出形式是 data:image/svg+xml;base64,...，也就是 SVG 的 Data URI。它可以放进 <img> 的 src、CSS 的 background-image，或作为单文件 HTML 的图标资源。工具支持带前缀和不带前缀两种结果，并会同步显示字符数与编码后的长度。

SVG 转 Base64 有什么用？

适合这些场景：把小图标直接内联到 HTML 或 CSS，减少一次图片请求；把 Logo 放进邮件模板，避免部分客户端拦截外部图片；在 JSON 接口或 CMS 富文本字段里传递矢量图；给离线页面、单文件文档或演示稿打包图形资源。

如果图形简单、重复使用次数少，Base64 内联通常比额外维护一个图片文件更省事。需要反向查看内容时，可以用 Base64 转 SVG 工具解码回源码。

SVG 转 Base64 的原理

编码时先把 SVG 文本按 UTF-8 转成字节，再按每 3 个字节一组拆成 4 个 6 位单元，映射到 64 个可打印字符。数据量不是 3 的倍数时用 = 补齐，所以编码后的体积大约增加三分之一。

解码方拿到 Data URI 后，会先根据 MIME 类型识别这是 SVG，再去掉前缀、还原字节，最后按 XML 解析。使用 data:image/svg+xml;base64, 前缀能让浏览器明确知道内容类型；如果只把纯 Base64 放进 src，浏览器无法判断格式。

如何使用 SVG 转 Base64 工具

选择输入方式

可以点击上传区域选择 .svg 文件，也可以切换到"粘贴代码"，直接把 <svg>...</svg> 放进输入框。单个文件限制 5MB。

确认 SVG 内容

工具会检查内容中是否包含 <svg> 标签，并在下方显示预览。若图形空白或报错，通常是代码不完整或引用了不可用的外部资源。

选择是否带前缀

需要直接放进 src 或 CSS 时保留 data:image/svg+xml;base64, 前缀；只想要纯字符串用于接口字段或数据库时，关闭前缀开关。

复制或下载结果

点击"复制"把结果放进剪贴板，或点击"下载"保存为 TXT 文件。输出会随你修改 SVG 内容实时更新。

SVG 转 Base64 的核心优势

上传与粘贴都支持

既可以选择本地 .svg 文件，也可以直接粘贴代码。改完一行颜色就能立刻看到新的编码结果。

前缀一键切换

在 Data URI 和纯 Base64 之间切换，不用手动删改字符串，适配 img、CSS、JSON 等不同用法。

编码前后都有预览

输入区展示 SVG 图形，输出区显示编码长度，方便确认内容是否正确、体积是否在可接受范围。

UTF-8 友好

按 UTF-8 编码，包含中文文字、注释或非 ASCII 属性的 SVG 也能正确处理。

本地处理更安全

文件读取、编码和预览都在浏览器中完成，不会上传到服务器，内部图标和未公开素材也能放心处理。

免费且无需注册

打开网页即可使用，没有次数限制，也不需要安装插件或登录账号。

为什么选择 SVG 转 Base64？

标准编码，结果可复现
工具按 RFC 4648 标准进行 Base64 编码，并对 UTF-8 字节做完整处理，生成的前缀固定为 data:image/svg+xml;base64,。同样的 SVG 内容会得到同样的结果，方便在代码仓库、构建脚本和设计交付之间核对。

本地处理，数据不出设备
所有读取、校验、编码和预览操作都在你的浏览器中执行，我们不会收集、存储或传输你上传的文件或粘贴的代码。对于包含客户品牌元素或内部系统图标的 SVG，这一点尤其重要。

10+种 Base64 解码格式

通用编码将普通文本或字符串编码为 Base64 格式，适用于简单数据转换。文件转 Base64将任意文件转换为 Base64 字符串，便于在文本中嵌入或传输。图片转 Base64将图片文件转换为 Base64 编码，可直接嵌入 HTML 或 CSS 中。Excel 转 Base64将 Excel 表格文件编码为 Base64，方便在接口中传输或存储。Hex 转 Base64将十六进制数据转换为 Base64 编码，常用于二进制数据转换。JSON 转 Base64将 JSON 对象编码为 Base64 字符串，便于在 URL 中传递结构化数据。PDF 转 Base64将 PDF 文档转换为 Base64 编码，支持在网页中直接嵌入或传输。PNG 转 Base64将 PNG 图片编码为 Base64，常用于生成 Data URI 或图片存储。JPG 转 Base64将 JPG 图片编码为 Base64，常用于生成 Data URI 或图片存储。WEBP 转 Base64将 WEBP 图片编码为 Base64，常用于生成 Data URI 或图片存储。SVG 转 Base64将 SVG 矢量图编码为 Base64，生成可直接嵌入页面的 Data URI。XML 转 Base64将 XML 文档转换为 Base64 编码，适用于配置文件传输和存储。

10+种 Base64 编码格式

全方位的功能支持

多格式编码 —— 除 SVG 外，还支持把图片、文件、Excel、PDF、JSON 等转换为 Base64，按场景选择更合适的入口。
反向解码 —— 拿到一段 SVG Base64 时，可用 Base64 转 SVG 工具还原预览、复制源码或下载文件。
实时输出 —— 修改 SVG 代码后编码结果自动更新，前缀开关即时生效，不用重复点击按钮。

SVG 转 Base64 在不同语言中的使用

Java

Java 中读取 SVG 文件字节后，用 Base64.getEncoder().encodeToString() 得到字符串，再按需拼接 data:image/svg+xml;base64, 前缀。

import java.nio.charset.StandardCharsets;
import java.nio.file.Files;
import java.nio.file.Paths;
import java.util.Base64;

public class SvgToBase64 {
    public static void main(String[] args) throws Exception {
        // 按字节读取 SVG，保留原始内容
        byte[] svgBytes = Files.readAllBytes(Paths.get("image.svg"));

        // 编码为 Base64
        String base64 = Base64.getEncoder().encodeToString(svgBytes);

        // 写入纯 Base64 或 Data URI
        String dataUri = "data:image/svg+xml;base64," + base64;
        Files.writeString(Paths.get("svg-base64.txt"), dataUri, StandardCharsets.UTF_8);
    }
}

Python

Python 以二进制模式读取 SVG，调用 base64.b64encode() 编码并解码成字符串。需要 Data URI 时手动拼接前缀。

import base64

with open("image.svg", "rb") as f:
    svg_bytes = f.read()

base64_str = base64.b64encode(svg_bytes).decode("utf-8")
print(base64_str)

# 需要 Data URI 时拼接前缀
data_uri = "data:image/svg+xml;base64," + base64_str
print(data_uri)

JavaScript

浏览器里用 TextEncoder 把 SVG 文本转成字节，再用 btoa() 编码；Node.js 中直接 Buffer.from(svg, "utf8").toString("base64")。

// 浏览器环境：SVG 文本转 Base64
const svgSource = '';
const bytes = new TextEncoder().encode(svgSource);

let binary = "";
bytes.forEach(byte => { binary += String.fromCharCode(byte); });
const base64 = btoa(binary);
const dataUri = `data:image/svg+xml;base64,${base64}`;

console.log(dataUri);

// Node.js 环境
const fs = require("fs");
const svg = fs.readFileSync("image.svg");
const nodeBase64 = svg.toString("base64");

SVG 转 Base64 常见问题

SVG 转 Base64 是把 SVG 源代码编码成由 64 个可打印字符组成的字符串，通常再搭配 data:image/svg+xml;base64, 前缀使用。这样图形就能以纯文本形式嵌入 HTML、CSS、JSON 或邮件模板，不必依赖独立的图片文件。

主要为了减少外部资源请求，并避免尖括号、引号在文本环境里引发语法问题。小图标内联后页面只需加载一次；邮件模板里使用 Data URI 也能降低图片被客户端拦截的概率。不过图标较多时，内联会增加 HTML 体积，需要权衡。

Base64 会让数据体积增加约 33%，因为每 3 个字节会变成 4 个字符。SVG 源码通常不大，小图标影响有限；但如果 SVG 里嵌了大量路径或位图，生成结果可能明显变长，建议先做压缩再编码。

带前缀的结果可以直接放进 <img src="...">，也可以写进 CSS 的 background-image: url("...")。不带前缀的纯 Base64 适合放进 JSON 字段、数据库或需要自行拼接前缀的代码里。注意前缀和内容之间不要插入空格或换行。

可以。切换到"粘贴代码"后直接贴入完整内容即可，带 XML 声明或注释也没问题，只要包含 <svg> 标签。修改代码时编码结果会实时更新，适合边调颜色边取结果。

不会。文件只在你当前浏览器中读取和编码，不会上传到服务器。工具完全免费，无需注册，也没有使用次数限制。

SVG 转 Base64 相关博客

更多博客

Base64 终极指南：从编码原理到 Base64 解码/转码的完整实战手册

全面解析 Base64 编码原理、Base64 在线解码与转码方法，涵盖文本、图片、PDF 等多种格式的转换实战，附常用工具推荐与代码实现示例。

2026-08-3115 分钟阅读

图片转 Base64 全攻略：PNG/JPG 转 Base64 编码及 Base64 还原图片详解

详解图片与 Base64 互转的完整流程：PNG/JPG 转 Base64 编码、Base64 还原图片，提供在线工具和代码两种方案，解决开发者嵌入图片、减少 HTTP 请求的刚需。

2026-08-3112 分钟阅读

Base64 解密乱码？Base64 加密与解密的常见误区及正确使用姿势

Base64 解密出现乱码怎么办？本文纠正 Base64 是加密算法的常见误区，解析乱码产生的原因（字符集、URL 安全、填充符等），并提供正确的 Base64 编码与解密处理方案。

2026-08-3110 分钟阅读

🚀 立即开始

把 SVG 变成可直接嵌入的 Base64

上传文件或粘贴代码，马上得到 Data URI，复制即可用。无需注册，本地编码，数据不上传。

✅ 上传/粘贴✅ 前缀可切换✅ 本地处理✅ 完全免费

免费 · 无需注册 · 数据不上传