O que é realmente cada formato

Antes de comparar, ajuda entender o que cada formato armazena — porque eles resolvem problemas fundamentalmente diferentes.

SVG — Scalable Vector Graphics

SVG é uma linguagem de marcação baseada em XML, não uma grade de pixels. Descreve formas, caminhos e texto como instruções matemáticas. Um círculo em SVG é literalmente <circle cx="50" cy="50" r="40"/>. Renderiza perfeitamente em qualquer tamanho e é totalmente acessível para leitores de tela.

PNG — Portable Network Graphics

PNG armazena uma grade de pixels sem perdas com suporte total ao canal alfa. Destaca-se em imagens com bordas nítidas, cores planas e texto. A desvantagem: os tamanhos de arquivo são grandes para conteúdo fotográfico.

WebP — o formato moderno do Google

WebP suporta compressão com e sem perdas, transparência e animação. No modo sem perdas, tipicamente produz arquivos 25–35% menores que PNGs equivalentes. O suporte dos navegadores agora é universal no Chrome, Firefox, Safari (desde 2020) e Edge.

Matriz de casos de uso: qual formato vence onde

O formato correto depende do tipo de asset, não de uma preferência universal:

Tipo de assetSVGPNGWebP
Logo / wordmark✅ Melhor⚠ Alternativa❌ Evitar
Ícone UI (inline)✅ Melhor⚠ Aceitável❌ Evitar
App icon / favicon✅ Fonte✅ Bom (ICO)❌ Sem suporte
Ilustração plana✅ Melhor⚠ Arquivos grandes✅ Bom
Captura / UI❌ Ferramenta errada✅ Melhor✅ Excelente
Fotografia❌ Ferramenta errada⚠ Muito pesado✅ Melhor
Gráfico animado✅ CSS/JS❌ Sem animação✅ WebP anim
Imagem de e-mail❌ Suporte fraco✅ Universal⚠ Suporte limitado

Por que SVG é superior para logos e ícones

O argumento contra SVG é geralmente o tamanho do arquivo. Mas para logos e ícones de UI, esse argumento não se aplica:

  • Independência de resolução: um único arquivo SVG serve para retina mobile, desktop 4K e impressão em grande formato. Com PNG você precisa de variantes @1x, @2x, @3x.
  • Tematização CSS: os caminhos SVG herdam currentColor, então um único arquivo de ícone se adapta ao modo escuro e estados de hover sem nova exportação.
  • Interação inline: incorporado em HTML, os elementos SVG fazem parte do DOM — você pode animar caminhos individuais e anexar ouvintes de eventos.
  • Acessibilidade: SVG suporta elementos <title> e <desc> que os leitores de tela consomem diretamente.
  • Eficiência de compressão: um SVG de logo típico comprimido com gzip tem 1–4 KB. Um PNG @2x do mesmo logo raramente fica abaixo de 20 KB.

Quando você precisa de uma versão raster — para uma plataforma que não aceita SVG, para uma imagem OG, ou para um fornecedor de impressão — a conversão está a um clique.

Ferramenta gratuita Conversor SVG para PNG Converta qualquer SVG em um PNG perfeito em pixels em qualquer resolução. Suporta fundo transparente e fatores de escala personalizados.

Quando WebP supera PNG em fotografia e ilustrações

Para conteúdo fotográfico e ilustrações raster complexas, o WebP tem uma vantagem clara sobre o PNG e uma vantagem competitiva sobre o JPEG:

A diferença de compressão não é acadêmica. Uma imagem hero de 800 KB em PNG tipicamente fica abaixo de 200 KB como WebP com perdas com qualidade perceptualmente idêntica. Impacto direto nos Core Web Vitals — especificamente o Largest Contentful Paint (LCP).

  • WebP com perdas vs JPEG: mesma qualidade percebida, ~25–30% menor tamanho de arquivo. Para conteúdo fotográfico, prefira WebP a JPEG em todos os contextos modernos.
  • WebP sem perdas vs PNG: mesma fidelidade perfeita de pixels, ~25–35% menor. Para capturas de tela e ilustrações planas com alfa, WebP sem perdas é a melhor escolha.
  • WebP animado vs GIF: compressão dramaticamente melhor para animação. A animação WebP é a resposta moderna se você precisa de animação sem JavaScript.
  • A exceção PNG: mantenha PNG para assets que precisam de máxima compatibilidade com ferramentas — exportações do Figma, arquivos fonte do Photoshop e workflows de entrega de design.

A principal ressalva: WebP tem suporte limitado em alguns clientes de e-mail e versões mais antigas dos aplicativos nativos da Apple. Para entrega web, não há mais motivo para escolher PNG em vez de WebP.

A exceção favicon: por que ICO ainda existe

Os favicons seguem regras diferentes. O formato clássico favicon.ico incorpora múltiplas resoluções (16×16, 32×32, 48×48) em um único arquivo. A prática moderna empilha três declarações: ICO para navegadores legados, PNG 192×192 para Android, e favicon SVG para navegadores que o suportam.

