LocalTools离线浏览器工具合集

分类: 开发工具

SVG 转 CSS 背景

站方自主规划没找到想要的工具？

把内联 SVG 标记转换成 background-image 数据 URI

粘贴 SVG 标记，得到 CSS background-image 数据 URI，以及配套的 background-repeat、background-size 和 background-position 声明，并提供实时预览，方便复制前先行确认。

输出
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230f766e' stroke-width='2'%3E %3Ccircle cx='12' cy='12' r='9' /%3E %3Cpath d='M8 12h8M12 8v8' /%3E %3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
background-position: center;

SVG 不会离开浏览器；它会被直接编码进 CSS 值中。

本页的所有处理都在浏览器中完成，不会上传任何内容。

这个工具能做什么

一个小型 SVG 图标或图案作为内联 CSS 数据 URI，往往比单独发起一次图片请求更轻量，但手动编码标记使其能安全地写进 url(...) 值中很容易出错：引号、尖括号和换行都需要小心转义。本工具会替你完成这种编码，让结果保持简短、可读，而不是退回到 base64，并会按你选择的重复和尺寸设置提供实时背景预览。

使用方法

  1. 粘贴要用作背景的 SVG 标记。
  2. 选择它应该如何重复和缩放。
  3. 复制 CSS 声明并粘贴到你的样式表中。

隐私说明

本工具完全在你的浏览器中运行。输入的内容不会被上传、保存或分享，关闭标签页即随之消失。

常见问题

这和对 SVG 做 base64 编码是一回事吗？
不是。它只转义了会破坏 CSS 值的少数几个字符，因此得到的数据 URI 明显更短，而且仍然是人可读的文本，不像 base64 那样是一整段不可读的编码。
SVG 会被上传吗？
不会。编码过程只是浏览器标签页中的纯字符串替换；你粘贴的标记不会离开这个页面。
SVG 内部可以使用 currentColor 或 CSS 变量吗？
currentColor 是可以的，因为它会在浏览器绘制时被解析；但 SVG 自身属性中引用的 CSS 自定义属性不行，因为 background-image 数据 URI 是静态标记，不是一份实时生效的样式表。

返回全部工具