Converter SVG para PNG

Não há controle de qualidade, porque o PNG não tem perda: não descarta nada, seja qual for o ajuste. A única decisão que influencia a aparência do resultado é a largura de saída.

Tamanhos sensatos para os usos comuns:

• Favicons e ícones pequenos: de 32 a 256 px. Tamanhos muito pequenos muitas vezes precisam de uma versão desenhada de propósito em vez de uma reduzida, porque o detalhe fino vira borrão abaixo de uns 32 px.
• Imagens web e logotipos: de 512 a 1024 px. Mais ou menos o dobro do tamanho em que vai ser exibido, para ficar nítido em telas de alta densidade.
• Apresentações e documentos: de 1024 a 2048 px.
• Impressão: tão grande quanto for prático. O alvo comum é 300 pixels por polegada impressa, então um gráfico de 15 cm de largura pede uns 1800 px.

Vale conferir as fontes. Se o seu SVG faz referência a uma fonte pelo nome em vez de converter o texto em contornos, o renderizador precisa substituí-la pela que tiver disponível, e o resultado pode não bater com o que você via na sua ferramenta de design. Se o texto importa, converta-o em traçados antes de exportar o SVG: a maioria das ferramentas de design tem um comando «criar contornos» ou «objeto em traçado».

Se o PNG resultante ficar mais pesado do que você gostaria, a compressão de PNG funciona especialmente bem com imagens que vêm de vetores, que costumam ter poucas cores diferentes. Converter para WebP costuma ser ainda melhor para uso na web.

Quando você precisa de um PNG em vez do SVG

• Uma plataforma recusa SVG. Muitas redes sociais, marketplaces, clientes de e-mail e gerenciadores de conteúdo antigos só aceitam PNG, muitas vezes pelos mesmos motivos de segurança explicados mais abaixo.
• Ícones de aplicativos, favicons e páginas em lojas de apps, que quase sempre especificam dimensões exatas em pixels.
• E-mail. O suporte a SVG nos clientes de e-mail é fraco e irregular; o PNG é universal.
• Inserir num documento ou numa apresentação, em que alguns programas renderizam SVG de forma imprevisível ou nem renderizam.
• Fluxos de impressão que esperam um arquivo bitmap numa resolução conhecida.
• O SVG usa fontes ou efeitos que são renderizados de outro jeito em outros lugares. Transformá-lo em bitmap congela a aparência para que todo mundo veja a mesma coisa.

Quando continuar usando o SVG

Para qualquer coisa num site que você controla, o SVG costuma ser melhor: muitas vezes pesa menos que o PNG e continua nítido em qualquer densidade de tela sem você precisar gerar vários tamanhos. Todos os navegadores atuais exibem SVG.

Converta quando precisar de um bitmap de tamanho fixo para um lugar que não aceita o vetor.

Como tratamos SVG com segurança

O SVG é incomum entre os formatos de imagem: é um documento com estrutura, não um bloco de pixels, e um escrito com más intenções pode tentar coisas que um JPG nunca conseguiria: ler arquivos do servidor, fazer requisições de rede para fora ou embutir scripts.

Duas coisas fazem com que isso não seja um problema aqui.

Primeiro, você recebe um PNG, nunca o SVG. Nada do que está embutido no arquivo pode rodar no seu navegador, porque o seu navegador nunca vê o arquivo.

Segundo, cada SVG enviado é verificado antes que qualquer coisa o analise. Arquivos que contêm declarações de tipo de documento, definições de entidades, scripts, manipuladores de eventos ou referências a recursos externos são recusados de cara em vez de consertados: reescrever um arquivo hostil e depois confiar no resultado é um problema bem mais difícil do que recusá-lo. Imagens embutidas como URI de dados e referências internas, como gradientes, não são afetadas, então os SVGs normais exportados de ferramentas de design são convertidos sem problemas.

Renderizar um conjunto completo de ícones

Adicione quantos SVGs quiser; cada um é renderizado separadamente no tamanho que você escolheu, com o próprio download. Se você precisa do mesmo ícone em vários tamanhos, rode o lote uma vez por tamanho: o vetor é renderizado de novo a cada vez em vez de redimensionado, então todos os tamanhos ficam igualmente nítidos.