# 为什么要将 SVG 转换为 CSS Data URI？
在现代 Web 开发中，优化性能和资源加载至关重要。通过 Data URI 将图标直接嵌入 CSS 中可以消除不必要的 HTTP 请求，减少延迟并提高可交互时间 (TTI)。此工具将<svg> 矢量代码转换为浏览器可以解释为背景图像或剪切遮罩的编码文本字符串，同时保持矢量图特有的无限扩展性和清晰度。# 主要技术优势
- 零 HTTP 请求： 通过将图形嵌入到
.css文件中，浏览器无需下载额外的外部文件。 - 通过 CSS 遮罩进行自定义： 使用
mask-image技术，您只需使用background-color即可更改复杂矢量图标的颜色。 - 即时渲染： 由于关键视觉资源在样式表下载后即可立即使用，您可以避免内容闪烁 (FOUC)。
# CSS 遮罩 vs 背景
许多开发人员仅仅使用background-image 来嵌入矢量图，但这有一个限制：您无法从 CSS 动态更改 SVG 颜色。我们的工具支持为 CSS 遮罩生成代码。通过在生成的 Data URI 中应用 mask-image，图标将充当模板，允许元素的 background-color 定义最终的图标颜色。这是在 Astro、Next.js 或任何现代框架中管理图标的最专业且最灵活的方式。