Converter SVG para WebP

Um SVG é um conjunto de instruções — desenhe este traçado, preencha esta forma, contorne esta linha — sem resolução própria. Renderizar segue essas instruções num tamanho específico e registra o resultado como pixels, e a partir desse momento o desenho se foi e só a imagem permanece.

Então o tamanho escolhido no momento da conversão é o tamanho que você tem. Ampliar o WebP depois só consegue inventar os pixels do meio, exatamente a situação que a arte vetorial existe para evitar. Acertar a escala é todo o ofício desta conversão; o resto é detalhe.

A tela de um celular condensa dois ou três pixels de aparelho em cada pixel CSS, então uma imagem renderizada exatamente no tamanho de exibição parece mole na maioria dos aparelhos que vão vê-la. Renderizar em duas ou três vezes e deixar o navegador reduzir é a prática padrão e custa menos do que parece — um logotipo plano em 2x comprime para uma fração do que uma fotografia das mesmas dimensões custaria.

A exceção é qualquer coisa genuinamente grande. Uma imagem de destaque em largura total renderizada em 3x produz um arquivo que ninguém deveria baixar; ali, renderize em 2x e aceite, ou reconsidere se o SVG poderia simplesmente ser servido direto.

Um SVG nomeia suas fontes em vez de contê-las. Quando o renderizador tem a fonte, o texto sai correto; quando não tem, algo é substituído, em larguras diferentes — então uma marca escrita numa tipografia licenciada chega numa sans-serif genérica, na largura errada, com o layout ao redor quebrado.

A correção pertence ao programa de desenho, antes de exportar: converta o texto em contornos, para as letras virarem traçados e não dependerem de nada. O texto para de ser editável e passa a ser confiável, o que para um logotipo é a troca certa. Para um diagrama com rótulos que você quer manter editáveis, embuta a fonte no SVG em vez disso.

O WebP escrito aqui sempre tem perda — o controle de qualidade decide quanto o codificador aperta, e não há modo sem perda nesta dupla. O padrão de 82 é ajustado para fotografias, e em arte vetorial ele aparece no lugar errado: uma linha de um pixel pega um borrão, e a fronteira entre duas cores planas ganha um halo de pixels intermediários.

Suba para 95 ou mais para um logotipo, ícone ou gráfico, e esses artefatos somem enquanto o arquivo continua pequeno, porque cor plana comprime bem em qualquer ajuste. Uma ilustração com degradê e sombreamento suave se comporta como uma fotografia e não precisa de nada disso. Se a arte precisa sair exata em vez de próxima, renderize para PNG em vez disso.

Frequentemente. Se o desenho é um logotipo, um ícone ou uma ilustração simples indo para uma página web que você controla, o SVG costuma ser menor que qualquer versão rasterizada dele, nítido em qualquer zoom em qualquer tela, e recolorível por CSS sem produzir um segundo arquivo.

Converta quando algo recusa SVG, e várias coisas recusam: imagens de prévia de rede social precisam ser PNG ou JPG em dimensões fixas, clientes de e-mail são inconsistentes, muitos formulários de upload rejeitam o formato de imediato, e plataformas que aceitam upload de usuário frequentemente recusam por motivo de segurança — um SVG é XML e pode conter script.

Ícones vêm em conjuntos, não isolados. Solte a pasta inteira: cada arquivo é renderizado por vez na escala que você escolheu, mantém o nome com a extensão trocada, e tudo volta como um ZIP pronto para colocar num build.

Dois hábitos mantêm os resultados consistentes. Renderize todo ícone na mesma escala em vez de no olho, para o conjunto parecer intencional à primeira vista. E mantenha os SVGs no controle de versão como fonte — regenerar o conjunto inteiro num tamanho novo então custa uma passagem em vez de um redesenho.

A renderização acontece na aba do navegador, no seu próprio processador. Nada é enviado, então não há fila, contagem diária nem conta — e nenhum terceiro acaba guardando seus ativos de marca ainda não lançados, uma preocupação mais comum com logotipos do que com a maioria dos arquivos.

Também significa que uma pasta com duzentos ícones converte tão rápido quanto sua máquina consegue desenhá-los, em vez de tão rápido quanto conseguem ser enviados e buscados de volta.