SVG ou PNG: o que usar em logotipos, ícones e ilustrações

Designers enviam logotipos em SVG, sites pedem PNG e alguns programas só aceitam um deles. Os dois são formatos de imagem, mas descrevem as imagens de jeitos completamente diferentes, e isso decide qual é o certo para cada trabalho. Medimos cinco SVG de complexidade bem diferente contra cópias em PNG feitas com nosso próprio conversor.

Formas contra pixels

Um arquivo SVG é texto: uma lista de formas como «um círculo aqui, com 3 unidades de diâmetro, preenchido de verde». O navegador ou o programa desenha essas formas do zero no tamanho necessário, então as bordas sempre ficam tão nítidas quanto a tela permite. Um PNG é uma grade de pixels, salva sem perda. Fica perfeito no próprio tamanho e precisa ser esticado, e borrado, para aparecer maior.

Isso faz do SVG o formato natural para tudo que é feito de formas: logotipos, ícones, diagramas, gráficos, mapas. Fotos são feitas de milhões de pixels levemente diferentes, sem formas para descrever, então pertencem a um formato de pixels como JPEG, WebP ou AVIF, como testamos em JPG, PNG, WebP ou AVIF.

Os arquivos de teste

• Ícone: uma câmera do conjunto de código aberto Lucide, duas formas.
• Logotipo: o logotipo do Tooloat, três formas.
• Bandeira: a bandeira do Brasil, 17 formas incluindo as letras.
• Selo: o Grande Selo dos Estados Unidos, uma ilustração detalhada com 776 formas.
• Mapa-múndi: um mapa-múndi em branco com cada país como forma própria, 2.316 no total.

A bandeira, o selo e o mapa são arquivos de domínio público do Wikimedia Commons. Cada SVG passou pelo nosso minificador de SVG com os ajustes padrão e foi transformado em PNG em quatro tamanhos com o conversor de SVG para PNG.

Tamanhos dos arquivos

Comprimidos, o ícone, o logotipo e a bandeira ficaram menores até que um PNG de 64 pixels deles, e de 50 a 250 vezes menores que um de 1024 pixels, servindo a todos os tamanhos de tela de uma vez. É por isso que conjuntos de ícones e logotipos são distribuídos em SVG.

O selo e o mapa mostram o limite. Um SVG cresce com o número de formas, não com o tamanho em que aparece. O selo ainda fica menor como SVG comprimido do que como PNG de 1024 pixels, mas o mapa, com milhares de litorais detalhados, precisa de 342 KB mesmo comprimido, seis vezes mais que um PNG otimizado de 1024 pixels. Se um desenho complexo sempre aparece num só tamanho, um PNG ou um WebP sem perda pode ser a escolha mais leve.

Nitidez

A diferença de tamanho importa menos do que o que acontece quando uma imagem é mostrada maior do que o planejado: na tela de alta densidade de um celular, quando alguém dá zoom ou quando um logotipo feito para um site vai parar num pôster.

PNG feito a 256 pxSVG

Um SVG nunca tem esse problema. Com um PNG, a solução é fazê-lo no maior tamanho em que vai aparecer, pelo menos o dobro do tamanho normal para telas nítidas, e aceitar o arquivo maior.

Transformar um PNG em SVG

Se você só tem um PNG do seu logotipo, um vetorizador pode reconstruí-lo como formas. Vetorizamos três PNG com nosso conversor de PNG para SVG, usando suas predefinições:

• O logotipo, 512 pixels: 6 formas num SVG de 1,5 KB que fica igual ao original. Cores lisas e bordas limpas são o que a vetorização faz melhor.
• O selo, 1024 pixels: 943 formas e 401 KB, maior que o SVG original e com menos detalhe nas linhas finas. Vetorizar uma ilustração funciona, mas um original vetorial de verdade é sempre melhor.
• Uma foto de uma coruja, 1000 pixels: 7.039 formas e 1,8 MB, catorze vezes o tamanho de um JPEG de 129 KB da mesma foto.

Onde o SVG não funciona

• E-mail. Muitos apps de e-mail, incluindo alguns dos mais populares, não mostram imagens SVG. Use PNG em e-mails.
• Envios. Redes sociais, marketplaces e muitos formulários só aceitam JPEG, PNG ou WebP.
• Arquivos não confiáveis. Um SVG pode conter scripts, então muitos sites recusam envios de SVG por segurança. Nosso minificador remove scripts e manipuladores de eventos por padrão.
• Texto sem a fonte. O texto de um SVG é desenhado com as fontes do aparelho de quem vê, a menos que tenha sido convertido em formas, então um logotipo pode aparecer diferente em outro lugar. Converta as letras em contornos antes de compartilhar o arquivo de um logotipo.

A resposta comum é manter o SVG como arquivo mestre e exportar PNG a partir dele onde for exigido um formato de pixels.

Qual usar

Todas as ferramentas usadas aqui rodam no seu navegador: o conversor de SVG para PNG exporta qualquer tamanho, o minificador de SVG enxuga os arquivos e o conversor de PNG para SVG vetoriza logotipos e desenhos.