SVG ou PNG: vetor ou pixels para logos e gráficos

SVG vs PNG é, no fundo, vetor contra pixels. Um arquivo SVG guarda formas como instruções (desenhe um círculo aqui, preencha com esta cor), então um navegador ou uma impressora o redesenha com nitidez em qualquer tamanho, de um favicon de 16 pixels a uma placa de loja. Um PNG guarda uma grade fixa de pixels coloridos, então fica perfeito no próprio tamanho e borrado quando ampliado. Use SVG para logos, ícones e gráficos simples na web e em impressos. Use PNG para fotos, arte com textura e tudo que você envia para redes sociais.

O que um arquivo SVG realmente é

SVG vem de Scalable Vector Graphics, e é texto simples. Abra um num editor de código e você verá marcação legível, não ruído. É por isso que SVGs são minúsculos para formas simples, que dá para mudar a cor deles com CSS e que mecanismos de busca e leitores de tela conseguem ler o texto dentro deles.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="Studio Nine">
  <defs>
    <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="#4f46e5"/>
      <stop offset="1" stop-color="#db2777"/>
    </linearGradient>
  </defs>
  <circle cx="32" cy="32" r="28" fill="url(#g)"/>
  <path d="M22 40 L32 20 L42 40 Z" fill="#ffffff"/>
</svg>

Um PNG do mesmo símbolo precisa de um arquivo separado para cada tamanho em que você quer nitidez, e nenhum deles pode ser recolorido sem exportar de novo. A documentação de SVG da MDN cobre o formato por inteiro.

SVG vs PNG lado a lado

SVG ou PNG para um logo

Guarde o logo mestre em SVG. É o único arquivo que atende a todos os usos futuros: o cabeçalho de um site, um banner de 4 metros, bordado, papel timbrado, um favicon. Depois exporte PNGs a partir dele para os lugares que não aceitam vetores, sobretudo plataformas sociais, assinaturas de e-mail e algumas ferramentas de apresentação.

Quando o PNG é a escolha certa

O vetor só funciona quando a imagem pode ser descrita como formas. Assim que uma imagem tem detalhe fotográfico, luz suave, granulado ou milhares de mudanças sutis de cor, um PNG é menor e mais fiel. Vetorizar uma foto num SVG produz um arquivo ao mesmo tempo mais pesado e pior.

• Fotografias e colagens de fotos.
• Arte com textura: granulado, papel, pinceladas, efeitos de filme.
• Posts, stories e carrosséis de redes sociais, já que as plataformas só aceitam pixels.
• Capturas de tela e tudo que é capturado de uma tela.
• Fundos ricos, com luz em camadas e ruído.

SVG vs PNG para um site

Num site, use SVG embutido ou um arquivo SVG para logos, ícones e ilustrações, e formatos modernos para fotos. Ícones SVG escalam com o texto, podem usar currentColor para seguir o seu tema e dispensam arquivos separados para telas de alta densidade. Para imagens raster, o WebP costuma ser melhor que o PNG nas suas próprias páginas.

Como converter SVG em PNG

1. 1

   Decida o maior tamanho de que precisa

   Uma foto de perfil em 1080×1080 ou uma assinatura de e-mail em 1200×400 (o dobro do tamanho de exibição, 600×200). Exporte uma vez nesse tamanho em vez de ampliar depois.

2. 2

   Exporte a partir da origem

   No Figma, no Illustrator ou no Inkscape, exporte o quadro como PNG no tamanho escolhido. Exportar do vetor mantém todas as bordas nítidas.

3. 3

   Mantenha a transparência ligada

   Deixe o fundo vazio para o PNG ter canal alfa. Veja fundo transparente para conferir.

4. 4

   Confira em 100%

   Olhe os traços finos e o texto pequeno no tamanho real. Se eles se desfazerem, simplifique o logo para usos pequenos em vez de entregar um arquivo turvo.

O caminho inverso, de PNG para SVG, não é uma conversão, é um redesenho. A vetorização automática funciona para um logo forte e chapado e falha em qualquer coisa com textura ou bordas suaves. Se o seu logo só existe em PNG, mande redesenhá-lo uma vez como vetor; todos os arquivos seguintes ficarão melhores.

As exportações do Pro do Gradiently cobrem os dois lados: um design pode sair como SVG para a web e a impressão, ou como PNG transparente para plataformas, a partir do mesmo arquivo. Exportar SVG e PNG transparente mostra como, e PNG vs JPG resolve a outra escolha comum.