Como converter um logotipo SVG para PNG no tamanho certo

O PNG é o formato bitmap mais próximo do que o SVG oferece: sem perdas, com bordas nítidas e fundo transparente, então o logotipo fica limpo sobre qualquer cor.

O PNG é desenhado no tamanho que o SVG declara: os atributos width e height, ou o viewBox quando eles faltam. O nosso próprio logotipo é um bom exemplo da armadilha. O arquivo só declara viewBox="0 0 32 32", então o PNG saiu com 32 × 32 pixels: serve para a aba do navegador, mas não para uma apresentação.

A correção leva um minuto. Abra o SVG em qualquer editor de texto, encontre a tag <svg> do início e acrescente width e height na mesma proporção do viewBox, por exemplo width="512" height="512". Salve e converta de novo: o logotipo é redesenhado a partir das formas no novo tamanho.

Convertemos o nosso logotipo de 304 bytes depois de declarar quatro tamanhos diferentes. Cada PNG foi redesenhado a partir das formas, então mesmo o maior tem bordas perfeitamente limpas, e os arquivos continuam pequenos porque um logotipo é quase só cor chapada.

Também testamos isso. Esticado para 512 pixels num editor de imagens, o PNG de 32 pixels virou um quadrado mole e borrado: o programa só consegue adivinhar os pixels que faltam. A versão redesenhada do SVG em 512 pixels saiu nítida. Sempre volte ao SVG e converta no tamanho de que precisa, em vez de ampliar um PNG que você já tem.

SVG para WebP mantém o fundo transparente e gerou um arquivo menor: 5,6 KB para o logotipo de 512 pixels contra 11,7 KB em PNG, ótimo para sites. SVG para JPG também funciona, mas o JPG não tem transparência, então o fundo fica branco. Para impressão, escolha SVG para PDF: o logotipo continua sendo um desenho vetorial, nítido em qualquer tamanho de impressão, e o nosso ocupou 1,2 KB qualquer que fosse o tamanho declarado.

Se o texto do logotipo usa uma fonte que não está incorporada nem convertida em contornos, ele pode ser desenhado com outra parecida. Designers costumam converter o texto em contornos antes de entregar um logotipo; se o seu ficar diferente, peça uma versão com contornos. Imagens que o SVG vincula de outros sites não são carregadas.

Usamos o arquivo de logotipo que este site serve, sem mudanças além da largura e da altura que acrescentamos, e o convertemos com os conversores de SVG deste site, que desenham a imagem com o librsvg no mesmo software dos nossos servidores. O tamanho dos arquivos do seu logotipo vai depender das cores e dos detalhes, mas a regra vale para qualquer SVG: o tamanho declarado decide o tamanho do PNG.