SVG 转 CSS 背景图是将 SVG（可缩放矢量图形）代码转换为 Data URI 格式，直接嵌入到 CSS 的 background-image 属性中。这样做的好处是无需额外的图片文件请求，减少 HTTP 请求数量，同时保持矢量图形的清晰度和可缩放性。生成的代码格式为：background-image: url("data:image/svg+xml;base64,...");

Base64 编码：将 SVG 的字节数据转换为 Base64 字符串。兼容性最好，几乎所有浏览器都完美支持，不会因特殊字符（如 #、<、>）导致解析问题。缺点是编码后体积约增加 33%。

URL 编码：使用 encodeURIComponent() 对 SVG 字符串进行百分号编码。体积相对较小（仅编码特殊字符），但在某些旧浏览器中可能遇到兼容性问题，尤其是 SVG 中包含复杂字符时。

推荐选择 Base64，稳定性更好。本工具默认使用 Base64 编码。

Data URI 背景图在现代浏览器中（Chrome、Firefox、Safari、Edge）都有极好的支持，包括移动端浏览器。IE9+ 也支持 Base64 编码的 Data URI。需要注意的是：

• IE8 及以下不完全支持 Data URI
• Data URI 长度建议控制在 32KB 以内，过长的 Data URI 可能在某些浏览器中性能下降
• 对于非常大的 SVG（超过 50KB），建议使用外部文件引用

有几种方法可以修改 SVG 背景图案的颜色：

1. 直接修改 SVG 代码中的颜色值：在输入框中找到 fill="#颜色值" 或 stroke="#颜色值"，替换为目标颜色。本工具支持实时预览，修改后即可看到效果。
2. 使用 CSS 变量：如果 SVG 中使用 fill="var(--my-color)"，则可以通过 CSS 变量动态控制颜色（需要 SVG 内联在 HTML 中才能生效，Data URI 方式不支持 CSS 变量穿透）。
3. 使用 currentColor：将 SVG 中的颜色设置为 fill="currentColor"，然后在 CSS 中通过 color 属性控制。但请注意，Data URI 中的 currentColor 行为在不同浏览器中可能不一致。
4. 使用 CSS filter：对应用背景的元素使用 filter: hue-rotate() 等滤镜来调整颜色表现。

优点：

• 减少 HTTP 请求，提升页面加载速度（尤其是小图标和纹理）
• 矢量图形，任意缩放不失真，完美适配 Retina 屏幕
• 所有样式集中管理，便于维护
• 无需额外的图片文件，减少项目文件数量

缺点：

• Data URI 体积比原始 SVG 大约 33%（Base64 编码）
• 无法被浏览器缓存（除非缓存整个 CSS 文件）
• 过大的 Data URI 会显著增加 CSS 文件体积
• 不便于在 HTML 中直接使用（如 <img> 标签）

适用场景：小型图标、背景纹理、装饰性图案（建议原始 SVG 大小在 5KB 以内）。

理论上 Data URI 没有严格的长度限制，但不同浏览器有不同的处理能力：

• Chrome/Firefox：支持非常长的 Data URI（数 MB），但过长会明显影响性能
• Safari：对 Data URI 长度相对敏感，建议控制在 64KB 以内
• 移动端：建议 Data URI 不超过 16KB，以保证流畅体验

最佳实践：对于小于 4KB 的 SVG，使用内联 Data URI 是最佳选择。更大的图形建议使用外部 SVG 文件引用。

本工具内置了自动优化选项（默认开启），会自动执行以下优化：

• 移除 XML 声明（<?xml version="1.0"?>）
• 移除 HTML/XML 注释
• 压缩多余空白字符和换行

此外，你还可以手动优化：

• 精简路径数据（使用 SVGOMG 等工具）
• 移除不必要的命名空间属性
• 使用更简单的几何形状替代复杂路径
• 减小 viewBox 尺寸（对于重复背景图案）

SVG 背景可以实现 CSS 渐变无法实现的复杂图案：

• 复杂几何图案：如六边形网格、十字交叉纹理、波浪线等，CSS 渐变难以实现或代码极其复杂
• 矢量精度：SVG 使用数学路径描述，缩放时保持完美锐度
• 可读性：复杂图案的 SVG 代码比等效的 CSS 渐变代码更直观易懂
• 工具链支持：可以使用 Figma、Illustrator 等设计工具导出 SVG，再转换为 CSS 背景

但对于简单的条纹、渐变等效果，纯 CSS 方案通常更简洁高效。