Otimizador de SVG
Um SVG exportado de uma ferramenta de design é, em boa parte, coisa que não desenha. Vem com os metadados do editor, um bloco de comentários, nomes de camadas, coordenadas com seis casas decimais e atributos que repetem os valores padrão. Isto roda o SVGO — o mesmo otimizador que as ferramentas de build usam — sobre o que você colar ou soltar, e mostra o resultado ao lado do original: a marcação nova, o tamanho antes e depois, quanto dá depois do gzip (que é o que um servidor realmente envia) e as duas versões desenhadas, para ver de relance que nada quebrou. Os controles são os que importam na prática: a precisão das coordenadas, se manter os IDs que seu CSS ou JavaScript possam referenciar, e se remover a largura e a altura para o ícone se ajustar ao contêiner. Tudo acontece na página; o arquivo nunca é enviado.
Tudo acontece no seu navegador — o arquivo nunca é enviado.
Como usar
- Cole seu SVG na caixa, ou solte um arquivo .svg sobre ela.
- Pressione Otimizar. O tamanho, o tamanho com gzip e os dois desenhos aparecem abaixo.
- Baixe a precisão se o arquivo ainda estiver grande — 1 ou 2 casas costumam ser invisíveis.
- Ligue «Manter IDs» se seu CSS ou JavaScript aponta para elementos dentro do SVG.
- Copie o resultado ou baixe como .svg.
Perguntas frequentes
- Meu SVG é enviado para algum lugar?
- Não. O SVGO roda dentro da aba do navegador, sobre o texto da caixa. Nada é enviado a um servidor, e fechar a aba não deixa nenhuma cópia.
- As duas prévias parecem idênticas. É o esperado?
- Sim — é justamente o objetivo. Otimizar remove o que não desenha e reescreve o que desenha numa forma mais curta. Se as prévias diferirem, algo no arquivo dependia do que foi removido; aumente a precisão ou mantenha os IDs e tente de novo.
- Quando devo manter os IDs?
- Quando algo fora do SVG se refere a eles: CSS como `#icon-star path`, JavaScript chamando getElementById, ou um `<use href="#…">` em outro arquivo. Por padrão o SVGO encurta os IDs para economizar bytes, e isso quebra essas referências. Dentro de um arquivo autocontido, as referências internas são atualizadas junto e continuam corretas de qualquer forma.
- O que o controle de precisão faz de fato?
- Arredonda os números dos dados de traçado. Uma coordenada como 12.345678 vira 12.346 em 3 e 12.3 em 1. Para um ícone na tela, uma ou duas casas normalmente não se distinguem e podem cortar um traçado pela metade. Numa ilustração grande ou muito ampliada, arredondar demais aparece como ondulação nas curvas.
- Por que mostrar o tamanho com gzip?
- Porque é isso que realmente trafega. Servidores comprimem SVG, e a contagem crua de bytes exagera a economia — remover espaços repetidos parece dramático em disco e quase não conta depois do gzip. O par comprimido é a comparação honesta.
- Devo remover a largura e a altura?
- Remova se o SVG for usado inline e dimensionado por CSS — assim ele preenche a caixa que receber. Mantenha se for usado numa tag `<img>` ou onde o navegador precise de um tamanho intrínseco, senão pode ser desenhado num tamanho padrão. O viewBox é sempre mantido; sem ele o desenho ficaria sem sistema de coordenadas para escalar.
Ferramentas relacionadas
Comprimir PDF
Reduza um PDF reencodificando as imagens que ele carrega. O texto continua selecionável e pesquisável. Nada é enviado.
Compressor de Imagens
Comprima e redimensione imagens JPEG, PNG e WebP no navegador.
Minificador HTML / CSS / JS
Tire espaços e comentários de HTML, CSS ou JavaScript — veja o tamanho economizado e copie o resultado.
Conversor SVG → PNG
Rasterize SVG para PNG em qualquer tamanho, com fundo transparente ou sólido, tudo no navegador.
Cortar áudio
Corte um trecho de um arquivo de áudio arrastando sobre a onda, adicione fades e baixe em WAV. Nada é enviado.
Inspetor de arquivos HAR (visualizador HTTP Archive)
Solte um arquivo .har exportado das DevTools do Chrome / Firefox / Safari e veja imediatamente todas as requisições — método, status, tamanho, tempo, tipo de conteúdo — com estatísticas, tabelas das mais lentas/maiores e entradas filtráveis/ordenáveis. Tudo executa no seu navegador.