SVG para PNG — quando você realmente precisa de pixels (e quando não deveria)

Existe um tipo particular de frustração em ter um logo perfeito e nenhum lugar para colocá-lo. O SVG é nítido em qualquer tamanho, pesa quase nada e fica impecável no navegador — e aí você tenta soltá-lo num e-mail, ou defini-lo como imagem de prévia social, ou colá-lo num software um pouquinho antigo demais, e ele simplesmente não aparece. Em branco. O arquivo está bom. O lugar onde você está colocando ele apenas não fala vetor.

É essa a razão inteira de SVG para PNG existir como tarefa. Não porque o PNG seja melhor — normalmente não é — mas porque boa parte do mundo só consegue ler pixels.

Vetor e raster, rapidinho

Um SVG não é uma imagem. É um conjunto de instruções — desenhe um círculo aqui, este traço ali, preencha com esta cor. O navegador segue as instruções e as renderiza na hora, no tamanho que você pedir, então ele fica afiadíssimo a 16 pixels ou a 16.000, e o arquivo continua minúsculo porque é só matemática.

Um PNG é o oposto. É uma grade fixa de pixels coloridos, decidida de uma vez, numa única resolução. Amplie além do tamanho nativo dele e ele fica mole e quadriculado, porque não há mais pixels para desenhar — só os que foram assados dentro. A vantagem é que tudo consegue ler uma grade de pixels. É a moeda universal das imagens.

Então converter SVG para PNG é trocar escalabilidade infinita por compatibilidade universal. Se é um bom negócio, depende inteiramente de para onde a imagem vai.

Quando você realmente precisa de PNG

Três casos em que eu rasterizo sem hesitar, porque o vetor simplesmente não vai funcionar:

E-mail. Clientes de e-mail não renderizam SVG — Gmail, Outlook, Apple Mail, essencialmente todos eles o recusam por motivos de segurança. Um logo numa assinatura de e-mail ou numa newsletter tem que ser um formato raster. PNG, porque você quer a transparência.

Imagens sociais e de prévia OG. O cartãozinho que aparece quando você compartilha um link — a imagem Open Graph — tem que ser um raster de tamanho fixo, tipicamente 1200x630. As plataformas não vão renderizar um SVG ali. Se a sua arte de origem for vetor, você exporta um PNG naquele tamanho exato.

Software antigo ou offline. Muitos apps de desktop, ferramentas de apresentação, editores de documento e fluxos de impressão ou não conseguem importar SVG ou fazem uma bagunça com ele. Entregar a eles um PNG numa resolução generosa simplesmente funciona, toda vez, sem surpresas.

Nos três, o fator decisivo é o mesmo: o destino fisicamente não consegue ler vetor, então escalabilidade é irrelevante. Um formato que renderiza ganha de um formato que não renderiza, sempre.

A única coisa para acertar: a resolução

Aqui está o erro que eu mais vejo, e que eu mesmo cometi cedo. Como um PNG é fixo no tamanho em que você o exporta, você tem que exportá-lo grande o bastante — e, idealmente, no tamanho exato em que vai exibi-lo.

Exporte um logo como um PNG de 100x100 e depois o mostre a 300 pixels numa tela de alta densidade, e ele vai parecer mole e serrilhado. Os pixels para preencher aquele espaço não existem. A solução é fácil: exporte no tamanho que você de fato vai usar, ou maior, especialmente para telas Retina e 4K, onde muitas vezes você quer o dobro do tamanho nominal. Essa é a única vantagem real que você abre mão ao deixar o vetor, então gaste um instante acertando a resolução de destino.

Quando você NÃO deveria rasterizar

Se o destino consegue ler SVG, mantenha o SVG. Ponto final.

No seu próprio site, um ícone ou logo deveria continuar vetor. Ele vai ser nítido em toda tela, em todo nível de zoom, vai ser menor que o PNG equivalente, e você nunca vai ter que reexportar uma versão maior quando um novo display de densidade mais alta aparecer. Rasterizar ali é só desvantagem — você estaria jogando fora a melhor característica do formato para ganhar uma compatibilidade que você já tem.

E não rasterize o seu mestre. O SVG é a fonte da verdade; ele consegue gerar um PNG em qualquer tamanho, a qualquer hora. Um PNG não consegue voltar no outro sentido — você não consegue recuperar traços vetoriais limpos a partir de uma grade de pixels. Então guarde o SVG, e trate cada PNG como uma exportação descartável para um lugar específico. O mesmo princípio de tudo o mais: converta a cópia que você publica, guarde o original que você edita.

Como eu faço na prática

Quando eu preciso de pixels a partir de um vetor, uso o conversor de SVG para PNG daqui. Ele renderiza o SVG no seu navegador e te entrega o PNG, então nada é enviado para lugar nenhum — a coisa toda acontece na sua máquina. Escolha um tamanho que caiba onde ele vai, receba um PNG limpo com a transparência intacta.

Mas a habilidade de verdade não é a conversão. É a pergunta que você faz antes: este lugar lê vetor? Se sim, deixe o SVG em paz e aproveite a opção mais nítida e mais leve que existe. Se não — e-mail, cartão OG, algum app velho e teimoso — então rasterize, no tamanho certo, e mantenha seu SVG guardado para a próxima. Acerte essa decisão e você nunca mais vai ter uma caixa em branco onde seu logo deveria estar.