Codificador de URL SVG
Converta a marcação SVG em um URI de dados pronto para CSS e decodifique URIs de dados de volta para SVG.
Codificador de URL SVG
Cole um SVG e obtenha um URI de dados que você pode colocar diretamente no CSS, pronto para imagem de fundo ou máscara. Em vez de base64, o codificador usa a abordagem compacta de codificação de URL: ele troca aspas duplas por aspas simples, recolhe os espaços em branco e codifica por cento apenas os caracteres que realmente precisam deles, para que o resultado permaneça curto e legível por humanos. Isso mantém sua folha de estilo menor que um blob base64 e ainda permite reconhecer as formas dentro do URI.
Três formatos de saída cobrem os casos comuns. A regra CSS agrupa o URI de dados em imagem de fundo: url("…"); para que você possa colar uma declaração inteira. O URI de dados simples fornece apenas o valor de uma propriedade personalizada, um <img> src ou uma máscara SVG. O formulário base64 produz um URI data:image/svg+xml;base64 seguro para UTF-8 para ferramentas ou etapas de construção que esperam essa codificação, incluindo SVGs com emoji ou nós de texto acentuados. A opção de tipo MIME abre o mesmo codificador a qualquer conteúdo: escolha text/plain, text/html, text/css, application/json ou outro tipo e o que colar torna-se um data URI desse tipo. Só image/svg+xml comprime os espaços e troca as aspas duplas por simples, porque esses dois truques encurtam a marcação mas estragam o texto simples e o JSON.
Mude a direção para decodificação e a ferramenta reverte qualquer uma das três formas de volta à marcação SVG bruta. Cole uma regra CSS, um URI de dados simples ou base64, e ele extrai o SVG para que você possa editar um ícone que só existe dentro de uma folha de estilo. A contagem mostra o tamanho da entrada, o tamanho da saída e a alteração percentual, para que você possa ver rapidamente se a codificação diminuiu ou aumentou o ícone. O URI também pode sair dentro de uma etiqueta <img> ou <link>, com charset explícito no cabeçalho.
Tudo roda no seu navegador. Sua marcação SVG nunca é carregada, então você pode codificar ícones privados, logotipos e ativos internos sem que eles saiam do seu dispositivo.