SVG Data URI 转换器

在线将 SVG 转换为 Data URI、Base64 和编码 URI

从同一个 SVG 生成三种常见 Data URI：Minified SVG URI、Base64 URI 和 encodeURIComponent URI。

转换 SVG 为 Data URIURI 面板会同时展示三种格式。

把 SVG 图标嵌入 CSS background-image。

发布代码前比较编码格式和 Base64 格式。

为文档、原型或小型 UI 资源复制紧凑的内联 SVG URI。

SVG Code

XML

Minified Data URI

Base64 Data URI

encodeURIComponent Data URI

SVG Code

XML

预览会移除脚本和内联事件属性，并在沙盒中渲染 SVG。

将 SVG 标记粘贴到编辑器。

预览 SVG，确认渲染正确。

打开 URI 面板，复制最适合当前场景的格式。

三种格式并排对比

URI 面板分别展示 Minified Data URI、Base64 Data URI 和 encodeURIComponent Data URI，每块都可单独滚动。

Data URI 常用于小图标、CSS 背景、演示和单文件原型。

简单 SVG 使用 Minified URI 往往更短；当系统容易转义 URL 字符时，Base64 更稳。

CSS 中通常使用编码或压缩后的 SVG URI，既可读又紧凑。若系统会不可控地转义 URL 字符，Base64 更安全。

过大的 Data URI 会让 CSS 或 HTML 变臃肿。建议只用于小图标和简单图形。

是的。SVG 会在你的浏览器中转换为每一种 Data URI 格式。