Conversor de SVG para URI de dados CSS
Cole marcação SVG bruta para obter um URI de dados codificado em URL pronto para colocar diretamente em um background-image CSS, mais uma pré-visualização ao vivo do SVG renderizado.
Pré-visualização em tempo real
Sua pré-visualização SVG aparecerá aqui
URI de dados
Trecho CSS
Perguntas frequentes
Por que usar um URI de dados em vez de um arquivo SVG externo?
Um URI de dados incorpora o SVG diretamente no seu CSS ou HTML, economizando uma requisição HTTP extra. É especialmente útil para pequenos ícones usados puramente como background-image, onde manter tudo em uma folha de estilo é mais simples do que gerenciar um arquivo separado.
Por que é codificado em URL em vez de base64?
URIs de dados SVG codificados em URL são geralmente menores que o equivalente em base64 e permanecem legíveis, tornando-os mais fáceis de revisar ou ajustar diretamente no seu CSS. Navegadores suportam ambos, esta ferramenta usa a opção mais compacta e legível.
É seguro colar SVG de uma fonte não confiável?
A pré-visualização renderiza seu SVG como uma '<img>', não injetado como HTML ativo, então scripts incorporados em um SVG malicioso não serão executados na pré-visualização. Ainda assim, trate arquivos SVG como qualquer outro arquivo, e cole apenas marcação em que você confia.