SVG 转 Data URI

把 SVG 源码转成 data:image/svg+xml URI,可直接用于 CSS background

使用说明

SVG 转 Data URI 工具把 SVG 源码转成 data:image/svg+xml 形式的链接,可直接用于 CSS 的 background-image 或 <img> 的 src,省去额外的图片请求。提供 URI 编码(更短、可读)和 Base64 两种方式。

编码在浏览器本地完成。URI 编码方式生成的字符串通常比 Base64 更短,且在 CSS 中可读性更好。

常见问题

Q URI 编码和 Base64 选哪个?

一般推荐 URI 编码:体积更小、可读性更好,且现代浏览器都支持。Base64 兼容性最广,但字符串更长。

Q 编码后的 SVG 怎么用在 CSS 里?

工具会直接给出 background-image: url("...") 片段,复制粘贴到样式里即可,无需额外请求图片文件。

Q 为什么提示需要完整 SVG?

输入必须包含 <svg> 标签,工具据此判断是有效的 SVG 源码;只贴路径 path 数据是不行的。

相关工具

© 2026 ITBX 工具箱 · 开发者在线工具集

本地运算 · 数据不上传(除明确标注的在线检查类工具)