SVG vs PNG: Qual você deve usar para logos, ícones e UI?

SVG e PNG são dois dos formatos de imagem mais usados na web, mas resolvem problemas fundamentalmente diferentes. O SVG armazena gráficos como formas matemáticas que escalam para qualquer tamanho sem perder qualidade. O PNG armazena gráficos como uma grade fixa de pixels que captura cada detalhe de uma fotografia ou captura de tela, mas fica borrado quando ampliado além da sua resolução nativa.

Escolher o formato certo importa mais do que a maioria dos desenvolvedores imagina. Um logo salvo como PNG vai ficar pixelado em uma tela 4K. Uma fotografia complexa salva como SVG vai se transformar em um arquivo enorme e lento para carregar. Este guia coloca SVG e PNG lado a lado para que você possa fazer a escolha certa toda vez. Se você precisa de uma visão geral primeiro, leia nossa explicação sobre raster vs vetor.

O que é SVG?

SVG (Scalable Vector Graphics) é um formato de imagem vetorial baseado em XML. Em vez de armazenar valores de cor para cada pixel, o SVG descreve formas, caminhos e texto usando coordenadas matemáticas. Um círculo é definido por um ponto central e um raio; uma linha é definida por dois pontos finais. O navegador lê essas instruções e renderiza o gráfico em qualquer tamanho necessário.

Como não há pixels para esticar, uma imagem SVG fica perfeitamente nítida tanto em uma tela de celular de 320 pixels quanto em um monitor Retina 5K. O arquivo é texto puro, o que significa que você pode abri-lo em um editor de código, ajustar cores com CSS, animar elementos com JavaScript e comprimi-lo com gzip. Mecanismos de busca podem até ler texto incorporado dentro de um SVG, dando a ele uma vantagem de acessibilidade sobre formatos raster.

O SVG funciona melhor para gráficos feitos de formas geométricas, bordas limpas e áreas de cor sólida: logos, ícones, ilustrações, gráficos e elementos de interface. Ele não é projetado para conteúdo fotográfico. Para um mergulho mais profundo, leia O que é SVG?

O que é PNG?

PNG (Portable Network Graphics) é um formato de imagem raster que armazena gráficos como uma grade de pixels com compressão sem perda. Cada pixel mantém seu valor de cor exato, então não há artefatos de compressão como os que aparecem com JPEG. O PNG também suporta transparência total com canal alfa, tornando-o o formato ideal quando você precisa de uma foto ou gráfico detalhado com fundo transparente.

Como o PNG depende de resolução, a imagem fica melhor nas suas dimensões originais. Amplie e você verá pixelação; reduza e você desperdiça largura de banda entregando mais dados do que a tela precisa. Os tamanhos de arquivo são maiores que JPEG para fotografias, mas a qualidade sem perda torna o PNG ideal para capturas de tela, mockups de interface e qualquer imagem onde nitidez e precisão de cor importam mais que velocidade de download.

O PNG se destaca na captura de detalhes visuais complexos que formatos vetoriais não conseguem reproduzir eficientemente: fotografias com transparência, capturas de tela com texto anti-aliased e obras com milhares de cores únicas e gradientes sutis.

Quando escolher SVG

Escolha SVG sempre que o gráfico for feito de formas, linhas e cores sólidas em vez de detalhes fotográficos. Aqui estão os casos de uso mais comuns:

• Logos e marcas — Um único arquivo SVG de logo fica perfeito em cartões de visita, outdoors e telas Retina sem precisar gerar múltiplas variantes de resolução. Aprenda como criar seu logo como SVG.
• Ícones e elementos de interface — Ícones SVG são leves, estilizáveis com CSS e independentes de resolução. Um arquivo substitui toda uma sprite sheet de PNGs.
• Ilustrações e infográficos — Ilustrações planas e visualizações de dados se traduzem naturalmente em caminhos vetoriais, mantendo arquivos pequenos e qualidade alta.
• Gráficos e diagramas — Gráficos SVG permanecem legíveis em qualquer nível de zoom, e elementos interativos podem ser adicionados com JavaScript.
• Gráficos web responsivos — O SVG se adapta a qualquer tamanho de contêiner sem media queries ou complicações com srcset.

Se você tem um gráfico PNG simples que funcionaria melhor como vetor, você pode converter seu PNG para SVG em segundos usando o Any2SVG. O rastreador baseado no navegador faz a conversão inteiramente no seu dispositivo.

Quando escolher PNG

Escolha PNG quando a imagem contiver detalhes fotográficos ou milhares de cores únicas que não podem ser representadas eficientemente como caminhos vetoriais:

• Fotos com fundos transparentes — Fotos de produtos, retratos e imagens compostas onde você precisa tanto de qualidade fotográfica quanto de transparência.
• Capturas de tela e mockups de software — Capturas de tela contêm texto anti-aliased, elementos de interface e gradientes que não se convertem bem para SVG.
• Arte digital complexa — Pinturas, texturas e imagens com gradientes pesados ficam menores e mais precisas como PNG do que como SVG.
• Pixel art — Arte projetada pixel a pixel deve permanecer em formato raster para preservar a estrutura de grade intencional.

Mesmo nesses casos, o PNG nem sempre é a resposta final. Se a velocidade de download importa mais que a qualidade sem perda, considere WebP ou AVIF como alternativas raster mais eficientes.

Conclusão

SVG e PNG não são concorrentes — são complementares. O SVG é a escolha certa para tudo que é feito de formas e linhas: logos, ícones, elementos de interface, ilustrações e gráficos. O PNG é a escolha certa para tudo que é feito de pixels: fotografias com transparência, capturas de tela e arte raster complexa.

A regra mais simples: se a imagem precisa escalar, use SVG. Se precisa capturar detalhes fotográficos, use PNG. E se você tem um gráfico raster que deveria ter sido vetor desde o início, a conversão está a apenas alguns cliques de distância.