Pular para o conteúdo principal

SVG para Data URI

Converter SVG em um URI de dados para CSS ou HTML

Crie um URI de dados SVG codificado para URL ou em Base64, além de código pronto para CSS background-image, CSS mask-image e HTML img. Otimize a marcação, confira a prévia e copie o formato necessário sem enviar o SVG.

Solte os arquivos aqui

A editar predefinições para novos ficheiros

Codificação

A codificação para URL escapa apenas os caracteres que uma URL não consegue carregar, então, em arquivos do tamanho de um ícone, costuma ficar 20-30% menor que Base64, e a marcação continua legível. Escolha Base64 quando um passo de build ou um CMS reescreve os sinais de porcentagem.

Codifica também espaços, apóstrofos e parênteses, para o URI ficar seguro dentro de um url(...) sem aspas e dentro de strings Sass ou Less. Custa alguns bytes. Base64 não precisa disso.

Otimização

Executa a predefinição segura do otimizador antes de gerar a saída.

Estilo

Substitui preenchimentos e traços para o ícone herdar a cor do texto ao redor. Útil apenas para desenhos de uma só cor: achata um SVG multicolorido em uma cor única.

Sem pré-visualização. Adicione e selecione arquivos para ver os resultados.

Ainda não há arquivos. Solte arquivos acima ou clique em SELECIONAR ARQUIVOS.

Ainda não há arquivos. Solte arquivos acima ou clique em SELECIONAR ARQUIVOS.

O que é SVG?

SVG (Scalable Vector Graphics) é um formato de imagem vetorial baseado em XML. Em vez de pixels, um SVG descreve matematicamente formas, caminhos, preenchimentos e contornos, podendo ser renderizado em qualquer tamanho sem perda de qualidade.

SVG é o formato vetorial padrão da web. Todos os navegadores modernos oferecem suporte nativo; ele pode ser estilizado com CSS ou animado com JavaScript ou SMIL. Costuma ser compacto para logotipos, ícones e ilustrações, embora arquivos SVG complexos possam ficar grandes.

Quando embutir um SVG como data URI

Um URI de dados coloca o SVG inteiro dentro da folha de estilo ou da marcação, de modo que o navegador não precisa de uma segunda solicitação para desenhá-lo. Isso compensa para pequenas obras de arte decorativas: marcadores, setas, divisas, marcas de caixa de seleção ou uma marca no rodapé. A codificação URL é geralmente mais compacta para texto SVG, enquanto Base64 pode ser útil quando outra ferramenta espera. Uma máscara CSS trata o SVG como um estêncil para a cor de fundo do próprio elemento, portanto, um ícone monocromático pode ser recolorido por estado, por tema ou por componente com uma única declaração CSS.

Como converter um SVG para data URI online

  1. 1

    Solte seus arquivos SVG, ou clique em SELECIONAR ARQUIVOS, para adicioná-los à fila. Até 40 por vez.

  2. 2

    Escolha Codificado para URL ou Base64 e decida se quer otimizar a marcação antes. As cinco saídas, e os tamanhos em bytes, se atualizam conforme você muda as opções.

  3. 3

    Copie o trecho que precisar, ou clique em SALVAR TUDO para baixar um arquivo .css por SVG com as regras de fundo e de máscara.

Privacidade: seus arquivos não saem do navegador

A conversão é executada localmente em seu navegador usando JavaScript e WebAssembly. Não há upload de arquivos ou conversão no servidor, portanto, os arquivos adicionados permanecem no seu dispositivo.

O processamento local ajuda a proteger logotipos confidenciais, documentos internos e obras de arte não divulgadas de clientes. As páginas e o código de conversão são armazenados em cache à medida que você os utiliza, para que as ferramentas que você já abriu possam continuar funcionando sem uma conexão de rede.

Perguntas frequentes

Um data URI codificado para URL é menor que Base64?

Normalmente. Base64 adiciona sobrecarga de codificação aos bytes brutos, enquanto a codificação URL expande apenas os caracteres que devem ser escapados. A diferença exata depende da marcação SVG, então a ferramenta mostra os dois tamanhos e permite compará-los com o arquivo à sua frente.

Como a regra de máscara CSS recolore um ícone?

mask-image usa o SVG como um estêncil: o elemento pinta o próprio background-color, e a máscara decide quais pixels sobrevivem. Como a cor vem do CSS, um mesmo data URI pode ter qualquer cor, e uma variante para hover ou para modo escuro é uma única mudança de background-color. Só funciona para desenhos de uma só cor, já que a máscara mantém o canal alfa e descarta as cores do próprio SVG. O Safari ainda precisa do prefixo -webkit-mask-image, que a regra gerada já inclui.

Quando não devo embutir um SVG como data URI?

Quando o arquivo é grande ou compartilhado. Um URI de dados é copiado em cada folha de estilo ou página que o utiliza, portanto, ele não pode ser armazenado em cache por conta própria e é baixado novamente sempre que o arquivo é alterado. Para obras de arte maiores ou ativos reutilizados em muitas páginas, um arquivo .svg separado com seus próprios cabeçalhos de cache costuma ser a melhor escolha. Um URI de dados também não pode ser estilizado externamente, e é por isso que a regra de máscara gerada é útil para ícones monocromáticos.