SVG转CSS转换器
将SVG代码转换为CSS background-image数据URI。支持URL编码和Base64格式。
关于此工具
SVG to CSS Converter 将 SVG 代码转换为数据 URI 格式，可直接在 CSS background-image 属性中使用，无需单独的图像文件或 HTTP 请求。通过将 SVG 数据直接嵌入样式表，你可以减少外部依赖、改善页面加载性能并简化资源管理。该工具支持 URL 编码和 Base64 编码两种格式，每种格式根据你的性能优先级和可读性偏好具有不同的优势。
要将 SVG 转换为 CSS，请将 SVG 代码粘贴到输入区域，选择你偏好的编码方法，然后点击"Convert"。URL 编码格式生成较短的输出，更易于阅读和调试，而 Base64 创建更紧凑的表示，在 gzip 中压缩效果更好。该工具立即显示 CSS 输出和渲染 SVG 的实时预览，帮助你在复制到样式表之前验证转换。
这种方法特别适用于嵌入在网络应用程序中的小图标、徽标和简单图形。通过在 CSS 中保留 SVG 数据，你可以避免缓存破坏问题、减少总网络请求，甚至可以通过 :hover 和 :active 等 CSS 伪类来操纵 SVG 属性。对于复杂的 SVG，考虑将其存储为单独的文件以获得更好的可维护性，但对于很少更改的组件，内联数据 URI 效果很好。
常见问题
代码实现
import base64
from urllib.parse import quote
def svg_to_css_url_encoded(svg: str) -> str:
encoded = quote(svg, safe="")
return f'background-image: url("data:image/svg+xml,{encoded}");'
def svg_to_css_base64(svg: str) -> str:
b64 = base64.b64encode(svg.encode("utf-8")).decode("ascii")
return f'background-image: url("data:image/svg+xml;base64,{b64}");'
svg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#6366f1"/></svg>'
print("URL encoded:")
print(svg_to_css_url_encoded(svg))
print()
print("Base64:")
print(svg_to_css_base64(svg))Comments & Feedback
Comments are powered by Giscus. Sign in with GitHub to leave a comment.