SVG转CSS - SVG代码转CSS背景图工具

SVG转CSS工具可以将 SVG 代码转换为 CSS 可用的格式，包括 Data URI、CSS 背景图和 Base64 编码。转换后的 CSS 代码可以直接用于 background-image 属性，无需额外的图片文件，减少 HTTP 请求，提升页面加载速度。

下面介绍 SVG 转 CSS 的原理、使用方法以及各种输出格式的区别。

为什么要将 SVG 转为 CSS

将 SVG 嵌入 CSS 的主要优势是减少 HTTP 请求。传统方式需要将 SVG 保存为单独文件再通过 url() 引用，而 Data URI 方式将 SVG 代码直接嵌入 CSS 中，浏览器无需额外请求文件。对于小图标和装饰性图形，这种方式能显著提升加载性能。

此外，内联 SVG 还避免了文件路径问题和缓存一致性问题。CSS 文件更新时，内联的 SVG 也会同步更新，不会出现图片缓存导致显示旧版本的情况。

核心功能

Data URI

转换为 data:image/svg+xml 格式

Base64 编码

转换为 Base64 编码的 Data URI

CSS 代码生成

生成完整的 CSS background-image 代码

URL 编码

自动对特殊字符进行 URL 编码

代码压缩

自动压缩 SVG 代码减小体积

一键复制

转换结果一键复制到剪贴板

使用教程

将 SVG 代码粘贴到输入框中。
选择输出格式：Data URI（推荐）、Base64 或纯 CSS 代码。
点击转换按钮，查看转换结果。
一键复制转换后的代码，粘贴到 CSS 文件的 background-image 属性中。

适用场景

图标内联 - 将小图标转为 CSS 背景图减少请求
装饰图形 - 将装饰性 SVG 嵌入 CSS
邮件模板 - 邮件中无法引用外部文件的解决方案
组件开发 - 将 SVG 图标打包到 CSS 组件中

Data URI 与 Base64 对比

Data URI（data:image/svg+xml,...）直接将 SVG 文本编码为 URL 安全格式，体积比 Base64 小约 30%，且保持 SVG 的可读性。推荐用于大多数场景。

Base64（data:image/svg+xml;base64,...）将 SVG 二进制编码为 Base64 字符串，兼容性更好（支持 IE8+），但体积会增大约 33%。仅在需要兼容旧浏览器时使用。

常见问题

SVG 体积有限制吗？

Data URI 在 IE 中限制为 32KB，现代浏览器没有明确限制。但建议仅对小图标（几 KB 以内）使用内联方式，大型 SVG 仍建议作为外部文件引用。

转换后颜色变了怎么办？

可能是 SVG 中使用了 # 号表示颜色，在 Data URI 中 # 需要编码为 %23。工具会自动处理编码，如果仍有问题请检查原始 SVG 代码。

可以转换动画 SVG 吗？

可以，包含 CSS 动画或 SMIL 动画的 SVG 也能转换。但部分浏览器对 Data URI 中的 SVG 动画支持有限，建议测试兼容性。

Data URI 和外部文件哪个性能更好？

小图标用 Data URI 更好（减少请求），大文件用外部引用更好（可缓存）。一般以 2KB 为分界线，小于 2KB 内联，大于 2KB 外部引用。

转换后的 CSS 可以修改颜色吗？

Data URI 格式中的 SVG 颜色是固定的，无法通过 CSS 修改。如果需要动态变色，建议使用 SVG 内联标签或 CSS mask 技术。

支持哪些 SVG 特性？

支持标准 SVG 1.1 规范的所有特性，包括渐变、滤镜、裁剪路径、动画等。转换过程不会修改 SVG 内容，仅进行编码处理。

SVG转CSS工具

转换设置