Converter SVG para PNG

Arquivos vetoriais são a coisa certa para guardar e a errada para enviar. Um SVG amplia para qualquer tamanho sem nunca ficar borrado, e é por isso que logotipos e ícones vivem assim. E é pelo mesmo motivo que várias coisas o recusam: versões antigas do Office, muitos formulários de envio, as esteiras de ícones de aplicativo, quase todo fluxo de gráfica.

O PNG é o menor denominador comum. É lido em toda parte, aparece igual em toda parte, e é o formato pelo qual um vetor sai do mundo vetorial.

Esta é a única decisão a tomar, porque um SVG realmente não tem tamanho. Ele descreve formas, não pixels, então a conversão precisa escolher uma resolução. O ajuste de escala controla isso, e um número maior não custa qualidade: o desenho é redesenhado em vez de ampliado, então fica perfeitamente nítido em qualquer tamanho que você pedir.

Um hábito útil é pensar no maior lugar em que a imagem vai aparecer e dobrar, o que cobre as telas de alta densidade. Para um ícone de aplicativo, ajuste a escala para cair exatamente no número de pixels que a plataforma pede.

O SVG guarda texto como texto e se refere a uma fonte pelo nome, então se a fonte não estiver embutida no arquivo, quem desenha substitui por outra e o seu logotipo cuidadosamente espaçado sai torto. Esse é, de longe, o motivo mais comum de uma conversão de SVG para PNG parecer quebrada.

A solução definitiva está no programa de design: converta o texto em contornos antes de exportar e as letras viram formas que não podem ser trocadas. De quebra, o arquivo fica seguro para entregar a qualquer pessoa.

As áreas transparentes continuam transparentes, então um logotipo pousa sobre qualquer fundo sem arrastar um retângulo branco atrás.

Quem desenha é o resvg e não o seu navegador, o que significa que a saída é idêntica em qualquer máquina. Um conversor que desenha por meio de um canvas dá resultados um pouco diferentes no Chrome e no Safari — exatamente o tipo de diferença que só aparece depois que o arquivo já foi aprovado.

Formas simples, traços e preenchimentos passam exatos. Onde os motores começam a divergir é na ponta elaborada da especificação: desfoques gaussianos, filtros de sombra, modos de mesclagem e máscaras construídas a partir de outras máscaras.

O resvg implementa as partes da especificação que os arquivos reais usam e é deliberadamente honesto quanto ao resto: um filtro sem suporte é omitido em vez de aproximado por algo que parece quase certo. Se um efeito importa, olhe o PNG em vez de supor, e se ele sumiu, achate-o no programa de design antes de exportar.

Um SVG costuma ter alguns kilobytes porque é uma descrição e não uma imagem. O PNG é uma grade de pixels, e essa grade cresce com o quadrado da escala: dobrar a escala quadruplica o arquivo.

Um logotipo de 4 KB como SVG pode pesar vários megabytes como PNG de 4000 pixels. Não é defeito, é a aritmética do formato — mas é uma boa razão para escolher a resolução de que você precisa e não a maior que aparece.

Este é um dos motivos mais comuns para a conversão, e a resposta é firme: as plataformas pedem medidas exatas em pixels, então ajuste a escala para cair nelas e não perto delas. Redimensionar o PNG depois joga fora a razão de ter começado de um vetor.

Para um favicon, note ainda que o que se quer normalmente é um ICO e não um PNG, porque um ICO guarda vários tamanhos num arquivo só. Converta para PNG no maior tamanho de que precisa e use a página de PNG para ICO para o restante.

Um SVG pode se referir a uma imagem externa, a uma fonte externa ou a uma folha de estilo que está em outro arquivo. Essas referências não fazem parte do SVG, então quando o arquivo chega aqui sozinho, aquilo para o que elas apontavam não vem junto.

O resultado é um PNG com uma fotografia faltando ou uma fonte trocada. Se o desenho parecia completo no programa de design e incompleto aqui, quase sempre é por isso: exporte de novo com os recursos embutidos em vez de vinculados.

Solte a pasta inteira. Cada arquivo é desenhado na mesma escala e volta dentro de um ZIP, que costuma ser o que um conjunto de ícones quer: a uniformidade do conjunto pesa mais do que cada peça ser individualmente ideal.

Como o desenho acontece na sua máquina, não há limite por arquivo nem fila, e como é resvg e não um canvas de navegador, o ducentésimo ícone é desenhado exatamente como o primeiro.