SVG → Base64
Transforme um SVG em um data URI que você cola direto no HTML ou no CSS — Base64 e a forma com codificação de URL, geralmente menor, lado a lado.
ou clique para procurar — somente SVG
Funciona em qualquer lugar onde uma URL funciona. Fica sempre cerca de um terço maior que o arquivo original.
A mesma imagem, geralmente menor que o Base64 — e ainda legível, o que ajuda na hora de depurar CSS.
uma requisição a menos
Um data URI coloca a imagem dentro do próprio HTML ou CSS, então o navegador nunca faz uma segunda requisição para buscá-la. Em ícones pequenos, essa é a diferença entre aparecer na hora e aparecer um instante depois.
O custo é o cache: um ícone embutido é baixado de novo com cada página que o contém e não pode ser cacheado sozinho. Embuta o punhado de ícones que importam para a primeira pintura e deixe o resto como arquivos.
três passos
Escolha um arquivo .svg — ele fica no seu dispositivo.
Copie o data URI em Base64 ou com codificação de URL.
Use a tag img ou a regra de fundo CSS já prontas.
respostas rápidas
Para SVG, a codificação de URL costuma ser menor, porque SVG é texto e o Base64 aumenta em cerca de 33% tudo o que toca. A codificação de URL também é legível, então você reconhece a forma pretendida dentro da folha de estilos. Use Base64 quando alguma etapa do processo estragar os caracteres crus.
O Base64 codifica três bytes como quatro caracteres, então um terço do crescimento é inevitável. Passe o arquivo antes pelo otimizador de SVG: metadados do editor e coordenadas com casas decimais demais costumam pesar mais que a codificação.
Dá — o bloco CSS já está pronto para colar. Ele usa a forma com codificação de URL dentro de aspas duplas, e é por isso que o codificador troca as aspas duplas do próprio SVG por aspas simples.
Quase sempre é um `#` sem codificar. Uma cor como `#fff` corta a URL naquele ponto e tudo o que vem depois vira fragmento. A saída daqui já escapa isso — o problema costuma surgir quando o data URI é editado à mão depois.
Não. A codificação é puro trabalho de texto feito no seu navegador.