A Diferença Fundamental
PNG (Portable Network Graphics) é um formato raster. Ele armazena imagens como uma grade de pixels coloridos. Cada pixel tem uma posição, cor e opacidade fixas. O número total de pixels — a resolução — determina quanta informação a imagem pode conter. Um PNG de 1000×1000 contém exatamente 1 milhão de valores de pixel. Quando você amplia a imagem além de sua resolução nativa, o software precisa interpolar (inventar) novos pixels entre os existentes, produzindo um resultado borrado.
SVG (Scalable Vector Graphics) é um formato vetorial. Ele descreve imagens usando definições matemáticas: caminhos, curvas, formas, linhas e preenchimentos. Um círculo é armazenado como uma coordenada central e um raio — não como milhares de pixels dispostos. Como a imagem é definida por equações em vez de uma grade de pixels fixos, pode ser renderizada em qualquer tamanho com nitidez perfeita. O motor de renderização simplesmente recalcula a matemática para as dimensões alvo.
Não se trata de um formato ser "melhor" que o outro. Trata-se de cada formato ter sido projetado para diferentes tipos de conteúdo. O PNG se destaca na representação de conteúdo fotográfico e raster complexo. O SVG se destaca na representação de gráficos geométricos, logotipos, ícones e ilustrações.
Comparação Abrangente
| Característica | SVG | PNG |
|---|---|---|
| Tipo | Vetorial (caminhos matemáticos) | Raster (grade de pixels) |
| Escalonamento | Infinito — sempre nítido em qualquer tamanho | Resolução fixa — borrado quando ampliado |
| Tamanho do arquivo (ícones/logos) | 1–20 KB típico | 10–500 KB (depende da resolução) |
| Tamanho do arquivo (fotos) | Enorme (não adequado) | 500 KB–10 MB (eficiente) |
| Transparência | Nativa (qualquer forma) | Canal alfa completo (opacidade por pixel) |
| Animação | Sim — CSS, JavaScript, SMIL | Não (APNG existe, mas com suporte limitado) |
| Estilização com CSS | Total — altere cores, tamanhos, efeitos | Não — dados de pixel fixos |
| Texto dentro da imagem | Pesquisável e selecionável | Incorporado nos pixels, não pesquisável |
| Editabilidade | Caminhos individuais editáveis | Somente nível de pixel |
| Compressão | Gzip/Brotli (compressão de texto) | Deflate sem perdas (integrado) |
| Suporte de navegadores | Todos os navegadores modernos (IE9+) | Universal (todos os navegadores) |
| Ideal para | Logos, ícones, ilustrações, gráficos | Fotos, capturas de tela, arte complexa |
Quando Usar SVG
O SVG é a escolha ideal para qualquer gráfico que seja fundamentalmente geométrico — composto por formas, linhas e curvas em vez de dados fotográficos de pixel.
Logos e Identidade Visual
O logo de uma empresa aparece em todo lugar: favicon do site (16px), imagem no cabeçalho (200px), cartão de visita (300 DPI impresso), banner em feiras (10 metros). Servir um PNG para cada tamanho significa manter vários arquivos, cada um em uma resolução diferente. Com SVG, você mantém um único arquivo que renderiza perfeitamente em qualquer tamanho. O CSS pode mudar a cor do logo ao passar o mouse, no modo escuro ou ao imprimir. E o arquivo tem tipicamente 2–15 KB — menor do que até mesmo a menor versão PNG.
Ícones e Elementos de UI
Conjuntos de ícones (navegação, redes sociais, ícones de funcionalidades) são candidatos ideais para SVG. Cada ícone é uma forma geométrica simples que se beneficia de:
- Independência de resolução: Nítido em telas 1x, 2x e 3x sem precisar servir vários PNGs
- Estilização com CSS: Altere cores com as propriedades
filloustroke— sem necessidade de variantes separadas de ícone - Animação: Efeitos de hover, spinners de carregamento, micro-interações
- Tamanho mínimo: Um ícone SVG típico tem 200–500 bytes. Um conjunto de 50 ícones inline no HTML adiciona menos de 25 KB no total.
Ilustrações Planas e Infográficos
Ilustrações com cores sólidas, bordas limpas e formas geométricas se traduzem naturalmente para o formato vetorial. Ilustrações de marketing, telas de integração e infográficos são tipicamente criados em ferramentas vetoriais (Illustrator, Figma) e exportados como SVG. O resultado é nítido em qualquer largura de viewport, estilizável com CSS e dramaticamente menor do que PNGs equivalentes em alta resolução.
Gráficos e Visualizações de Dados
Gráficos de barras, gráficos de linhas, gráficos de pizza e visualizações de dados interativas são naturalmente vetoriais. Bibliotecas como D3.js, Chart.js e Highcharts renderizam diretamente para SVG. O resultado é independente de resolução, interativo (tooltips, eventos de clique) e acessível (leitores de tela podem analisar o DOM do SVG).
Design Web Responsivo
O SVG se adapta automaticamente a qualquer tamanho de contêiner. Uma ilustração hero que ocupa 1200px no desktop e 360px no celular usa o mesmo arquivo SVG. O navegador recalcula a matemática vetorial em cada tamanho. O PNG requer o envio de imagens superdimensionadas (desperdiçando largura de banda no celular) ou múltiplas variantes srcset (mais complexidade e mais arquivos para manter).
Quando Usar PNG
O PNG se destaca na representação de conteúdo que é inerentemente raster — conteúdo que foi capturado ou criado como pixels e não pode ser significativamente reduzido a formas geométricas.
Fotografias
Uma fotografia contém milhões de valores de cor únicos com gradientes suaves e contínuos em tons de pele, céu, folhagem e tecido. O formato vetorial não pode representar esses dados com eficiência. Converter uma foto para SVG produziria milhares de caminhos minúsculos, criando um arquivo 10–100x maior que o PNG com aparência pior. Para conteúdo fotográfico, PNG (sem perdas) ou JPEG (com perdas, menor) são as escolhas corretas.
Capturas de Tela e Capturas de Interface
Capturas de tela contêm texto renderizado, elementos de UI, gradientes e bordas com anti-aliasing misturados como pixels. O arranjo específico dos pixels importa. O PNG preserva isso exatamente. Vetorizar uma captura de tela produziria uma interpretação não confiável dos dados de pixel, e não uma reprodução fiel.
Arte Digital Complexa
Pinturas digitais, efeitos de aquarela, ilustrações com texturas intensas e obras com milhares de cores e gradientes são melhor servidas como PNG. Embora o original possa ter sido criado com alguns elementos vetoriais, o resultado renderizado final com suas misturas, efeitos e texturas é fundamentalmente um dado raster.
Renderização Pixel a Pixel
Quando o posicionamento exato dos pixels importa — pixel art, sprite sheets, ativos de jogos de baixa resolução — PNG é o formato correto. A renderização de SVG envolve anti-aliasing e cálculos de subpixel que podem deslocar elementos por frações de pixel, o que destrói o alinhamento preciso que a pixel art exige.
Comparação de Desempenho na Web
Escolher o formato certo para cada ativo impacta diretamente a velocidade de carregamento do seu site e as pontuações dos Core Web Vitals.
Tamanho do Arquivo
Para ícones e logos, o SVG vence de forma decisiva. Um ícone típico:
- SVG: 200–800 bytes (texto simples, comprime para 100–400 bytes com gzip)
- PNG @1x: 1–5 KB
- PNG @2x (Retina): 3–15 KB
- PNG @3x (Hi-DPI): 5–25 KB
Servir um único SVG substitui três arquivos PNG e ainda é menor que o menor deles. Para um site com 20 ícones, isso economiza 100–400 KB de dados de imagem.
Para logos:
- SVG: 2–15 KB (comprimido com gzip: 1–8 KB)
- PNG @2x: 20–200 KB
Compressão (Gzip/Brotli)
O SVG é texto XML, que comprime excepcionalmente bem com gzip (redução de 50–70%) e Brotli (redução de 60–80%). Os servidores web comprimem SVG em tempo real, então o tamanho de transferência é muito menor do que o arquivo em disco. O PNG possui compressão deflate integrada e não se beneficia significativamente de gzip/Brotli adicional.
Vantagem do SVG Inline
O SVG pode ser incorporado diretamente no HTML com uma tag <svg>, eliminando completamente a requisição HTTP. Para ícones e logos críticos acima da dobra, isso pode melhorar o Largest Contentful Paint (LCP) porque o navegador não precisa aguardar um download de imagem separado. O PNG sempre requer uma requisição HTTP separada (ou um data URI, que aumenta o tamanho do HTML em ~33%).
Google Core Web Vitals
Três métricas-chave são afetadas pelas escolhas de formato de imagem:
- LCP (Largest Contentful Paint): Arquivos de imagem menores carregam mais rápido. Logos e ícones SVG contribuem menos para o LCP do que PNGs em alta resolução.
- CLS (Cumulative Layout Shift): SVG com dimensões
viewBoxexplícitas permite que o navegador reserve espaço antes de renderizar, evitando mudanças de layout. O PNG requer atributoswidtheheightexplícitos para o mesmo benefício. - INP (Interaction to Next Paint): Menos requisições de imagem significam menos trabalho na thread principal. SVG inline reduz o overhead HTTP.
Convertendo Entre Formatos
PNG para SVG (Vetorização)
Converter PNG para SVG é um processo de vetorização (rastreamento). O conversor analisa os limites dos pixels, detecta bordas e gera curvas de Bézier que aproximam essas bordas como caminhos matemáticos. Isso funciona bem para:
- Logos com cores sólidas em fundos limpos
- Arte de linha, esboços e designs desenhados à mão
- Ícones e ilustrações simples
- Texto e tipografia
Isso não funciona bem para fotografias, gradientes complexos ou texturas detalhadas. O resultado é uma interpretação, não uma cópia pixel a pixel.
SVG para PNG (Rasterização)
Converter SVG para PNG é a rasterização — renderizar os caminhos matemáticos em uma resolução de pixel específica. Este é um processo simples sem perda de qualidade na resolução escolhida. Você simplesmente especifica as dimensões alvo e o renderizador preenche os pixels. Ferramentas como ImageMagick, Inkscape e todos os navegadores web podem rasterizar SVG para PNG.
Razões comuns para converter SVG para PNG:
- Plataformas de redes sociais que não aceitam uploads de SVG
- Clientes de e-mail com renderização pobre de SVG
- Softwares mais antigos que só suportam formatos raster
- Geração de miniaturas de resolução fixa para galerias de imagens
Dicas de Otimização de SVG
Arquivos SVG exportados de ferramentas de design frequentemente contêm dados desnecessários que aumentam o tamanho do arquivo sem afetar a saída visual. A otimização pode reduzir o tamanho do arquivo SVG em 60–80%.
Remover Metadados do Editor
Illustrator, Figma e Sketch incorporam metadados proprietários, comentários e informações do gerador nos SVGs exportados. Esses dados são invisíveis para os navegadores, mas podem representar 30–50% do arquivo. Ferramentas como SVGO (SVG Optimizer) removem isso automaticamente.
Simplificar Caminhos
Editores vetoriais frequentemente criam caminhos com mais pontos de controle do que o visualmente necessário. Reduzir o número de pontos em cada caminho (simplificação de caminho) pode encolher o SVG dramaticamente enquanto produz saída visualmente idêntica. No Inkscape, use Caminho > Simplificar (Ctrl+L). O plugin convertPathData do SVGO cuida disso automaticamente.
Minificar o XML
Remova espaços em branco, quebras de linha e atributos desnecessários. Converta coordenadas absolutas de caminho para relativas (strings mais curtas). Remova valores de atributos padrão. O SVGO cuida de todas essas otimizações em uma única passagem.
Usar Símbolos SVG para Conjuntos de Ícones
Se você usa vários ícones em uma página, defina-os uma vez em um sprite SVG <symbol> e faça referência a eles com <use>. Isso evita duplicar os mesmos dados de caminho em toda a página.
Ferramenta de otimização: SVGOMG é uma interface baseada em navegador para o SVGO. Faça upload do seu SVG, alterne as opções de otimização e veja a redução de tamanho em tempo real. Não requer instalação.