A fonte para todos esses deveria ser o seu SVG original. Um gerador de favicon adequado o converte em todos os formatos necessários em uma única etapa.

Ferramenta gratuita Gerador de Favicon Carregue um SVG ou PNG e obtenha um pacote de favicon completo: ICO, 16×16, 32×32, 192×192, 512×512 e Apple Touch icon — pronto para colar no seu HTML.

E-mail vs web vs app — o mesmo asset, regras diferentes

E-mail

Os clientes de e-mail são o ambiente mais conservador. SVG é bloqueado pelo Gmail, Outlook e Apple Mail. WebP não é suportado no Outlook no Windows. A escolha segura: PNG para logos, JPEG para fotografia.

Web

A web moderna tem maior flexibilidade. Use SVG para logos, ícones e ilustrações vetoriais. WebP (com perdas) para fotografia e imagens raster complexas. WebP (sem perdas) para capturas de tela. Fallback PNG apenas se necessário.

App nativo (iOS / Android)

iOS e Android ambos suportam SVG por meio de seus formatos de desenho vetorial. Na prática, as pipelines de assets geram múltiplas densidades PNG (1x, 2x, 3x) a partir de uma fonte vetorial. WebP é suportado nativamente pelo Android 4.0+ e iOS 14+.

Incorporação Base64: quando o tamanho de entrega não importa

Há um cenário específico em que você converte uma imagem para Base64 e a incorpora diretamente em HTML, CSS ou JavaScript: quando o asset é minúsculo, deve estar disponível sem uma solicitação HTTP adicional. Pequenos ícones SVG em background-image CSS e spinners de carregamento são os casos canônicos.

A codificação Base64 aumenta o tamanho do arquivo em aproximadamente 33%, portanto só é apropriada para assets pequenos (menos de ~10 KB). Para qualquer coisa maior, a solicitação adicional é mais barata do que o overhead de codificação.

Ferramenta gratuita Conversor de Imagem para Base64 Converta qualquer PNG, SVG, WebP ou JPEG para um URI de dados Base64 — pronto para colar em CSS, HTML ou JavaScript.

O framework de decisão: um fluxograma em prosa

Aplique estas regras em ordem. A primeira correspondência vence:

  • O asset começou como vetor? (logo, ícone, ilustração no Figma/Illustrator) → Use SVG. Converta para PNG/WebP apenas quando o ambiente de destino não suportar SVG.
  • É uma fotografia ou uma imagem de gradiente complexa? → Use WebP com perdas. Recorra ao JPEG apenas para e-mail ou ferramentas que rejeitam WebP.
  • É uma captura de tela, captura de UI ou ilustração plana com alfa? → Use WebP sem perdas. PNG como fallback para e-mail.
  • É um favicon? → Gere um pacote ICO + PNG + SVG a partir da sua fonte vetorial. Nunca use WebP para favicons.
  • Vai em um e-mail HTML? → Use PNG (logos) ou JPEG (fotos). Evite SVG e WebP completamente.
  • Precisa ser incorporado sem uma solicitação HTTP? → Converta para Base64, mas apenas se o asset estiver abaixo de ~10 KB.

Perguntas frequentes

Qual é a principal diferença entre SVG e PNG? +

SVG é um formato vetorial — armazena formas como instruções matemáticas e dimensiona sem perda de qualidade. PNG é um formato raster — armazena uma grade de pixels fixa. SVG é ideal para logos e ícones; PNG é apropriado quando você precisa de um snapshot preciso de pixels.

WebP suporta transparência como PNG? +

Sim. Tanto WebP sem perdas quanto com perdas suportam um canal alfa completo, tornando-o um substituto viável para PNG em qualquer contexto que suporte o formato.

SVG é sempre um arquivo menor que PNG? +

Nem sempre. Logos e ícones simples são quase sempre menores como SVG. Ilustrações SVG complexas com milhares de caminhos podem exceder os tamanhos raster equivalentes.

Por que WebP não é usado em e-mails? +

O Outlook no Windows usa um antigo mecanismo do Internet Explorer sem suporte a WebP. Gmail e Apple Mail suportam WebP em algumas versões, mas não em todas. PNG e JPEG continuam sendo as únicas escolhas universalmente seguras.

Posso usar SVG como favicon? +

Sim, navegadores modernos (Firefox, Chrome 117+, Edge 79+) suportam favicons SVG. No entanto, o Safari não suporta favicons SVG a partir de 2025, então você ainda precisa de um fallback ICO ou PNG.

Quando devo converter SVG para PNG? +

Converta SVG para PNG quando: a plataforma de destino bloqueia SVG, você precisa de uma miniatura de resolução fixa para uma imagem OG, um fornecedor de impressão requer entrada raster, ou você está gerando um pacote de favicon com ICO.

O PixCode suporta todas essas conversões? +

O PixCode oferece um conversor de SVG para PNG, um Gerador de Favicon e um conversor de Imagem para Base64. Todas as ferramentas são gratuitas e funcionam inteiramente no navegador sem uploads para servidor.