SVG vs PNG: vetorial vs rasterizado

A escolha entre SVG e PNG é uma das mais comuns no design para web. Embora ambos suportem transparência e sejam amplamente utilizados, eles partem de princípios completamente diferentes. Entender essa diferença é fundamental para usar cada formato no lugar certo.

O que é SVG?

SVG (Scalable Vector Graphics) é um formato vetorial baseado em XML. Isso significa que a imagem é descrita matematicamente por formas, linhas e curvas — não por pixels. Como resultado, um SVG pode ser ampliado para qualquer tamanho sem perda de qualidade. É amplamente usado para logotipos, ícones, ilustrações e gráficos de interface.

O que é PNG?

PNG é um formato rasterizado: a imagem é armazenada como uma grade de pixels. Quanto maior o arquivo, mais detalhes ele consegue preservar, mas ao ampliar além do tamanho original, a imagem fica pixelada. É ideal para fotografias, capturas de tela e imagens com detalhes complexos que não podem ser representados como vetores.

Comparativo técnico

Característica	SVG	PNG
Tipo	Vetorial	Rasterizado
Escalabilidade	Infinita, sem perda	Limitada ao tamanho original
Transparência	Sim	Sim
Tamanho do arquivo	Pequeno para formas simples	Variável; cresce com resolução
Editável com código	Sim (XML/CSS/JS)	Não
Animações	Sim (nativo)	Não
Fotografias	Inadequado	Excelente
Suporte em navegadores	Universal	Universal

Quando o SVG é superior

• Logotipos: Exibem perfeitamente em qualquer tamanho, de favicon a outdoor.
• Ícones de interface: Adaptam-se a diferentes densidades de tela (retina, 4K).
• Ilustrações geométricas: Gráficos, diagramas e infográficos simples.
• Interatividade: SVGs podem ser animados e manipulados via CSS e JavaScript.
• SEO: O conteúdo textual dentro de SVGs pode ser indexado por mecanismos de busca.

Quando o PNG é superior

• Fotografias com transparência: Produtos recortados, imagens com fundo removido.
• Capturas de tela: Preservam todos os detalhes visuais com fidelidade.
• Imagens complexas: Arte digital, texturas e gradientes elaborados.
• Compatibilidade em e-mail: Clientes de e-mail têm suporte inconsistente a SVG.

Desempenho na web

Para ícones e logotipos simples, o SVG costuma ter tamanho de arquivo muito menor que o PNG equivalente em alta resolução. Um ícone SVG de 2 KB pode substituir um PNG de 20 KB sem perda de qualidade — e funcionar perfeitamente em qualquer resolução de tela.

Veredicto

Use SVG para tudo que for geométrico, escalável e passível de interação: logotipos, ícones e ilustrações. Use PNG para imagens rasterizadas, fotografias e qualquer conteúdo visual que não possa ser representado como vetor. Em muitos projetos web modernos, os dois formatos coexistem e se complementam.

Faça no seu navegador — o arquivo não sai do seu dispositivo: Converter imagem