正在进入站内文章…

SVG 解码使用教程:在线将 SVG 文件转为 Base64 data URL,支持预览与保存

本地 SVG 解码工具,上传 .svg 矢量文件后自动转为带 data:image/svg+xml;base64, 前缀的标准 data URL。布局与「图片转 Base64」一致:上传区即预览区。

SVG 解码工具界面

功能特点

  • 支持首页上传与粘贴板导入双入口;支持 Ctrl/Cmd+V。
  • 自动转码:上传合法文件后自动读取源码并生成 Base64 编码,无需手动点击转换。

使用场景

  • CSS 内联图标:将 SVG 转为 data URL 用于 background-imagemask
  • 接口字段填充:生成带前缀的 Base64 字符串用于 API 提交。
  • 前端资源内嵌:将小图标编码后嵌入 JS / HTML,减少请求。

使用方法

  1. 首页点「上传」选择/拖拽 .svg,或点「粘贴板导入」(也可 Ctrl/Cmd+V;仅 svg,最大 500 KB)。
  2. 上传后自动转码:上传区内显示 SVG 预览,下方文本框展示完整 data URL。
  3. 点击「复制」将编码复制到粘贴板,可直接粘贴到代码或接口字段。
  4. 点击「保存」将原始 .svg 另存到电脑(可重命名)。

注意事项

  • 文件大小:单文件最大 500 KB,超出请精简 SVG 或拆分使用。
  • 格式限制:仅支持 .svg 矢量文件,不支持 PNG/JPG 等位图。
  • 输出前缀:复制结果为完整 data URL,可直接用于 srcurl()