将 SVG 转换为 CSS 背景

粘贴 SVG,即可直接得到可粘贴到样式表中的 background-image CSS 规则,无需另外托管图片文件。

示例:

为什么用 CSS 背景 SVG 而不是图片文件?

把 SVG 以 data URI 的形式直接编码到样式表中,可以省去加载单独图片文件所需的额外 HTTP 请求,对于小图标能略微加快显示速度。这对独立组件也很方便(一个 CSS 文件就已包含它自己的图标)。

为什么 SVG 采用 URL 编码而不是 base64?

对于 SVG 这类文本,URL 编码(仅转义少数字符,如 #、< 和 >)通常比 base64 生成的 data URI 更短、更易读,从而略微减小最终 CSS 的体积。

嵌入为 CSS 背景后,还能更改图标颜色吗?

不能。一旦编码为 background-image,SVG 的颜色就固定在 data URI 中了:如需更换颜色,请先修改源 SVG 中的颜色再重新生成 CSS(例如使用我们的 SVG 颜色替换工具)。

100% 本地处理:编码完全在您的浏览器中进行,您的 SVG 不会被上传到任何服务器。