SVG转Data URI工具

Updated: 2026-07-11

输入SVG代码：

📖 使用教程

将SVG代码进行Base64编码或URL编码，生成符合Data URI格式的内联资源地址。Base64模式使用btoa函数将SVG编码为Base64字符串，URL编码模式将SVG中的特殊字符进行百分比编码，两种模式都支持在HTML和CSS中直接使用。

在CSS中嵌入SVG图标避免额外HTTP请求；在HTML中直接显示SVG图标；创建单文件HTML页面；在Markdown中嵌入SVG图形。

❓ 什么是Data URI？

Data URI是一种将图片、字体等资源直接嵌入到HTML或CSS中的方案。格式为：data:[mime-type];[编码],[数据]。使用Data URI可以减少HTTP请求，但会增加页面大小。

❓ 支持哪些输出格式？

支持两种编码模式：Base64编码（适用于CSS背景图片、标签的src属性）和URL编码（适用于SVG内联在HTML中）。两种模式都可以直接生成可用的Data URI。

❓ SVG转换后体积会增加吗？

Base64编码会使SVG体积增加约33%，URL编码增加较小（约5-15%）。建议对小型图标使用Base64，大型SVG仍使用外部文件。

❓ 可以在CSS中使用吗？

可以。生成的Data URI可以直接用在CSS的background-image或content属性中，完全兼容所有现代浏览器。

❓ 本工具收费吗？

完全免费。所有功能均无需注册、无需付费即可使用。