Base64 转 SVG

粘贴 Base64 编码的 SVG,即可预览并保存原始矢量文件。也可以把它栅格化为 PNG、JPG 或 WebP,或者把位图放进 SVG 外壳中。

完全在浏览器中运行,不会上传任何数据。

使用方法

  1. 粘贴 Base64 字符串或 data:image/svg+xml;base64 URI。
  2. 查看预览以及识别出的格式和尺寸。
  3. 下载格式保持为 SVG。输入本身是 SVG 时,会以 SVG 文本形式保存。
  4. 下载 .svg 文件;如需阅读或修改代码,用编辑器打开即可。

在 Base64 中识别 SVG

与其他图片格式不同,SVG 是纯文本的 XML。以 <svg 开头的文件编码后以 PHN2Zy 起始,以 XML 声明(<?xml)开头的文件则以 PD94bWwg 起始。Base64 SVG 常见于 CSS 背景图、图标库、设计工具导出的文件和邮件模板。MIME 类型为 image/svg+xml。

很多 SVG data URI 其实并不是 Base64,而是百分号编码的文本,例如 data:image/svg+xml,%3Csvg...。本工具只处理 Base64,这类内容请用 Data URI 生成器解析。

查看 SVG 源代码

预览只能展示图形的渲染效果,而真正有用的往往是代码本身:路径数据、颜色、viewBox 或内嵌字体。以“原始文件”或 SVG 格式下载后,用任意文本编辑器打开即可;也可以把同一段 Base64 粘贴到 Base64 解码,直接以文本形式查看 XML。

位图转 SVG 只是包装,不是矢量化

如果 Base64 数据是 PNG、JPEG 等位图,选择 SVG 会生成一个 SVG 文件,并把原始像素放在 <image> 元素中。当某个工具只接受 SVG 文件时,这很方便,但它不会把图片描摹成矢量形状:放大后依然会模糊,而且由于像素以 Base64 形式存放在文件里,体积会比原位图更大。如需真正的矢量路径,请使用 Potrace 或 Inkscape 的“描摹位图”等描摹工具。

处理来源不明的 SVG

SVG 可以包含 <script> 元素、事件处理属性以及指向外部资源的链接。当 SVG 作为图片显示时(通过 <img> 标签或 CSS 背景),浏览器会屏蔽这些内容;但如果直接在浏览器标签页中打开文件,或者把代码内联到网页里,它们就可能被执行。对来源不明的 SVG,在这样使用之前请先检查或进行净化处理。

常见问题

能把 PNG 变成真正的矢量 SVG 吗?

不能。把位图转换为 SVG 只是把图片嵌入 SVG 文件中,缩放效果与原位图相同,并不会变成矢量图形。

为什么 SVG data URI 无法解码?
请检查其中是否包含 ;base64,。如果没有,说明这个 SVG 是百分号编码或纯文本,而不是 Base64,可以用 Data URI 生成器解析。
解码来源不明的 SVG 安全吗?

解码和保存本身没有风险,因为结果只是文本。SVG 中的脚本只有在作为文档打开,或者内联插入网页时才可能运行。

为什么 SVG 转成 PNG 后字体或链接图片不见了?

栅格化 SVG 时,浏览器会把它作为图片加载,而在这种模式下 SVG 无法读取外部文件,所以网络字体和链接的图片会被跳过,改用默认字体显示。把字体和图片嵌入 SVG,就能让文件自成一体。