Converter SVG em PNG

Fixando uma resolução que nunca foi fixa

Um SVG não tem pixels nem tamanho. Ele é um conjunto de instruções de desenho — este traçado, aquele preenchimento, esta curva —, e é por isso que continua nítido em qualquer ampliação e que um logotipo deve ficar nesse formato pelo maior tempo possível. Rasterizar compromete a imagem com um único tamanho para sempre. Então escolha o tamanho para o maior lugar onde a imagem vai aparecer, e lembre que uma tela com densidade duas ou três vezes maior precisa de duas ou três vezes mais pixels: um ícone exibido com 64 pontos precisa de 192 pixels para ficar bom em um celular moderno.

O texto é onde isso mais dá errado, e vale entender o motivo. Um SVG diz “coloque este texto em Helvetica Neue”; se a máquina que renderiza não tiver a Helvetica Neue, outra fonte entra no lugar e o layout se desloca — um título que cabia na caixa passa a transbordar. Uma web font referenciada por URL nem chega a carregar aqui, porque um SVG renderizado como imagem fica isolado de propósito e não pode acessar a rede. A solução é a que todo designer acaba aprendendo: converta o texto em contornos antes de exportar, e as letras viram traçados que não precisam de fonte nenhuma.

Esse mesmo isolamento explica as outras surpresas. Um bitmap vinculado — um elemento image apontando para um .png em algum lugar — não aparece. Scripts não rodam, então um SVG que se desenha em JavaScript sai vazio ou pela metade. Animações declarativas aparecem no estado inicial, ou seja, uma imagem fixa do primeiro quadro. Tudo o que é autocontido funciona perfeitamente: degradês, filtros, máscaras de recorte, máscaras, imagens incorporadas em data URI e efeitos de desfoque são renderizados como foram desenhados.

O PNG é o destino certo para isso, e o JPEG não seria. Arte vetorial é feita de cores chapadas e bordas duras, exatamente o que o PNG comprime bem e o JPEG estraga — toda borda nítida em um JPEG ganha um halo. A transparência vira um canal alfa de verdade, então um logotipo exportado no tamanho certo fica bem sobre qualquer fundo. Se o SVG não declara dimensões, apenas um viewBox, a proporção vem dele e o tamanho fica à sua escolha.

Quando você precisa de outra coisa

resvg e rsvg-convert renderizam SVG pela linha de comando com fontes de verdade disponíveis, então o texto sai na tipografia pretendida e não em uma substituta — rsvg-convert -w 512 in.svg -o out.png é o comando inteiro. Inkscape --export-type=png --export-dpi=300 é a implementação mais completa da especificação que existe e lida com filtros e modos de mesclagem que renderizadores mais leves apenas aproximam.

Antes de rasterizar, verifique se algo realmente precisa de um PNG. Todo navegador desenha SVG nativamente há mais de uma década, e, para um logotipo ou um ícone em um site, o SVG é menor, infinitamente nítido e estilizável com CSS. Os casos que realmente precisam de pixels são mais restritos do que se imagina: favicons, imagens de pré-visualização em redes sociais, e-mail, recursos para lojas de aplicativos e programas que não leem vetores.