Utilia
Categorias ▾
Idioma: pt ▾

Otimizador de SVG

Otimiza e minifica ficheiros SVG online com o SVGO, no teu navegador. Escolhe uma predefinição, compara visualmente e vê a poupança, com e sem gzip.

Plugins

Remover o viewBox impede o desenho de se adaptar ao tamanho, e encurtar ou remover IDs estraga as ligações de CSS, JavaScript, <use> ou âncoras que lhes façam referência. Mantém a predefinição Segura para SVG usados em código, sprites ou animações.

Como otimizar um SVG

  1. Larga um ficheiro SVG na zona de largar ou clica nela para escolher um. Também podes colar o código na caixa Código SVG.
  2. Escolhe uma Predefinição: Segura, Equilibrada (a predefinida) ou Máxima. A lista Plugins mostra exatamente que passos cada predefinição ativa.
  3. Ajusta se for preciso: a Precisão decimal (de 0 a 8 algarismos), Várias passagens e Formatar (código indentado) se quiseres código legível. Assim que alteras um plugin, a precisão ou as passagens, a predefinição passa a Personalizada.
  4. Clica em Otimizar SVG. Um ficheiro largado é otimizado de imediato e, depois de haver um resultado, cada alteração das definições volta a executar a otimização automaticamente.
  5. Confirma os valores Tamanho original, Tamanho otimizado, Poupança e Com gzip e compara os dois desenhos lado a lado.
  6. Clica em Copiar para copiar o Código SVG otimizado, ou em Transferir SVG otimizado para o guardar como name.min.svg (com o nome do teu ficheiro).

A otimização é feita pelo SVGO 4, o otimizador de SVG de código aberto (MIT) de referência, usado na maioria das ferramentas de build para a web. A sua versão para navegador é carregada no primeiro clique e corre inteiramente no teu dispositivo: o teu SVG nunca é enviado.

Porque é que os SVG dos programas de design são tão pesados

Um SVG exportado do Illustrator, Inkscape, Figma ou Sketch traz muito mais do que o desenho. Os editores acrescentam os seus próprios namespaces e atributos (nomes de camadas, guias, definições de exportação), um bloco <metadata>, comentários como «Generator: Adobe Illustrator», coordenadas com seis ou mais casas decimais, grupos que contêm um único elemento e cores escritas por extenso como #ffffff. Nada disto muda o que o navegador desenha. O SVGO remove tudo isso, arredonda os números, reescreve os dados dos caminhos com comandos mais curtos, encurta as cores e funde ou desfaz elementos redundantes. Uma redução de 40 a 60 % é comum em ícones e ilustrações exportados.

