SVG 转 CSS 转换器
将 SVG 代码转换为 CSS background-image data URI。选择 UTF-8 编码获得更小体积，或 Base64 获得更广泛兼容性。
SVG 输入0 字符
SVG 预览
SVG 预览将显示在此处
为什么在 CSS 中使用 SVG？
将 SVG 作为 data URI 直接嵌入 CSS 可以减少一次 HTTP 请求。这非常适合小图标和装饰元素，能提升页面加载性能并减少服务器往返。
UTF-8 与 Base64 编码对比
- - UTF-8：输出更小、人类可读、适合现代浏览器
- - Base64：大约大 33%，但与旧工具兼容性更好
- - 大多数情况下推荐使用 UTF-8
如何在线将 SVG 转换为 CSS 背景图片
- 1.选择编码格式：UTF-8 获得更小体积，或 Base64 获得更广泛兼容性。
- 2.将 SVG 代码粘贴到输入区域，SVG 预览会立即渲染。
- 3.Data URI 和完整的 CSS 代码会在输入下方实时生成。
- 4.点击复制 URI 或 复制 CSS 将结果复制到剪贴板。
FAQ
转换会影响 SVG 质量吗？
不会。SVG 是矢量格式，将其转换为 data URI 会在任何分辨率下保持完整质量。SVG 代码只是被编码以嵌入 CSS，而不是被光栅化。
所有浏览器都支持 SVG data URI 吗？
是的。所有现代浏览器都支持 SVG data URI，包括 Chrome、Firefox、Safari 和 Edge。UTF-8 编码在所有支持 SVG 的浏览器中都能工作，包括 IE9+。
SVG data URI 有大小限制吗？
现代浏览器没有严格的大小限制，但超过 32KB 的 data URI 可能会影响性能。对于大型或复杂的 SVG，建议使用外部文件或在 HTML 中内联 SVG。
我的 SVG 数据会发送到服务器吗？
不会。所有编码和转换完全在浏览器中使用 JavaScript 进行。你的 SVG 代码不会被上传或存储。