SVG vs PNG: vetor ou píxeis para logótipos e gráficos

SVG vs PNG é, na verdade, vetor contra píxeis. Um ficheiro SVG guarda formas como instruções (desenha aqui um círculo, preenche-o com esta cor), por isso um navegador ou uma impressora redesenha-o com nitidez em qualquer tamanho, de um favicon de 16 píxeis a uma tabuleta de loja. Um PNG guarda uma grelha fixa de píxeis coloridos, por isso fica perfeito no seu tamanho e desfocado quando o ampliares. Usa SVG para logótipos, ícones e gráficos simples na web e em impressão. Usa PNG para fotos, arte com textura e tudo o que carregas nas redes sociais.

O que é realmente um ficheiro SVG

SVG significa Scalable Vector Graphics e é texto simples. Abre um num editor de código e vais ver marcação legível, não ruído. É por isso que os SVG são minúsculos para formas simples, que podes mudar-lhes a cor com CSS e que os motores de busca e os leitores de ecrã conseguem ler o texto que contêm.

<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 ficheiro para cada tamanho em que o queiras nítido, e nenhum pode mudar de cor sem exportar de novo. A documentação SVG da MDN cobre o formato por inteiro.

SVG vs PNG lado a lado

SVG ou PNG para um logótipo

Guarda o logótipo principal em SVG. É o único ficheiro que serve todos os usos futuros: o cabeçalho de um site, um banner de 4 metros, um bordado, um papel timbrado, um favicon. Depois exporta PNG a partir dele para os sítios que não aceitam vetores, sobretudo redes sociais, assinaturas de email e algumas ferramentas de apresentação.

Quando o PNG é a escolha certa

O vetor só funciona quando a imagem se pode descrever com formas. Assim que uma imagem tem detalhe fotográfico, luz suave, grão ou milhares de variações subtis de cor, um PNG é mais pequeno e mais fiel. Converter uma foto em SVG por vectorização dá um ficheiro mais pesado e pior.

• Fotografias e colagens de fotos.
• Arte com textura: grão, papel, pinceladas, efeitos de película.
• Posts, stories e carrosséis, já que as plataformas só aceitam píxeis.
• Capturas de ecrã e tudo o que é captado de um ecrã.
• Fundos ricos com luz e ruído em camadas.

SVG vs PNG para um site

Num site, usa SVG inline ou um ficheiro SVG para logótipos, ícones e ilustrações, e formatos modernos para fotos. Os ícones SVG escalam com o texto, aceitam currentColor para seguirem o teu tema e não precisam de ficheiros separados para ecrãs de alta densidade. Para imagens raster, o WebP costuma ser melhor escolha do que o PNG nas tuas páginas.

Como converter SVG em PNG

1. 1

   Decide o maior tamanho de que precisas

   Uma foto de perfil a 1080×1080 ou uma assinatura de email a 1200×400 (o dobro dos 600×200 de apresentação). Exporta uma vez a esse tamanho em vez de ampliares depois.

2. 2

   Exporta a partir da origem

   No Figma, no Illustrator ou no Inkscape, exporta o frame como PNG ao tamanho escolhido. Exportar a partir do vetor mantém todas as arestas nítidas.

3. 3

   Mantém a transparência ligada

   Deixa o fundo vazio para o PNG ter canal alfa. Vê fundo transparente para o confirmares.

4. 4

   Verifica a 100%

   Olha para os traços finos e o texto pequeno ao tamanho real. Se se desfizerem, simplifica o logótipo para usos pequenos em vez de entregares um ficheiro pastoso.

Fazer o caminho inverso, de PNG para SVG, não é uma conversão, é um redesenho. A vectorização automática funciona num logótipo forte e plano e falha em tudo o que tenha textura ou arestas suaves. Se o teu logótipo só existe em PNG, manda-o redesenhar uma vez como vetor; todos os ficheiros seguintes ficam melhores por isso.

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