A diferença central: matemática versus pixels
Um SVG é um vetor. O arquivo não armazena uma grade de pontos coloridos. Ele armazena instruções: desenhe um círculo aqui, preencha de azul, trace uma linha deste ponto até aquele. O navegador lê essas instruções e pinta a forma do zero no tamanho que você pedir. Amplie até um selo postal ou um outdoor e as bordas continuam nítidas, porque são recalculadas a cada vez.
Um PNG é um raster. Ele armazena uma grade real de pixels, cada um com uma cor fixa. Essa grade tem uma resolução definida. Amplie além do tamanho nativo e o navegador precisa adivinhar o que vai entre os pixels, então as bordas ficam suaves e serrilhadas. O PNG também suporta transparência, e é por isso que supera o JPEG em gráficos que precisam ficar sobre um fundo colorido.
Então a divisão é simples. O SVG é desenhado a partir de matemática e escala sem limite. O PNG é uma fotografia fixa de pixels e fica melhor no tamanho em que foi criado.
Onde o SVG vence
Tudo o que é construído com formas limpas pertence ao SVG. Logos, ícones, elementos de interface, arte de linha, gráficos, ilustração flat. Eles são feitos de caminhos e preenchimentos, exatamente o que o SVG descreve melhor, então o arquivo fica minúsculo. Um ícone simples pode ter poucas centenas de bytes.
Duas outras vantagens importam. O SVG permanece editável para sempre, porque as formas continuam sendo formas e não foram convertidas em pixels. Você pode reabri-lo, mudar uma cor, ajustar um ponto. E como escala infinitamente, um único logo em SVG serve para seu favicon, o cabeçalho do site e um banner impresso sem uma segunda exportação.
Onde o PNG vence
Fotografias e qualquer coisa com detalhes finos, gradientes ou textura devem ser PNG. Uma foto tem milhares de cores sutilmente diferentes por todo o quadro. Descrever isso como formas vetoriais seria absurdo, e o arquivo ficaria enorme. Pixels são a forma honesta de armazená-la.
O PNG também é a escolha segura quando você precisa de um raster com transparência, como uma foto de produto recortada do fundo ou uma captura de tela com cantos arredondados. É amplamente suportado e nenhum software vai recusá-lo.
Um guia rápido de decisão
Use SVG quando a imagem for um logo, ícone, símbolo, gráfico ou ilustração flat; quando precisar escalar para tamanhos diferentes; ou quando você quiser continuar editando depois.
Use PNG quando a imagem for uma foto ou tiver detalhes fotográficos; quando você precisar de um raster de tamanho fixo com transparência; ou quando for entregar o arquivo a um sistema que só aceita pixels.
Um truque prático: muitas equipes criam o gráfico como SVG e depois exportam um PNG no tamanho exato que determinada plataforma exige. Você fica com o arquivo-mestre limpo e editável e com o arquivo final de entrega, a partir da mesma origem.
Editando SVG, exportando ambos
Se você trabalha com gráficos vetoriais, ajuda usar uma ferramenta em que o documento é genuinamente SVG, e não uma cópia exportada no final. O Rayzia é um editor gratuito no navegador construído exatamente assim: o arquivo que você edita é o SVG. Ao terminar, você pode exportar SVG como arquivo-mestre escalável, ou PNG quando uma plataforma exigir pixels. Ele roda em qualquer navegador sem nada para instalar, então você pode abrir o editor e testar em um arquivo real em um minuto.
Perguntas frequentes
SVG é melhor que PNG?
Nenhum é melhor no geral; eles resolvem problemas diferentes. O SVG é melhor para logos, ícones e ilustração flat porque escala para qualquer tamanho e permanece editável. O PNG é melhor para fotos e imagens com detalhes finos, porque essas são feitas de pixels e não de formas. Escolha pelo que a imagem realmente é.
Posso converter um PNG em SVG?
Na maioria dos casos, não de forma limpa. Um PNG é feito de pixels, e transformar pixels de volta em formas vetoriais exige vetorização, que adivinha os contornos e raramente corresponde ao original. Funciona razoavelmente para gráficos simples e de alto contraste, como um logo básico, mas não para fotos. Se puder escolher, mantenha o original em SVG desde o início.
Por que meu logo em PNG fica borrado quando eu o amplio?
Porque um PNG tem um número fixo de pixels. Quando você o amplia além do tamanho nativo, o software precisa inventar pixels que nunca existiram, o que suaviza as bordas. Um logo salvo como SVG evita isso completamente, já que é redesenhado a partir de matemática em qualquer tamanho.
SVG suporta transparência como o PNG?
Sim. O SVG lida com transparência, opacidade parcial e mesclagem, e muitas vezes de forma mais flexível que o PNG. A diferença não está na transparência, mas em como a imagem é armazenada: SVG como formas, PNG como pixels.