Conversor SVG para CSS
Converta código SVG para CSS background-image data URI. Suporta formatos URL codificado e Base64.
Sobre esta ferramenta
SVG to CSS Converter transforma código SVG em formato de dados URI para usar em propriedades CSS background-image, eliminando a necessidade de arquivos de imagem separados ou requisições HTTP. Ao incorporar dados SVG diretamente em suas folhas de estilo, você reduz dependências externas, melhora o desempenho de carregamento de página e simplifica o gerenciamento de ativos. A ferramenta suporta tanto formatos de codificação URL quanto Base64, cada um com vantagens distintas dependendo de suas prioridades de desempenho e preferências de legibilidade.
Para converter SVG para CSS, cole seu código SVG na área de entrada, selecione seu método de codificação preferido e clique em Converter. O formato codificado em URL produz uma saída mais curta que é mais fácil de ler e depurar, enquanto Base64 cria uma representação mais compacta que comprime melhor em gzip. A ferramenta mostra instantaneamente a saída CSS e uma visualização ao vivo do SVG renderizado, ajudando você a verificar a conversão antes de copiá-la em suas folhas de estilo.
Essa abordagem é particularmente útil para ícones pequenos, logotipos e gráficos simples incorporados em aplicativos da web. Ao manter dados SVG dentro de CSS, você evita problemas de invalidação de cache, reduz o total de requisições de rede e pode até manipular propriedades SVG através de pseudo-classes CSS como :hover e :active. Considere armazenar SVG complexos como arquivos separados para melhor manutenibilidade, mas URIs de dados inline funcionam bem para componentes que raramente mudam.
Perguntas Frequentes
Implementação de Código
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.