SVG 转换器

CSS Background Synthesis

优化 SVG
移除空格和注释

Advanced Background Optimization

智能优化

自动移除不必要的空格、注释和属性,在保持 SVG 质量的同时最大限度地减小文件体积。

多种格式

根据您的需求,在 URL 编码的 Data URI(体积更小)或 Base64 编码(兼容性更好)之间进行选择。

实时预览

实时查看您的 SVG 作为 CSS 背景渲染的效果,确保在正式使用前外观符合预期。

使用方法

1

将您的 SVG 代码粘贴或输入到输入框中

2

选择输出格式,并根据需要启用优化

3

查看生成的 CSS 代码和预览效果

4

复制或下载 CSS 以用于您的项目

Technical Integration

Simply paste the generated CSS as a background-image property in your stylesheet. This allows you to use high-resolution, scaleable icons without external HTTP requests, improving performance and SEO.

FAQ

常见问题

什么是 SVG Data URI?
Data URI 是一种使用 data: 协议将 SVG 代码直接嵌入 CSS 的方法。这消除了对物理 SVG 文件的需求并减少了 HTTP 请求。
我应该使用哪种格式 - Data URI 还是 Base64?
URL 编码的 Data URI 通常更好,因为它具有更好的可读性且体积通常更小。如果您需要兼容旧系统或特定的工具,请使用 Base64。
优化会影响 SVG 的质量吗?
不会!优化仅移除不必要的空格、注释和冗余属性。您的 SVG 分辨率和视觉效果将保持完全一致。
这个工具支持任何 SVG 吗?
是的!此工具适用于任何有效的 SVG 代码。但是,包含嵌入图像或动画的非常复杂的 SVG 可能会导致生成的 CSS 文件非常庞大。