SVG 转 CSS 背景

粘贴一段 SVG 代码,工具会把它转换为 data:image/svg+xml 形式的 data URI,并生成可直接使用的 background-image 样式。会对 #、<、>、引号等字符做必要的 URL 编码,方便直接嵌入 CSS。全部处理在浏览器本地完成。

SVG 代码 等待输入

建议保留 xmlns 属性,缺少时部分浏览器可能无法渲染。

CSS 背景样式
原始大小—
编码后大小—
生成结果—
粘贴 SVG 后点击「生成 CSS 背景」,结果将显示在这里。

转换结果仅供参考,复杂滤镜、外部引用等可能无法在 data URI 中生效。

转换规则说明
  • 输出格式为 url("data:image/svg+xml,...")。
  • #、<、>、引号、空格等会被 URL 编码。
  • 可选择单引号编码方式(仅编码必要字符,体积更小)。
  • 可直接粘贴进 background-image 属性使用。
  • 结果仅供参考,外部资源引用不会被内联。