SVG para CSS

O que é uma data URI de SVG no CSS?

Uma data URI permite embutir uma imagem diretamente dentro do CSS em vez de apontar para um arquivo separado. Para SVG, ela aparece como um background-image cuja url aponta para um recurso data:image/svg+xml, com o SVG codificado em base64 ou percent-encoded no próprio valor. Embutir um SVG dessa forma elimina uma requisição de rede, o que é útil para ícones pequenos, padrões decorativos e gráficos feitos só com CSS. Esta ferramenta gera as duas codificações a partir do código que você cola e as formata como uma regra background-image que você cola direto na folha de estilos.

Como converter SVG em uma data URI de CSS

Transformar o seu SVG em CSS leva apenas alguns passos:

1. Cole o seu código SVG bruto na caixa de entrada.
2. Clique em Converter para CSS para gerar as duas codificações de data URI.
3. Compare o tamanho em bytes mostrado ao lado de cada codificação.
4. Confira a prévia ao vivo para confirmar que o SVG é renderizado corretamente.
5. Copie a declaração background-image URL-encoded ou base64 para a sua folha de estilos.

URL-encoded ou base64: qual é menor?

O base64 sempre aumenta os dados em cerca de um terço, porque representa cada três bytes com quatro caracteres. A codificação por URL só escapa o punhado de caracteres que são inseguros dentro de uma data URI, como os sinais de maior e menor, a cerquilha, o sinal de porcentagem, as aspas e os espaços, mantendo o restante do texto SVG legível intacto. Para SVGs comuns, a forma URL-encoded é visivelmente menor e ainda permanece legível. Esta ferramenta informa o tamanho em bytes de cada uma para você simplesmente escolher a menor, e seleciona a codificação mais leve para a prévia ao vivo automaticamente.

Converter SVG em CSS é seguro e privado?

Sim. A conversão acontece inteiramente no seu navegador com JavaScript, então o seu código SVG nunca é enviado para um servidor. A prévia ao vivo é renderizada apontando um elemento de imagem para a data URI gerada, o que exibe a arte sem executar nenhum script dentro do SVG, e toda a saída é mostrada como texto puro. Nada do que você cola é armazenado ou transmitido.

Por que usar este conversor de SVG para CSS?

• 100% gratuito, sem anúncios, cadastro ou limites.
• Gera as data URIs em base64 e URL-encoded de uma só vez.
• Produz uma declaração background-image pronta para colar em cada uma.
• Mostra o tamanho em bytes de cada codificação para você escolher a menor.
• A prévia ao vivo renderiza o seu SVG diretamente da data URI.
• Roda inteiramente no seu navegador, então o seu código nunca sai do seu dispositivo.

Perguntas frequentes