Predefinições e plugins arriscados

  • Segura executa a predefinição padrão do SVGO, mas mantém os IDs, os <desc>, os caminhos separados e as regras <style>, com 3 casas decimais e uma passagem. Usa-a para SVG referenciados a partir de CSS ou JavaScript, sprites e animações.
  • Equilibrada é a predefinição padrão do SVGO, com 3 casas decimais e várias passagens. Serve para a maioria dos ícones e ilustrações mostrados como imagens.
  • Máxima acrescenta Remover </strong>, <strong>Remover scripts e atributos de eventos</strong>, <strong>Remover width/height (manter viewBox)</strong> e <strong>Substituir xlink:href por href</strong>, com 2 casas decimais e várias passagens.</li> </ul> <p>Nenhuma predefinição remove o viewBox. <strong>Remover viewBox</strong> existe apenas para casos especiais: sem ele, o desenho deixa de se adaptar ao tamanho que lhe dás em CSS.</p> <p>Fica a saber o que os outros plugins podem estragar:</p> <ul> <li><strong>Encurtar e remover IDs não usados</strong> muda o nome de IDs como <code>#icon-home</code> para <code>a</code>. Qualquer seletor CSS, consulta JavaScript, referência de sprite <code><use href="#…"></code>, âncora de página ou animação SMIL/CSS que aponte para o nome antigo deixa de funcionar.</li> <li><strong>Remover <title></strong> e <strong>Remover <desc></strong> apagam o nome e a descrição acessíveis. Mantém-nos em ícones e gráficos com significado que os leitores de ecrã têm de anunciar.</li> <li>Uma <strong>Precisão decimal</strong> baixa pode deformar ícones pequenos: as curvas ondulam e os contornos deslocam-se. Verifica sempre a comparação visual; 3 é um valor por omissão seguro.</li> <li><strong>Fundir caminhos</strong> junta caminhos adjacentes num só, por isso um efeito de hover ou uma animação que visava um único caminho perde o seu alvo.</li> </ul> <h2>Dicas</h2> <ul> <li>Guarda uma cópia mestre não otimizada para edição; trata o <code>.min.svg</code> como código compilado.</li> <li>Ativa o gzip ou o brotli no teu servidor: formatos de texto como o SVG comprimem muito bem, e o valor <strong>Com gzip</strong> mostra o que os visitantes transferem realmente (aparece quando o teu navegador suporta <code>CompressionStream</code>).</li> <li>Um SVG incorporado no HTML pode ser estilizado com CSS e animado, mas não é guardado em cache à parte; um SVG num <code><img></code> é guardado em cache, mas não pode ser estilizado a partir da página.</li> </ul></div> <section class="mt-10" aria-labelledby="faq"> <h2 id="faq" class="text-2xl font-semibold">Perguntas frequentes</h2> <div class="mt-4 divide-y divide-line rounded-xl border border-line bg-surface"> <details class="faq group"> <summary>O meu SVG é enviado para um servidor?</summary> <div class="prose px-5 pb-5"><p>Não. O SVGO corre no teu navegador. A única transferência é o próprio código do otimizador, da primeira vez que otimizas.</p></div> </details> <details class="faq group"> <summary>Porque é que a pré-visualização é mostrada como imagens?</summary> <div class="prose px-5 pb-5"><p>O SVG é um formato de documento que pode conter JavaScript e carregar ficheiros externos. As duas pré-visualizações são apresentadas como <code><img></code> a partir de URL blob locais e, nesse modo, os navegadores nunca executam scripts nem obtêm recursos externos, por isso pré-visualizar aqui um SVG de origem duvidosa é seguro. O código otimizado continua a conter os scripts que existirem, a menos que <strong>Remover scripts e atributos de eventos</strong> esteja ativo (está na predefinição <strong>Máxima</strong>).</p></div> </details> <details class="faq group"> <summary>O meu SVG otimizado deixou de se adaptar ao tamanho. O que aconteceu?</summary> <div class="prose px-5 pb-5"><p>O viewBox foi provavelmente removido, ou por <strong>Remover viewBox</strong> ou antes, por outra ferramenta. Volta a otimizar o original com esse plugin desativado.</p></div> </details> <details class="faq group"> <summary>Porque é que o meu sprite de ícones ou a minha animação deixou de funcionar?</summary> <div class="prose px-5 pb-5"><p><strong>Encurtar e remover IDs não usados</strong> ou <strong>Fundir caminhos</strong> alteraram os elementos a que o teu código faz referência. Usa a predefinição <strong>Segura</strong>, que mantém ambos.</p></div> </details> <details class="faq group"> <summary>O ficheiro otimizado não é mais pequeno. Porquê?</summary> <div class="prose px-5 pb-5"><p>O SVG provavelmente já está minificado. Experimenta <strong>Máxima</strong> ou uma <strong>Precisão decimal</strong> mais baixa, e desativa <strong>Formatar (código indentado)</strong>.</p></div> </details> </div> </section> <section class="mt-10" aria-labelledby="related"> <h2 id="related" class="text-2xl font-semibold">Ferramentas relacionadas</h2> <ul class="card-grid mt-4"><li><a class="card" href="/pt/svg-para-png/"> <span class="card-title">SVG para PNG</span> <span class="card-text">Converte SVG para PNG, JPG ou WebP no teu navegador, com qualquer largura, altura, escala ou DPI e fundo transparente ou de cor. Em lote e ZIP, sem envio.</span> </a></li> <li><a class="card" href="/pt/imagem-para-svg/"> <span class="card-title">Converter imagem em SVG (vetorizar)</span> <span class="card-text">Converte um logótipo ou desenho PNG ou JPG em caminhos vetoriais SVG no teu navegador. Predefinições, número de cores e filtro de manchas, sem envio.</span> </a></li> <li><a class="card" href="/pt/comprimir-imagem/"> <span class="card-title">Comprimir imagens</span> <span class="card-text">Comprime imagens JPG, PNG e WebP com um cursor de qualidade, compara os tamanhos antes e depois e processa fotos em lote, sem as enviar.</span> </a></li> <li><a class="card" href="/pt/formatar-css/"> <span class="card-title">Formatador e minificador de CSS</span> <span class="card-text">Formata CSS desarrumado com uma indentação limpa ou minifica-o com o csso, e vê o tamanho antes e depois. Corre no navegador; nada é enviado.</span> </a></li> </ul> </section> </article> <div class="hidden lg:block"> <div class="sticky top-24"><aside class="ad-slot ad-slot-sidebar" data-ad-slot="sidebar" aria-label="Publicidade"><span class="ad-label">Publicidade</span></aside> </div> </div> </div> </main> <footer class="mt-16 border-t border-line bg-surface"> <div class="mx-auto grid max-w-6xl gap-8 px-4 py-10 sm:grid-cols-3 text-sm"> <div> <p class="font-semibold">Utilia</p> <p class="mt-2 text-muted">Ferramentas online grátis que funcionam no teu navegador. Os teus dados ficam no teu dispositivo.</p> </div> <nav aria-label="Categorias"> <p class="font-semibold">Ferramentas</p> <ul class="mt-2 space-y-1"><li><a class="link-muted" href="/pt/ferramentas-de-texto/">Ferramentas de texto</a></li><li><a class="link-muted" href="/pt/ferramentas-para-programadores/">Ferramentas para programadores</a></li><li><a class="link-muted" href="/pt/web-seo-marketing/">Web, SEO e marketing</a></li><li><a class="link-muted" href="/pt/cores-design/">Cores e design</a></li><li><a class="link-muted" href="/pt/editar-imagens/">Edição de imagens</a></li><li><a class="link-muted" href="/pt/pdf-documentos/">PDF e documentos</a></li><li><a class="link-muted" href="/pt/calculadoras-matematicas/">Calculadoras de matemática</a></li><li><a class="link-muted" href="/pt/calculadoras-financeiras/">Calculadoras financeiras</a></li><li><a class="link-muted" href="/pt/data-hora/">Data e hora</a></li><li><a class="link-muted" href="/pt/conversor-de-unidades/">Conversores de unidades</a></li><li><a class="link-muted" href="/pt/calculadoras-de-saude/">Saúde e fitness</a></li><li><a class="link-muted" href="/pt/casa-cozinha-carro/">Casa, bricolage, cozinha e carro</a></li><li><a class="link-muted" href="/pt/geradores/">Geradores</a></li><li><a class="link-muted" href="/pt/testes-de-dispositivo/">Testes de dispositivo e navegador</a></li><li><a class="link-muted" href="/pt/audio-video/">Áudio e vídeo</a></li><li><a class="link-muted" href="/pt/educacao-linguas/">Educação e línguas</a></li><li><a class="link-muted" href="/pt/jogos/">Jogos</a></li></ul> </nav> <nav aria-label="Informações"> <p class="font-semibold">Informações</p> <ul class="mt-2 space-y-1"> <li><a class="link-muted" href="/pt/sobre-nos/">Sobre nós</a></li> <li><a class="link-muted" href="/pt/contacto/">Contacto</a></li> <li><a class="link-muted" href="/pt/privacidade/">Política de privacidade</a></li> <li><a class="link-muted" href="/pt/termos-de-utilizacao/">Termos de utilização</a></li> </ul> </nav> </div> <p class="border-t border-line py-4 text-center text-xs text-muted">© 2026 Utilia</p> </footer> </body> </html>