Otimize um SVG no seu navegador e copie-o como arquivo otimizado, como data URI ou como plano de fundo CSS — com tecnologia SVGO e sem nenhum envio. Solte ou cole um ícone, ajuste as configurações e obtenha a menor forma inline para CSS, HTML ou o seu design system.
Como funciona
A ferramenta carrega o SVGO — o otimizador de SVG padrão, o mesmo motor por trás do SVGOMG — uma única vez de uma CDN pública e, depois, é executada inteiramente no seu dispositivo. Ela remove metadados do editor, comentários e dados redundantes, e arredonda as coordenadas para uma precisão à sua escolha. O código otimizado é então oferecido em quatro formas prontas para uso, lado a lado com uma prévia ao vivo e o tamanho antes/depois.
Passos
- Solte um arquivo
.svgna área de upload ou cole o seu código SVG na caixa de origem. - Ajuste as opções de otimização — reduza a Precisão para arquivos menores ou mantenha os padrões seguros.
- Observe a prévia e a redução de tamanho serem atualizadas ao vivo.
- Copie a forma de que você precisa (SVG, data URI ou CSS) ou baixe o
.svgotimizado.
Formas de saída — qual copiar
| Saída | Ideal para | Observações |
|---|---|---|
| SVG otimizado | Commit em um repositório, sistemas de ícones, <img src> | Fonte mais limpa; baixe ou copie |
| Data URI (codificado em URL) | background-image CSS, HTML inline | O menor data URI para SVG (~20–30% abaixo do Base64) |
| Data URI (Base64) | Máxima compatibilidade, ferramentas mais antigas | Maior, mas nunca precisa de escape |
| Trecho CSS | Colar direto em uma folha de estilo | Envolve o data URI codificado em URL em background-image |
Quando usar codificado em URL ou Base64
O SVG é texto, e o Base64 aumenta o texto em cerca de um terço. Para SVG especificamente, o data URI codificado em URL é menor e igualmente válido em CSS e HTML, então é a escolha padrão para um plano de fundo CSS. Recorra ao Base64 apenas quando uma ferramenta de build ou plataforma corromper os caracteres reservados em um URI codificado em URL.
Configurações de otimização
| Configuração | Padrão | O que faz |
|---|---|---|
| Precisão | 3 | Precisão de coordenadas/números (0–8). A alavanca de tamanho mais eficaz; baixa demais distorce as curvas |
| Multipasse | Ligado | Reexecuta as passagens até a saída parar de encolher |
| Remover comentários / metadados | Ligado | Elimina <!-- --> e <metadata> / dados do editor |
| Limpar IDs | Ligado | Minimiza e remove os ids não utilizados |
| Remover viewBox | Desligado | Removê-lo quebra o dimensionamento responsivo — o clássico tiro no pé do SVGO |
| Remover width/height | Desligado | Deixa o CSS dimensionar o ícone via viewBox |
Remover <title> / <desc> | Desligado | Mantidos por padrão para acessibilidade |
| Ordenar atributos | Desligado | Ordem de atributos determinística para melhor gzip e melhores diffs |
Exemplo
Um ícone de 2,1 KB exportado de uma ferramenta de design — cheio de metadados do editor, comentários e coordenadas com 6 casas decimais — normalmente cai para bem abaixo de 1 KB com os padrões, e depois para uma string inline data:image/svg+xml,... que você pode colar diretamente em uma regra CSS sem requisição extra.
Privado por design
Seu SVG nunca sai do seu navegador. Da CDN é buscado apenas o código do SVGO (uma vez, depois em cache); o markup que você cola ou solta é otimizado localmente, então é seguro para ícones internos e ativos de marca ainda não lançados.
