PNG x SVG: qual formato você deve usar?

1. A diferença essencial: grade de pixels x caminhos matemáticos

Um PNG é uma imagem bitmap: ele corta a imagem em pixels individuais e registra a cor de cada um. Ampliar um PNG nada mais é do que esticar esses pixels, e é por isso que aparecem serrilhado e desfoque. Um SVG é uma imagem vetorial: descreve formas com instruções matemáticas como coordenadas e curvas de Bézier, e o navegador redesenha o desenho no novo tamanho, de modo que permanece nítido em qualquer escala. Esse único fato é a raiz de quase todas as diferenças entre os dois formatos.

Quanto à transparência, o PNG suporta canal alfa e consegue guardar um fundo transparente. O SVG é transparente por natureza — desde que você não desenhe um retângulo de fundo, tudo fora do desenho continua transparente. Como observação, o JPG não tem transparência alguma: o fundo branco dele é uma cor real pintada na imagem.

2. Tamanho do arquivo e desempenho de carregamento

Para gráficos simples como ícones e logotipos, um SVG costuma ter apenas alguns KB, e um único arquivo atende a todas as densidades de tela. O PNG, por outro lado, normalmente precisa de versões @2x e @3x para ficar nítido em telas Retina, o que multiplica o tamanho do arquivo. Para fotos, o quadro se inverte: as transições de cor são extremamente ricas e uma vetorização forçada gera uma quantidade enorme de caminhos, de modo que o SVG acaba muito maior que um JPG ou WEBP, o que não compensa.

A razão está no princípio de compressão de cada um. O PNG registra os pixels com compressão sem perdas, então quanto mais complexa a imagem, maior o arquivo. O SVG é texto puro, e comandos de caminho e coordenadas repetidos comprimem muito bem. Por isso dois formatos igualmente apontados como "sem perdas" têm comportamentos de tamanho tão diferentes.

Caso de uso	Formato indicado	Motivo
Ícones / logotipos de sites	SVG	Um arquivo para todas as resoluções, e o CSS pode trocar a cor
Fotos	JPG / WEBP	Tamanho pequeno com fidelidade fotográfica
Capturas de tela	PNG	Precisão de pixel e compressão sem perdas
Gráficos de dados	SVG	Nítido ao ampliar e fácil de tornar interativo
Foto de perfil em redes sociais	PNG / JPG	As plataformas em geral só aceitam bitmaps

3. Quando usar PNG

• Fotos, iluminação complexa e degradês delicados;
• Capturas de tela e registros de interface que exigem precisão de pixel;
• Plataformas que só aceitam bitmap, como o upload de foto de perfil em alguns painéis;
• Como alternativa de compatibilidade, em ambientes muito antigos que não suportam SVG.

4. Quando usar SVG

• Ícones e logotipos de sites: um arquivo para todas as resoluções, ainda nítido em telas Retina;
• Desenhos que precisam de troca de cor com CSS ou JavaScript e de animação de traço;
• Gráficos de dados: bibliotecas de visualização como ECharts geram SVG por padrão;
• Impressão, gravação a laser e recorte, onde o equipamento lê caminhos vetoriais.

5. PNG e SVG podem ser convertidos um no outro?

Sim. PNG para SVG: use a ferramenta PNG para SVG da PolySVG ou a ferramenta imagem para SVG, envie o arquivo e clique em gerar para vetorizá-lo — o resultado é ótimo para ícones e logotipos, enquanto fotos ganham um estilo ilustrado. A conversão é gratuita, e o fundo transparente de um PNG transparente também é preservado por inteiro. O SVG obtido ainda pode ser aberto no editor para trocar cores e remover o fundo, completando o fluxo de trabalho. SVG para PNG: abra o arquivo no editor SVG online e exporte um PNG na resolução que quiser, ideal para documentos ou imagens de pré-visualização.

Um detalhe importante: converter PNG em SVG não é um simples "salvar como", é uma vetorização que redesenha os contornos. Materiais gráficos ficam com caminhos limpos, enquanto fotos são resumidas em blocos de cor. Pré-visualize o resultado na ferramenta e confirme que o estilo corresponde ao que você espera antes de baixar.

Regra de uma linha: ícones, logotipos e gráficos → SVG; fotos e capturas de tela → PNG/JPG/WEBP. Na dúvida, prefira SVG para tudo o que for gráfico. Para aprofundar, leia O que é SVG e Três formas de converter uma imagem em SVG.