备案域名包月

SVG 转 DataURI

把 SVG 转成 DataURI 与 CSS 背景用法。

SVG 预览

URL 编码 (data:image/svg+xml,...)

data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%20fill%3D%22%230866ff%22%2F%3E%3C%2Fsvg%3E

Base64 编码

data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMTAiIGZpbGw9IiMwODY2ZmYiLz48L3N2Zz4=

CSS 用法

background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMTAiIGZpbGw9IiMwODY2ZmYiLz48L3N2Zz4=");

什么是SVG 转 DataURI？

这个工具把 SVG 矢量图代码转换为 Data URI 格式（如 data:image/svg+xml;base64,xxxx 或 data:image/svg+xml,xxxx 的 URL 编码形式），使得一段 SVG 代码可以像普通图片地址一样，直接用在 CSS 的 background-image、HTML 的 img 标签 src 属性，或内联进 JSON/JS 字符串中，而不需要额外引用一个独立的 .svg 文件。

为什么使用SVG 转 DataURI？

对于体积小、数量多的图标（比如网站里几十个小图标），每个都单独发一个 SVG 文件请求会增加 HTTP 请求数；转换成 Data URI 后可以直接内嵌进 CSS 或 HTML 里，减少网络请求、避免额外的文件依赖，常用于 CSS 背景图标、字体图标替代方案、邮件模板（很多邮件客户端限制外链图片）等场景。 工具支持两种编码方式：Base64 编码体积更大但兼容性最好，URL 编码在现代浏览器下通常体积更小且转换后字符串还能保持一定可读性，两者都是纯字符串转换，整个过程是浏览器本地处理，SVG 内容不会上传到服务器。

使用示例

转换一个简单图标用作 CSS 背景

输入 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2L2 22h20z"/></svg>，用 URL 编码方式转换后得到 data:image/svg+xml,%3Csvg xmlns='...'...%3E，可直接写进 CSS 的 background-image: url("生成的DataURI"); 中。

生成 Base64 版本用于 img 标签

同一段 SVG 用 Base64 编码后得到 data:image/svg+xml;base64,PHN2ZyB4bWxucz0i...，可以直接放进 <img src="..."> 里，兼容一些不支持 URL 编码格式的场景。

内联进 JSON 配置或 JS 变量

把生成的 Data URI 字符串赋值给 JS 变量（如 const iconUrl = "data:image/svg+xml,...";）或写进图标配置的 JSON 文件里，实现"零额外请求"加载图标，适合图标库、按需生成图标的场景。

使用提示

大体积或含有复杂路径、渐变、滤镜的 SVG 编码成 Data URI 后字符串会很长，写进 CSS 文件会显著增加文件体积，建议只对小图标使用这种方式，复杂或大尺寸矢量图仍建议作为独立文件引用并走 HTTP 缓存。

常见问题

URL 编码和 Base64 编码该用哪种？
两种均可作为 CSS/HTML 中的 data URI；URL 编码后的字符串更短、方便直接阅读修改，Base64 更通用、兼容性更好，可按需选择。
为什么预览不显示？
请确认输入的是完整合法的 SVG 代码（包含 <svg> 根标签），否则浏览器无法解析渲染。
数据会上传吗？
不会。SVG 编码与预览全部在浏览器本地完成。
为什么转换后在 CSS 里用不了，报错或不显示？
常见原因是 SVG 代码里的双引号没有正确处理——如果外层 CSS url() 用双引号包裹，SVG 内部属性也用双引号会导致冲突，通常做法是把 SVG 内部属性统一改成单引号，再用双引号包裹整体 url()，工具生成时一般会自动处理好这层转义。
URL 编码和 Base64 编码该选哪个？
现代浏览器（Chrome、Firefox、Safari 新版本）都支持直接用 URL 编码的 SVG Data URI，体积通常比 Base64 小 20%-30% 且不需要额外的编解码开销；如果要兼容非常老旧的浏览器或某些邮件客户端，Base64 兼容性更保险，两者视觉效果完全一致，只是编码方式不同。
转换后的 SVG 还能通过 CSS 改颜色吗？
一旦编码进 Data URI，SVG 内部的 fill/stroke 颜色就固定了，无法再用外部 CSS 的 color 属性动态修改，如果需要动态换色，更推荐用内联 <svg> 标签或 CSS mask 方案而不是 Data URI 背景图。
我的 SVG 文件会被上传到服务器吗？
不会，这类编码转换是纯字符串处理，完全可以在浏览器本地用 JavaScript 完成（如 encodeURIComponent 或 btoa），不需要联网即可得出结果，可放心处理包含敏感设计稿的 SVG 内容。

相关工具

二维码生成

把文本 / 链接生成二维码，可调尺寸与容错，支持下载 PNG。

图片压缩

在浏览器本地压缩 JPG / PNG / WebP，可调质量与最大宽高。

图片裁剪

本地裁剪图片到指定区域或比例，导出 PNG / JPG。

图片格式转换

本地转换 JPG / PNG / WebP 格式，可调质量与尺寸。

多图拼接 (长图)

把多张图片纵向或横向拼接成一张长图，本地合成。

图片圆角处理

给图片添加圆角并导出透明 PNG，可调圆角半径。

← 返回工具箱· 数据均在浏览器本地处理，不上传服务器。