TontonTools

Idioma

English Français Español Português Deutsch 中文

Otimizador SVG

Otimize o código SVG — vetores menores, renderização idêntica.

100% Grátis Sem registro Amigável à privacidade Ferramentas de imagem
Atualizado set 2026
Share X / Twitter Facebook LinkedIn WhatsApp

Como usar Otimizador SVG

  1. Cole o código SVG — direto da exportação da ferramenta de design.
  2. Leia o resultado otimizado e economize tamanho — 30-70% é o normal.
  3. Copie o SVG limpo — incorpore-o em HTML ou salve-o como recurso.
  4. Mantenha em gráficos significativos</strong> — é o rótulo do leitor de tela.</li></ol> </div> </section> <section class="glass-card p-6 sm:p-8"> <h2 class="font-heading text-2xl font-semibold text-gold">O que é Otimizador SVG?</h2> <div class="prose-tonton mt-4 max-w-none text-cream/80 [&_p]:mb-3 [&_strong]:text-cream"> <p>Um otimizador SVG limpa arquivos vetoriais de tudo o que não é desenhado: metadados do editor (Illustrator/Figma/Inkscape exporta liberalmente carimbos), comentários, elementos ocultos, atributos de valor padrão, precisão excessiva de caminho (8 casas decimais onde 2 são suficientes) e agrupamento redundante. A renderização é idêntica; os arquivos geralmente encolhem de 30 a 70%.</p><p>SVGs exportados são notoriamente inchados — um simples ícone deixa uma ferramenta de design com 8 KB, carregando 6 KB de resíduo do editor. Como os SVGs são enviados como código (geralmente embutidos em HTML), esse resíduo é o peso da página e o ruído DOM multiplicado por cada ícone.</p> </div> </section> <section class="glass-card p-6 sm:p-8"> <h2 class="font-heading text-2xl font-semibold text-gold">Sobre o Otimizador SVG</h2> <div class="prose-tonton mt-4 max-w-none text-cream/80 [&_p]:mb-3 [&_strong]:text-cream"> <p>Cole o código SVG, leia a versão otimizada e a economia de tamanho, copie o resultado limpo.</p><p>O que é limpo e por que é seguro: metadados e namespaces do editor (puro resíduo de exportação), comentários e títulos (a menos que você os mantenha para acessibilidade — veja abaixo), elementos invisíveis/vazios, precisão de coordenadas de caminho além da relevância visual e transformações/grupos recolhíveis. O que sobrevive intocado: tudo o que é renderizado — o desenho é diferente em bytes e idêntico a pixels.</p><p>Notas de implantação: SVGs otimizados lindamente embutidos em HTML (ícones sem solicitações — compare a rota Base64, que o SVG geralmente supera) e uma ressalva de acessibilidade — os elementos <code><title></code> servem para leitores de tela, portanto, mantenha-os ou adicione-os novamente em gráficos significativos (não decorativos). Para sistemas de ícones, otimize uma vez no momento do commit; SVGO no pipeline de construção é o irmão automatizado desta ferramenta. O código é processado no seu navegador.</p> </div> </section> <section class="glass-card p-6 sm:p-8" x-data="{ active: null }"> <h2 class="font-heading text-2xl font-semibold text-gold">Perguntas Frequentes</h2> <div class="mt-4 divide-y divide-gold/10"> <div class="py-3"> <button @click="active === 0 ? active = null : active = 0" class="flex w-full items-center justify-between gap-4 text-left"> <span class="font-medium text-cream">A otimização mudará a aparência do meu SVG?</span> <svg class="h-5 w-5 shrink-0 text-gold transition" :class="active === 0 && 'rotate-180'" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/> </svg> </button> <div x-show="active === 0" x-collapse x-cloak class="pt-2 text-sm text-cream/70"> Não — apenas o conteúdo sem renderização e a precisão redundante são removidos. A saída do desenho é idêntica em pixels; diferencie os resultados renderizados se você quiser confirmá-los. </div> </div> <div class="py-3"> <button @click="active === 1 ? active = null : active = 1" class="flex w-full items-center justify-between gap-4 text-left"> <span class="font-medium text-cream">Por que as exportações de SVG de ferramentas de design estão tão inchadas?</span> <svg class="h-5 w-5 shrink-0 text-gold transition" :class="active === 1 && 'rotate-180'" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/> </svg> </button> <div x-show="active === 1" x-collapse x-cloak class="pt-2 text-sm text-cream/70"> Os editores incorporam seus dados de trabalho – nomes de camadas, namespaces de editores, blocos de metadados, precisão máxima – para que o arquivo seja reaberto fielmente na ferramenta. A web não precisa de nada disso; otimização é deletar a bagagem do editor. </div> </div> <div class="py-3"> <button @click="active === 2 ? active = null : active = 2" class="flex w-full items-center justify-between gap-4 text-left"> <span class="font-medium text-cream">De quanta precisão de caminho eu realmente preciso?</span> <svg class="h-5 w-5 shrink-0 text-gold transition" :class="active === 2 && 'rotate-180'" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/> </svg> </button> <div x-show="active === 2" x-collapse x-cloak class="pt-2 text-sm text-cream/70"> 1-2 casas decimais para viewBoxes de ícones típicos - a diferença visual das coordenadas de 7 decimais é literalmente subpixel. A redução de precisão costuma ser a maior vitória de bytes. </div> </div> <div class="py-3"> <button @click="active === 3 ? active = null : active = 3" class="flex w-full items-center justify-between gap-4 text-left"> <span class="font-medium text-cream">O SVG embutido é melhor que uma tag <img>?</span> <svg class="h-5 w-5 shrink-0 text-gold transition" :class="active === 3 && 'rotate-180'" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/> </svg> </button> <div x-show="active === 3" x-collapse x-cloak class="pt-2 text-sm text-cream/70"> Inline para ícones que você estiliza/anima com CSS (o tema currentColor é o recurso matador) e para pular solicitações; <img>/CSS-url para ilustrações grandes ou repetidas onde o cache vence. O código otimizado torna o inlining barato de qualquer maneira. </div> </div> <div class="py-3"> <button @click="active === 4 ? active = null : active = 4" class="flex w-full items-center justify-between gap-4 text-left"> <span class="font-medium text-cream">E quanto aos elementos de acessibilidade como <title>?</span> <svg class="h-5 w-5 shrink-0 text-gold transition" :class="active === 4 && 'rotate-180'" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/> </svg> </button> <div x-show="active === 4" x-collapse x-cloak class="pt-2 text-sm text-cream/70"> Mantenha-os em gráficos significativos – <title> é o que os leitores de tela anunciam. Em vez disso, os ícones decorativos levam aria-hidden="true". Otimize os bytes, não a semântica. </div> </div> </div> </section> </div> <div class="space-y-6"> <aside class="glass-card p-5"> <h2 class="font-heading text-xl font-semibold text-gold">Ferramentas Relacionadas</h2> <ul class="mt-3 divide-y divide-gold/10"> <li> <a href="https://tonton-tools.com/pt/png-to-webp" class="flex items-center gap-3 py-2.5 text-sm text-cream/75 transition hover:text-gold"> <svg class="h-4 w-4 shrink-0 text-gold/70" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"/></svg> <span class="truncate">PNG para WebP</span> </a> </li> <li> <a href="https://tonton-tools.com/pt/background-remover" class="flex items-center gap-3 py-2.5 text-sm text-cream/75 transition hover:text-gold"> <svg class="h-4 w-4 shrink-0 text-gold/70" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"/></svg> <span class="truncate">Removedor de fundo</span> </a> </li> <li> <a href="https://tonton-tools.com/pt/jpg-to-webp" class="flex items-center gap-3 py-2.5 text-sm text-cream/75 transition hover:text-gold"> <svg class="h-4 w-4 shrink-0 text-gold/70" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"/></svg> <span class="truncate">JPG para WebP</span> </a> </li> <li> <a href="https://tonton-tools.com/pt/rotate-image" class="flex items-center gap-3 py-2.5 text-sm text-cream/75 transition hover:text-gold"> <svg class="h-4 w-4 shrink-0 text-gold/70" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"/></svg> <span class="truncate">Girar imagem</span> </a> </li> <li> <a href="https://tonton-tools.com/pt/image-enlarger" class="flex items-center gap-3 py-2.5 text-sm text-cream/75 transition hover:text-gold"> <svg class="h-4 w-4 shrink-0 text-gold/70" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"/></svg> <span class="truncate">Ampliador de imagem</span> </a> </li> <li> <a href="https://tonton-tools.com/pt/png-to-gif" class="flex items-center gap-3 py-2.5 text-sm text-cream/75 transition hover:text-gold"> <svg class="h-4 w-4 shrink-0 text-gold/70" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"/></svg> <span class="truncate">PNG para GIF</span> </a> </li> </ul> <a href="https://tonton-tools.com/pt/tools/image-tools" class="mt-3 inline-block text-xs font-medium text-gold hover:underline"> Ver tudo Ferramentas de imagem → </a> </aside> </div> </div> <div class="my-6 flex justify-center" aria-label="Advertisement"> <ins class="adsbygoogle block w-full" style="display:block" data-ad-client="ca-pub-1594540167961527" data-ad-slot="6784859214" data-ad-format="auto" data-full-width-responsive="true"></ins> <script>(adsbygoogle = window.adsbygoogle || []).push({});</script> </div> </div> </main> <footer class="relative mt-20 border-t border-gold/15 bg-charcoal-surface/40"> <div class="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-gold/50 to-transparent"></div> <div class="mx-auto max-w-7xl px-4 py-14 sm:px-6"> <div class="grid gap-10 md:grid-cols-4"> <div class="md:col-span-1"> <a href="https://tonton-tools.com/pt" class="inline-block transition hover:opacity-90" aria-label="TontonTools home"> <img src="https://tonton-tools.com/images/logo.png" alt="TontonTools" width="1116" height="269" class="h-11 w-auto"> </a> <p class="mt-4 text-sm text-cream/60"> TontonTools is a free, ad-supported collection of 330+ online tools for SEO professionals, developers, YouTubers, content creators, and students. </p> </div> <div class="md:col-span-2 grid grid-cols-2 gap-6 sm:grid-cols-3"> <a href="https://tonton-tools.com/pt/tools/text-tools" class="text-sm text-cream/70 transition hover:text-gold">Ferramentas de texto</a> <a href="https://tonton-tools.com/pt/tools/youtube-tools" class="text-sm text-cream/70 transition hover:text-gold">Ferramentas do YouTube</a> <a href="https://tonton-tools.com/pt/tools/seo-tools" class="text-sm text-cream/70 transition hover:text-gold">Ferramentas de SEO</a> <a href="https://tonton-tools.com/pt/tools/domain-ip-tools" class="text-sm text-cream/70 transition hover:text-gold">Ferramentas de domínio e IP</a> <a href="https://tonton-tools.com/pt/tools/website-management" class="text-sm text-cream/70 transition hover:text-gold">Gerenciamento de site</a> <a href="https://tonton-tools.com/pt/tools/web-development" class="text-sm text-cream/70 transition hover:text-gold">Desenvolvimento Web</a> <a href="https://tonton-tools.com/pt/tools/image-tools" class="text-sm text-cream/70 transition hover:text-gold">Ferramentas de imagem</a> <a href="https://tonton-tools.com/pt/tools/calculators" class="text-sm text-cream/70 transition hover:text-gold">Calculadoras</a> <a href="https://tonton-tools.com/pt/tools/unit-converters" class="text-sm text-cream/70 transition hover:text-gold">Conversores de unidades</a> </div> <div> <h3 class="font-heading text-lg text-gold">Empresa</h3> <ul class="mt-4 space-y-2 text-sm"> <li><a href="https://tonton-tools.com/pt/about" class="text-cream/70 hover:text-gold">Sobre</a></li> <li><a href="https://tonton-tools.com/pt/contact" class="text-cream/70 hover:text-gold">Contato</a></li> <li><a href="https://tonton-tools.com/pt/blog" class="text-cream/70 hover:text-gold">Blogue</a></li> <li><a href="https://tonton-tools.com/pt/developers" class="text-cream/70 hover:text-gold">API do Desenvolvedor</a></li> <li><a href="https://tonton-tools.com/pt/report-tool" class="text-cream/70 hover:text-gold">Relatar uma Ferramenta</a></li> </ul> <h3 class="mt-6 font-heading text-lg text-gold">Jurídico</h3> <ul class="mt-4 space-y-2 text-sm"> <li><a href="https://tonton-tools.com/pt/privacy-policy" class="text-cream/70 hover:text-gold">Política de Privacidade</a></li> <li><a href="https://tonton-tools.com/pt/terms-of-service" class="text-cream/70 hover:text-gold">Termos de Serviço</a></li> <li><a href="https://tonton-tools.com/pt/disclaimer" class="text-cream/70 hover:text-gold">Aviso de responsabilidade</a></li> </ul> </div> </div> <div class="mt-10 flex flex-col items-center justify-between gap-3 border-t border-gold/10 pt-6 text-sm text-cream/60 sm:flex-row"> <p>© 2026 TontonTools. Todos os direitos reservados.</p> <p>Construído pela Tonton Business Digital Agency</p> </div> </div> </footer> <div x-data="{ show: false }" x-init="show = ! localStorage.getItem('cookie_consent')" x-show="show" x-cloak x-transition.duration.300ms class="fixed inset-x-0 bottom-0 z-50 p-3 sm:p-4"> <div class="glass-card mx-auto flex max-w-4xl flex-col items-center gap-3 p-4 sm:flex-row sm:gap-4"> <p class="flex-1 text-center text-sm text-cream/70 sm:text-left"> We use cookies for analytics and to keep the tools free via ads. See our <a href="https://tonton-tools.com/pt/privacy-policy" class="text-gold hover:underline">Privacy Policy</a>. </p> <div class="flex shrink-0 gap-2"> <button @click="localStorage.setItem('cookie_consent','declined'); show=false" class="btn-ghost text-sm">Decline</button> <button @click="localStorage.setItem('cookie_consent','accepted'); window.loadAnalytics && window.loadAnalytics(); show=false" class="btn-gold text-sm">Accept</button> </div> </div> </div> <script> // Fire a GA4 "tool_used" event the first time a visitor interacts with this tool. (function () { var section = document.getElementById('tool-interface'); if (!section) return; var fired = false; function fire() { if (fired) return; fired = true; window.trackToolUsed && window.trackToolUsed('svg-optimizer', 'image-tools'); } ['input', 'change', 'click', 'submit'].forEach(function (ev) { section.addEventListener(ev, fire, { passive: true }); }); })(); </script> </body> </html>