0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0
SVG转CSS
将SVG代码转换为可用作CSS属性的data URI：background-image、mask-image或CSS变量。支持URL和Base64编码。
格式
CSS属性
选项
SVG代码
行:0角色:0

工作原理

它将 SVG 的代码转换为可在 CSS 中直接使用的 Data URI，这样你就能将图标直接嵌入样式表，而无需单独文件或额外的 HTTP 请求。

它提供两种编码：URL 编码（百分号编码），更短、更易读，推荐用于 SVG；以及 Base64，稍长但普遍兼容。

结果可以生成为 background-image、mask-image（用 CSS 为图标着色）或可复用的 CSS 变量。事先压缩 SVG 可进一步减小体积。

示例

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">…</svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'…%3C/svg%3E");URL 编码使 SVG 几乎可读，通常比 Base64 更短。
-webkit-mask-image: url("data:image/svg+xml,…"); mask-image: url("data:image/svg+xml,…");作为 mask-image 时，图标的颜色由元素的 background-color 属性控制。

使用场景

  • 将 SVG 图标作为 background-image 嵌入，而不给页面增加 HTTP 请求。
  • 将 SVG 用作遮罩（mask-image），根据主题或状态用 CSS 重新着色。
  • 将图标存储在 CSS 变量中，并在多个选择器中复用。
  • 在嵌入前压缩 SVG，以减小内联图标的体积。

常见问题

URL 编码和 Base64 哪个更好？

对于 SVG，URL 编码通常是最佳选择：由于 SVG 是文本，它能生成更短、更易读的 Data URI。Base64 提供最大兼容性，但会增加约 33% 的体积。

为什么用 mask-image 而不是 background-image？

使用 background-image 时图标保留其原始颜色。使用 mask-image 时 SVG 仅定义形状，颜色由 CSS 提供，非常适合随主题变化的单色图标。

压缩选项有什么作用？

它在编码前移除 SVG 的注释并折叠空白，从而在不改变图形的情况下使最终 Data URI 更小。

我的 SVG 会上传到服务器吗？

不会。转换完全在你的浏览器中进行；SVG 绝不会离开你的电脑。

另请参阅