SVG para Base64 e Data URI
Incorpore SVGs direto no CSS ou no HTML. Receba data URIs codificados para URL e em Base64, trechos de CSS prontos e uma tag <img>.
- Sem upload
- Funciona offline
- Grátis, sem cadastro
- Seus arquivos não saem do navegador
Solte arquivos SVG aqui
ou cole código SVG no editor. Você pode abrir vários arquivos de uma vez.
Seu SVG fica neste dispositivo. Nada é enviado.
Como usar o Conversor de SVG para Base64 / Data URI
- 1
Cole seu SVG
Cole o código SVG ou solte um arquivo. Você também pode colar um data URI existente para decodificá-lo de volta em SVG.
- 2
Escolha uma saída
Escolha um data URI codificado para URL (normalmente o menor), Base64, fundo CSS, máscara CSS ou uma tag HTML <img>.
- 3
Copie
Copie o trecho para sua folha de estilo ou seu HTML. O tamanho de cada opção aparece ao lado.
Quando incorporar um SVG como data URI
Um data URI coloca a imagem inteira dentro do seu CSS ou HTML, então o navegador não faz uma requisição separada para ela. É ótimo para gráficos pequenos e muito usados: ícones no CSS, checkboxes e setas de select personalizadas, padrões de fundo e placeholders.
Para ilustrações grandes, um arquivo .svg separado costuma ser melhor: o navegador pode guardá-lo em cache separadamente e ele não engorda sua folha de estilo.
SVG codificado para URL ou Base64?
O Base64 transforma cada 3 bytes em 4 caracteres, então sempre acrescenta cerca de 33% ao tamanho. Um SVG codificado para URL só escapa os poucos caracteres inseguros em uma URL (<, >, #, % e aspas), então continua legível e normalmente é menor, principalmente depois do gzip. O viewsvg mostra os dois, com o tamanho, para você escolher.
Tudo o que você precisa para trabalhar com SVG
O Conversor de SVG para Base64 / Data URI faz parte de um único espaço para ver, editar, otimizar e converter arquivos SVG, sem cadastro, sem anúncios e sem upload.
Prévia instantânea
Zoom de até 6400%, movimentação, ajuste à tela e fundo transparente, branco, preto ou de qualquer cor.
Editor de código ao vivo
Realce de sintaxe, marcação de erros por linha, formatar e minificar, busca e histórico completo de desfazer.
Contorno e grade de pixels
Veja cada traçado no modo contorno e confira o alinhamento dos pixels com a grade ao dar zoom.
Inspecionar
Tamanho do arquivo e com gzip, viewBox, árvore de elementos com destaque e troca de cores com um clique.
Otimizar com SVGO
Reduza arquivos com prévias de antes e depois e precisão ajustável. Otimize todos os arquivos abertos de uma vez.
PNG, JPG, WebP e ICO
Exporte em qualquer tamanho até 16384 px, com transparência, ou copie o PNG direto para a área de transferência.
React, Vue e Svelte
Componentes JSX/TSX, React Native, Vue e Svelte limpos, com suporte a currentColor e props.
Vários arquivos de uma vez
Abra muitos SVGs em abas e otimize em lote ou baixe tudo em um ZIP de SVGs ou PNGs.
Privado e offline
Sem upload, sem conta. Seu trabalho fica salvo no navegador e o app funciona offline depois da primeira visita.
Perguntas frequentes
Devo usar data URI de SVG em Base64 ou codificado para URL?
Para SVG, um data URI codificado para URL costuma ser de 20% a 30% menor que o Base64 e comprime melhor com gzip. O Base64 é útil quando caracteres especiais causam problemas.
Como mudo a cor de um ícone SVG usado no CSS?
Use o trecho de máscara CSS. O SVG vira uma máscara preenchida pelo background-color do elemento (currentColor por padrão), então você muda a cor do ícone com CSS.
Posso converter um data URI de volta para SVG?
Sim. Cole um URI data:image/svg+xml ou uma string Base64 pura no editor e o viewsvg decodifica para SVG automaticamente.
Meus arquivos SVG são enviados para algum lugar?
Não. O viewsvg roda inteiramente no seu navegador. Os arquivos são lidos, exibidos, otimizados e convertidos no seu dispositivo, e nada é enviado a um servidor. Depois da primeira visita, ele funciona até offline.
O viewsvg é grátis?
Sim. Todos os recursos são gratuitos, sem cadastro, sem marca d’água e sem limite de arquivos.