Como funciona o compressor de SVG
Um SVG salvo no Illustrator, Inkscape, Figma ou Sketch geralmente carrega muita coisa que o navegador nunca usa: metadados do editor, comentários, camadas ocultas, valores padrão escritos por extenso e coordenadas com oito ou mais casas decimais. Esta ferramenta remove tudo isso com o SVGO, o otimizador de SVG de código aberto em que a maioria das ferramentas de build e apps de design confia, então o desenho fica igual, mas o arquivo fica menor.
O SVGO faz várias passadas pelo arquivo. Ele junta e encurta caminhos, arredonda números para a precisão escolhida, elimina grupos desnecessários, remove elementos vazios e reescreve cores na forma mais curta. O viewBox é mantido, então o SVG continua escalando para qualquer tamanho, e IDs referenciados por outras partes do arquivo são encurtados com as referências atualizadas, então degradês e máscaras continuam funcionando.
A precisão é a única configuração que importa. Alta mantém três casas decimais, o que é invisível em qualquer tamanho normal e a escolha segura para ícones e logos. Equilibrada mantém duas, e Mínima mantém uma, o que serve para ilustrações grandes, em que um décimo de unidade fica muito abaixo de um pixel, mas pode deformar ícones muito pequenos. Se um resultado parecer estranho, comprima o original de novo com uma precisão maior.
O otimizador, com cerca de 200 KB, carrega na primeira vez que você clica no botão. Seus SVGs são lidos e reescritos dentro desta aba e nunca são enviados, o que importa para logos ainda não lançados e artes de clientes.
Opções do compressor de SVG
| Alta | Três casas decimais. Seguro para ícones, logos e qualquer coisa pequena. |
|---|---|
| Equilibrada | Duas casas decimais. Bom para a maioria das ilustrações. |
| Menor arquivo | Uma casa decimal. Para artes grandes; confira ícones pequenos depois. |
| Mantido | viewBox, IDs referenciados, degradês, máscaras e a aparência do desenho. |
| Removido | Metadados do editor, comentários, elementos ocultos e vazios, precisão redundante. |
Quando usar
Comprima SVGs antes de colocar ícones e logos em um site, onde cada kilobyte pesa no carregamento, antes de incorporar um SVG em HTML ou em um componente React, antes de enviar arquivos de design para um repositório de código ou quando um formulário de upload limita o tamanho do arquivo.
Guarde o SVG original e editável para o seu app de design. A otimização remove dados do editor, como nomes de camadas e guias, então abra o original de novo quando precisar editar a arte.
Sobre o otimizador de SVG
O SVGO, abreviação de SVG Optimizer, é a ferramenta de código aberto por trás da otimização de SVG na maioria das ferramentas de build web e nos apps de design que oferecem exportação otimizada. Ele transforma o SVG em uma árvore, aplica uma série de etapas de limpeza bem testadas e grava tudo de volta, repetindo até não haver mais nada a economizar. Cada etapa que ele faz aqui mantém o desenho com a mesma aparência, e é por isso que seus padrões são confiáveis em produção. A versão usada nesta página roda inteiramente no navegador, carregada da CDN jsDelivr na primeira vez que você usa a ferramenta.
Solução de problemas do compressor de SVG
“já otimizado; devolvido sem alterações”
O SVG já foi otimizado, então nada pôde ser removido sem alterá-lo. O arquivo original é oferecido de volta.
Parte do desenho se moveu ou entortou
Ícones muito pequenos podem se deslocar com precisão baixa. Comprima o original de novo com precisão Alta.
“não é um arquivo SVG”
O arquivo não contém um desenho SVG. Arquivos exportados como SVG que só envolvem uma imagem bitmap também não podem ficar muito menores; comprima a imagem que está dentro deles.
Como usar o compressor de SVG, passo a passo
- Clique em “Escolher arquivos SVG” ou arraste os arquivos para a caixa.
- Ajuste as opções se precisar; os padrões servem para a maioria dos usos.
- Clique em “Comprimir SVG”. O trabalho acontece no seu dispositivo.
- Salve o resultado com o respectivo botão de download.
É seguro fazer isso online?
Na maioria das ferramentas online, “online” significa que seu arquivo é enviado ao servidor de uma empresa, processado lá e guardado por um tempo antes de ser excluído. Aqui não. A página baixa o código da ferramenta para o seu navegador, e seu arquivo é lido e processado dentro da aba, no seu próprio dispositivo. Ele nunca é enviado ao TapToConvert nem a mais ninguém.
Você mesmo pode conferir: depois que a página e o mecanismo carregarem, desligue o Wi-Fi e a ferramenta continua funcionando. Isso também significa que não há fila, nem limite diário, nem limite de tamanho imposto por um servidor; o único limite é a memória que o seu navegador dá a uma única aba.
Perguntas frequentes sobre o compressor de SVG
Comprimir vai mudar a aparência do meu SVG?
Com precisão Alta, não há mudança visível. Precisões menores arredondam mais as coordenadas, o que pode entortar detalhes muito pequenos.
Quanto vai diminuir?
SVGs exportados de apps de design costumam diminuir de 30 a 70 por cento. SVGs que já foram otimizados diminuem pouco ou nada.
Ainda posso editar o SVG comprimido?
Sim, mas nomes de camadas, guias e configurações do editor somem. Guarde o original para editar.
Meus arquivos são enviados?
Não. O SVGO roda no seu navegador, então o SVG nunca sai do seu dispositivo.
É grátis?
Sim. Sem cadastro, sem marca d'água e sem limite de uso. O TapToConvert é mantido por publicidade.
Meus arquivos são enviados?
Não. Tudo acontece dentro da aba do seu navegador, no seu próprio dispositivo.