SVG Forge

SVG 转 CSS background-image

把任意 SVG 以编码后的 data URI 内联进你的样式表。

或把文件拖进来 / 在下方粘贴代码
CSS 规则
输出会显示在这里

使用方法

  1. 1粘贴 SVG 代码，或拖入一个 .svg 文件。
  2. 2工具会把它 URL 编码成一条 background-image 规则。
  3. 3把这段 CSS 直接复制进你的样式表。

免费、无需注册、没有水印——一切都在你的浏览器本地运行，文件绝不会离开你的机器。

常见问题

为什么用 URL 编码而不是 base64？

URL 编码的 SVG 更小，而且在 CSS 里仍然可读；如果你偏好 base64，也可以切换。

什么时候适合把 SVG 内联进 CSS？

小的装饰性图标和纹理——能省一次 HTTP 请求。大幅图形还是做成文件更合适。

相关工具

SVG 转 Data URI

把 SVG 编码后用在 img src、CSS url() 或任何能放 URI 的地方。

SVG 优化器

SVGO 驱动的清理：文件更小，像素照旧。省了多少一眼可见。

SVG 转 React

粘贴 SVG，得到可直接 import 的 JSX 或 TSX 组件。