Converter SVG para WebP

A qualidade padrão aqui é 92, bem mais alta que os 75–82 que você usaria para uma fotografia, e é de propósito.

Toda compressão com perda é pensada para variações graduais de cor. Os SVGs produzem o contrário: grandes áreas de cor perfeitamente chapada que se encontram em bordas duras. Com ajustes de qualidade intermediários, isso aparece como manchas leves dentro das formas sólidas e um halo suave ao longo dos contornos, as duas coisas bem mais visíveis num logotipo limpo que numa fotografia com o mesmo ajuste.

• 95–100: praticamente indistinguível de uma renderização sem perda. Use para logotipos, ícones e tudo o que tiver texto.
• 88–94: a faixa padrão. Limpo na maioria dos designs.
• 75–87: os artefatos ficam visíveis em volta das bordas e na cor chapada.
• Abaixo de 75: claramente degradado em gráficos.

Renderize maior antes de subir a qualidade. Os artefatos acompanham o tamanho do pixel, então uma renderização de 2048 px com qualidade 90 costuma superar uma de 512 px com qualidade 100, e continua nítida se um dia a imagem for exibida maior.

Como em qualquer conversão de SVG para bitmap, confira as fontes. Se o arquivo cita uma fonte pelo nome em vez de converter o texto em contornos, o renderizador a substitui pela que tiver. Converta o texto em traçados na sua ferramenta de design se as letras importarem.

Como escolher entre os três destinos bitmap

• WebP: o melhor para um site que você controla. Transparência, bordas limpas, o arquivo mais leve.
• PNG: o melhor quando você não consegue prever o que vai abri-lo. Transparência, bordas limpas, compatibilidade universal, arquivo mais pesado.
• JPG: só quando algo exigir especificamente. Sem transparência, e a compressão combina mal com gráficos chapados.

Servir um vetor e um bitmap ao mesmo tempo

Se você quer a nitidez do SVG onde ele é suportado e um bitmap de reserva nos outros casos, o elemento <picture> resolve:

<picture>
  <source srcset="logo.svg" type="image/svg+xml">
  <img src="logo.webp" alt="…">
</picture>

Na prática todos os navegadores atuais usam o SVG, então isso protege principalmente contra clientes incomuns.

Como tratamos SVG com segurança

O SVG é um documento com estrutura e não um bloco de pixels, e um escrito com más intenções pode tentar coisas que uma fotografia não consegue: ler arquivos do servidor, fazer requisições de rede para fora ou carregar scripts. É justamente por isso que tantas plataformas recusam envios de SVG e mandam as pessoas para cá.

Duas coisas tornam isso seguro aqui. Você recebe um WebP, nunca o SVG, então nada do que está embutido no arquivo pode rodar no seu navegador. E cada arquivo enviado é verificado antes que qualquer coisa o analise: declarações de tipo de documento, definições de entidades, scripts, manipuladores de eventos e referências a recursos externos fazem o arquivo ser recusado em vez de consertado. Imagens embutidas como URI de dados e referências internas, como gradientes, não são tocadas, então as exportações normais de ferramentas de design são convertidas sem problemas.

Converter um conjunto de ícones

Adicione quantos arquivos quiser; cada um é renderizado na largura escolhida com o próprio download. Se você precisa do mesmo ícone em vários tamanhos, rode o lote uma vez por tamanho: cada vez ele é renderizado a partir do vetor em vez de redimensionar um resultado anterior, então todos os tamanhos ficam igualmente nítidos.