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 数据是不行的。