PNG vs SVG

SVG para tudo que foi desenhado; PNG para o que foi fotografado ou já está fixado.

Escolha PNG quando

PNG quando a imagem é uma fotografia ou uma captura de tela, ou quando o destino não aceita SVG.

Escolha SVG quando

SVG para logos, ícones e diagramas. Ele fica nítido em qualquer tamanho e costuma ocupar menos que a mesma imagem em pixels.

O detalhe que pega as pessoas de surpresa

Não dá para converter uma foto em SVG e esperar um desenho vetorial. O que sai é um mosaico de milhares de formas: mais pesado que o original e pior de olhar.

Passar de PNG para SVG

O que se mantém

Nada é descartado. PNG e SVG guardam o conteúdo sem perda, então a conversão troca a embalagem e não a qualidade — e pode ser repetida sem que o estrago se acumule.

A transparência se mantém. PNG e SVG guardam canal alfa, então um recorte continua recortado e nada é preenchido atrás.

O que o formato de destino acrescenta

SVG é formato de trabalho e PNG é formato pronto. Volta texto editável em vez de uma imagem da página, o que costuma ser o motivo da conversão e também o seu limite.

SVG comporta animação; um arquivo PNG é um quadro só. Sai um arquivo de uma imagem em um formato que aceitaria mais.

SVG aceita camadas. Um arquivo PNG chega já achatado, então o resultado tem uma camada — a estrutura teria de ser refeita à mão.

Abrir o resultado

Os programas de sempre não se cruzam: PNG abre em Adobe Photoshop, GIMP e Paint.NET, e SVG em Inkscape, Adobe Illustrator e Figma, então quem receber o resultado precisa de algum do segundo grupo.

Tamanho e qualidade

SVG guarda as amostras cruas, então o arquivo cresce bastante sem ganhar nada. Só faz sentido quando um programa do outro lado não aceita PNG, que costuma ser o motivo.

Para que serve cada formato

PNG é o formato da PNG Development Group, publicado em 1996. Registra 16 bits por canal.

SVG vem da W3C é de 2001, descrito em SVG 1.1. Inkscape, Adobe Illustrator e Figma leem o formato.

Passar de SVG para PNG

O que se perde

SVG descreve formas e PNG guarda pixels. O resultado é nítido no tamanho em que foi gerado e não além dele: ampliar depois só inventa os pixels do meio, e por isso o tamanho de exportação pesa mais aqui do que na maioria das conversões.

PNG guarda uma única imagem parada. De um arquivo SVG animado sobra o primeiro quadro e o resto se perde: a conversão serve para extrair uma imagem, não para levar o movimento junto.

As camadas são achatadas. SVG as mantém separadas e editáveis; PNG guarda o resultado, então tudo que dependa de mover uma camada precisa acontecer antes.

O que se mantém

Nada é descartado. SVG e PNG guardam o conteúdo sem perda, então a conversão troca a embalagem e não a qualidade — e pode ser repetida sem que o estrago se acumule.

A transparência se mantém. SVG e PNG guardam canal alfa, então um recorte continua recortado e nada é preenchido atrás.

Abrir o resultado

Os programas de sempre não se cruzam: SVG abre em Inkscape, Adobe Illustrator e Figma, e PNG em Adobe Photoshop, GIMP e Paint.NET, então quem receber o resultado precisa de algum do segundo grupo.

Tamanho e qualidade

PNG empacota as mesmas amostras em cerca de metade do espaço. Nada é descartado — ao descompactar você recupera o SVG bit a bit — e por isso é o melhor lugar para o que você pretende guardar.

Para que serve cada formato

SVG é o formato da W3C, publicado em 2001. Está descrito em SVG 1.1, e vale conhecer se o arquivo precisa sobreviver à ferramenta que o escreveu.

PNG vem da PNG Development Group é de 1996, descrito em ISO/IEC 15948. Adobe Photoshop, GIMP e Paint.NET leem o formato.

Lado a lado

PNG e SVG comparados linha a linha: o que cada um guarda e o que isso custa.
PNGSVG
Full namePortable Network GraphicsScalable Vector Graphics
Extensão.png.svg
Tipo de mídiaimage/pngimage/svg+xml
CompressãoSem perdas — nada é descartadoSem compressão
Este site consegue gravarSimSim

De onde vêm estes números

O que esta página afirma sobre PNG and SVG pode ser conferido, e estes são os documentos que resolvem a questão.