SVG para data URI de CSS
SVG to CSS Data URI
Codifica um SVG como data URI de background CSS, escapando só o que precisa para mantê-lo pequeno.
Transforma um SVG em um data URI que você pode colar em uma folha de estilo, codificado como URL em vez de Base64, porque isso é ao mesmo tempo menor e ainda legível. Mostra os três tamanhos lado a lado, renderiza o URI codificado para que você veja que funciona, e avisa sobre o punhado de coisas que fazem um SVG renderizar como nada quando vira um data URI.
Solte um SVG
Ou edite a marcação abaixo.
SVG
Prévia
É desenhado a partir do próprio URI codificado, então se aparece aqui vai aparecer na sua folha de estilos.
Tamanho
SVG cru
165 B
Codificado em URL
198 B
Base64
246 B
Aqui a codificação em URL fica 19,5% menor que Base64.
Base64 custa 33⅓% fixos em qualquer entrada. Um SVG é texto, e dentro de um url() do CSS só um punhado de caracteres precisa de escape — então a codificação em URL costuma ficar uns 10% acima do arquivo cru. E continua dando para ler, procurar com grep e comparar num diff dentro da folha de estilos, o que com Base64 não acontece.
Resultado
Só são escapados %, <, >, # e alguns caracteres de colchete, e as aspas duplas do SVG viram simples para a string do CSS poder usar aspas duplas sem risco. O que mais importa é #: sem escape dentro de fill="#fff" ele começa um identificador de fragmento e trunca a URL, o que desenha exatamente nada e sem erro nenhum em lugar algum.
Precisa de um raster? O conversor de SVG para PNG renderiza em PNG em qualquer escala. Quer o SVG menor antes de codificar? O otimizador de SVG reescreve os dados dos caminhos.
Como usar
Cole ou solte o SVG
A caixa de código é editável, então você pode corrigir a marcação aqui em vez de voltar ao arquivo. O exemplo é um ícone traçado, que é o caso comum.
Leia os avisos antes de qualquer outra coisa
Um `xmlns` ausente é o que pega todo mundo: inline no HTML não importa, mas um data URI é interpretado como um documento XML independente, e sem ele o navegador não renderiza nada e não relata nada. Os outros avisos cobrem imagens externas, scripts e tamanhos em porcentagem sem viewBox.
Confira a prévia
Ela é desenhada a partir do próprio URI codificado, não do código-fonte, então, se o ícone aparece nessa caixa, ele vai aparecer na sua folha de estilo. Uma caixa vazia significa que o URI está quebrado, e os avisos acima normalmente dizem por quê.
Escolha a propriedade e copie
A declaração muda com a propriedade: `background-image`, `mask-image`, `content` ou um `src` puro. Base64 está disponível para o raro consumidor que não aceita um URI com percent-encoding, e é sempre maior.
Perguntas frequentes
Por que não Base64? Todo mundo usa Base64.
Base64 custa 33⅓% fixos sobre qualquer entrada, porque transforma três bytes em quatro. Um SVG é texto, e só `%`, `<`, `>`, `#` e um par de colchetes precisam de fato de escape dentro de um `url()` CSS, então a codificação de URL normalmente fica em torno de 10% acima do arquivo bruto. Ela também continua pesquisável e legível em um diff na folha de estilo. O painel imprime os dois números para o seu arquivo.
Meu ícone sumiu e não há erro em lugar nenhum.
Quase sempre um `#` sem escape. Em `fill="#fff"`, a cerquilha inicia um identificador de fragmento, então a URL é truncada nesse ponto e o navegador busca algo que não é um SVG — em silêncio. Este codificador a escapa. Se você escreveu o URI à mão, essa é a primeira coisa a verificar.
Posso animar ou usar script no SVG dentro do data URI?
Como fundo CSS, não. Um SVG carregado desse jeito roda em um modo restrito e estático: sem scripts, sem `foreignObject`, sem recursos externos, e o CSS da página externa não consegue alcançar o interior dele. A animação declarativa SMIL às vezes roda e às vezes não, dependendo do motor. Se você precisa de qualquer uma dessas coisas, coloque o SVG inline no documento em vez disso.
Quando um data URI é a escolha errada?
Quando o SVG é grande ou usado em mais do que uns dois lugares. Um data URI não pode ser armazenado em cache separadamente, então toda página que carrega a folha de estilo carrega o ícone de novo, e uma ilustração de 30KB inline no CSS são 30KB no caminho crítico. Ícones pequenos e padrões são para o que isto serve; qualquer coisa maior fica melhor como arquivo, ou como sprite.
Pode receber de
Otimizador de SVG
SVG Optimiser
Remove sobras de editor, achata transformações e arredonda a precisão dos caminhos, mostrando a diferença renderizada.
Imagem para Base64 / data URI
Image to Base64 / Data URI
Codifica uma imagem como string Base64 ou como data URI pronto para colar em CSS, HTML ou JSON.
Formatador e minificador de CSS
CSS Beautifier & Minifier
Formata ou minifica CSS sem reordenar nada, preservando exatamente o fluxo de tokens.
Editor e explicador de SVG
SVG Editor and Explainer
Edita um SVG ao lado da renderização ao vivo e explica o arquivo: viewBox e escala, transformações, cada comando de caminho, pintura herdada, bytes desperdiçados e o que quebra num <img>, num data URI ou inline.
Em seguida
Estas aceitam o que esta ferramenta produz, então o resultado pode ir direto.
Formatador e minificador de CSS
CSS Beautifier & Minifier
Formata ou minifica CSS sem reordenar nada, preservando exatamente o fluxo de tokens.
Imagem para Base64 / data URI
Image to Base64 / Data URI
Codifica uma imagem como string Base64 ou como data URI pronto para colar em CSS, HTML ou JSON.
Otimizador de SVG
SVG Optimiser
Remove sobras de editor, achata transformações e arredonda a precisão dos caminhos, mostrando a diferença renderizada.
Conversor de formato de cor
Colour Format Converter
Converte uma cor entre HEX, RGB, HSL, HWB, LAB, LCH e OKLCH e nomeia a cor conhecida mais próxima.
Seletor de cores
Colour Picker
Escolhe uma cor num campo OKLCH, com conta-gotas de tela ou a partir de uma imagem enviada, e a copia em qualquer notação.
Verificador de contraste
Contrast Checker
Pontua um par de cores de texto e fundo contra WCAG 2 e APCA e sugere a cor aprovada mais próxima.