SVG 转 CSS 转换器

将 SVG 代码转换为 CSS background-image data URI，直接在样式表中使用 SVG 图形。

输出类型:

SVG 代码

CSS 输出

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E %3Ccircle cx='50' cy='50' r='40' fill='%233b82f6' opacity='0.8'/%3E %3Cpolygon points='50,15 61,35 85,35 67,57 75,80 50,65 25,80 33,57 15,35 39,35' fill='%23f59e0b' opacity='0.9'/%3E %3C/svg%3E");

背景预览

Inline SVG (original):

SVG 转 CSS Data URI 转换器

将 SVG 代码转换为 CSS background-image data URI，用于样式表中。Data URI 允许您直接在 CSS 中嵌入 SVG 图形，无需额外的 HTTP 请求，提升页面性能。

常见问题

为什么将 SVG 用作 CSS 背景？

使用 data URI 将 SVG 作为 CSS 背景可以消除额外的 HTTP 请求，提升网站性能，并允许通过 CSS 轻松自定义。

什么是 data URI？

Data URI 是一种将小文件直接嵌入文档的方式，以 base64 或 URL 编码字符串表示。

应该使用 base64 还是 URL 编码？

对于 SVG，URL 编码通常比 base64 更高效，因为 base64 会增加约 33% 的文件大小。

能在 SVG 中使用 CSS 自定义属性吗？

在 data URI 中不能直接使用 CSS 变量更改 SVG 颜色。如需动态颜色，请考虑使用内联 SVG。

哪些 SVG 元素可以用作 CSS 背景？

所有有效的 SVG 元素都可以，包括形状、文本、渐变和图案。确保您的 SVG 有 viewBox 属性。

𝕏 Twitter in LinkedIn

评价此工具

3.6 / 5 · 198 人评价

保持更新

获取每周开发技巧和新工具通知。

无垃圾邮件，随时退订。

Enjoy these free tools?

☕Buy Me a Coffee

使用方法

Paste your SVG code or upload an SVG file
Choose encoding method: URL-encoded or Base64
Preview the SVG and the generated CSS code
Copy the CSS background-image property to use in your stylesheet

使用场景

Embedding small SVG icons directly in CSS to reduce HTTP requests
Creating CSS-only decorative elements without external files
Optimizing SVG icons for use in CSS pseudo-elements (::before, ::after)
Converting SVG logos for inline CSS backgrounds in email templates

常见问题

Should I use URL encoding or Base64 for SVGs in CSS?

URL encoding is generally recommended for SVGs in CSS because it produces smaller output than Base64 (about 30% smaller). Base64 is better for binary formats like PNG.

Is it better to use inline SVG or SVG in CSS?

For decorative icons and backgrounds, CSS data URIs keep your HTML cleaner. For interactive or accessible SVGs, inline SVG in HTML is preferred as it supports CSS styling and aria attributes.

What is the size limit for SVG data URIs?

There is no strict size limit, but keeping data URIs under 8-10KB is recommended for performance. Larger SVGs should be served as external files.

SVG 转 CSS 转换器

SVG 转 CSS Data URI 转换器

常见问题

更多工具

Recommended

保持更新

使用方法

使用场景

常见问题

💬 User Feedback