Converter SVG para AVIF

AVIF é o formato de imagem parada mais eficiente em uso geral, e vale a migração para fotografias, capturas de tela e fotos de produto. Nada desse raciocínio se transfere para um desenho. Um SVG é uma descrição de formas, então já é praticamente do menor tamanho que a imagem pode ser expressa, e renderiza em qualquer tamanho que o layout der, sem precisar de um segundo arquivo.

A medição: um desenho de teste de 140 bytes renderizado no padrão de 1.024 pixels virou um AVIF de 9.730 bytes. Logos de verdade são maiores como SVG — alguns kilobytes é típico —, mas a conclusão se mantém nessa escala também, e o AVIF é o que ainda precisa de um srcset e uma reserva. Se o motivo desta conversão era contagem de bytes, ela está trabalhando contra você.

São quatro, e vale conhecer porque não são óbvios. O primeiro é um SVG que não é realmente um vetor: um arquivo produzido traçando uma fotografia, ou um com um raster base64 embutido, os dois podendo chegar a centenas de kilobytes e codificando bem menor como AVIF. O segundo é um desenho que depende de filtros — desfoques gaussianos, modos de mesclagem, recorte complexo — que navegadores implementam com diferenças reais, então rasterizar uma vez torna o resultado idêntico em qualquer lugar.

O terceiro é uma restrição de pipeline: uma transformação de CDN, um proxy de imagem ou um CMS que lida com formatos raster e recusa SVG. O quarto é confiança — um SVG é XML que pode carregar script e referências externas, então um site que aceita desenhos de usuários frequentemente rasteriza em vez de manter um sanitizador. Qualquer um desses torna esta conversão correta. «Tudo o mais agora é AVIF» não torna.

A propriedade abandonada é fácil de subestimar. Um único SVG serve um celular em densidade 3×, um notebook em 2×, um monitor externo em 1× e uma folha de estilo de impressão, tudo a partir dos mesmos bytes, e fica nítido em todos. No momento em que vira um AVIF, serve bem exatamente um desses.

Recuperar o resto significa renderizar em várias larguras e escrever um srcset, que são três ou quatro arquivos e um trecho de marcação onde havia um arquivo só e nenhum. Essa complexidade é o custo real desta conversão, e é maior que os kilobytes de qualquer lado da comparação.

O ajuste de escala é a única decisão que a conversão pede. O padrão renderiza 1.024 pixels de largura e a altura segue as proporções do próprio desenho; a faixa vai de 0,1 a 10, dando de 102 a 10.240 pixels.

O hábito que vale ter é achar a maior largura CSS que a imagem vai ocupar algum dia e renderizar no dobro disso, o que cobre telas 2× sem precisar de um srcset completo. Uma logo mostrada a 180 pixels quer uma renderização de 360 pixels, não uma de 1.024 — e nessas dimensões o AVIF é genuinamente pequeno, o que não muda o fato de que o SVG era menor e servia todas as densidades de uma vez.

AVIF é o caminho intra-quadro de um codec de vídeo, feito para prever blocos a partir de seus vizinhos e descartar o detalhe residual que um olho em movimento não perceberia. Numa fotografia esse resíduo é textura. Num desenho é a borda de uma letra, e a qualidade padrão de 82 é ajustada para o primeiro caso.

O resultado visível é um leve amolecimento ao longo de bordas nítidas e, em ajustes mais baixos, uma manchinha em preenchimentos planos grandes onde o codificador decidiu que a diferença não importa. Suba a qualidade para perto de 95 em arte plana. Nessas dimensões custa alguns kilobytes e é a diferença entre uma marca que parece desenhada e uma que parece fotografada.

O canal alfa atravessa: num desenho de teste, o pixel do canto do AVIF resultante lê 0,0,0,0, então uma marca recortada cai sobre qualquer fundo exatamente como o SVG fazia. Isso não é universal entre os alvos raster deste site — o caminho do GIF aqui transforma o mesmo canto em preto opaco.

É guardado como um segundo plano codificado ao lado da cor, na prática uma pequena segunda imagem dentro do contêiner. Numa fotografia essa despesa desaparece no ruído; num desenho simples, onde o arquivo inteiro tem alguns kilobytes, é uma fatia visível do total, e parte do motivo dos números acima serem o que são.

Todo navegador atual relevante decodifica AVIF, e assim é há vários anos, o que é suficiente para a maioria dos sites servir diretamente. SVG é lido por tudo desde muito antes disso, e por muita coisa que não é navegador: ferramentas de design, software de escritório, sistemas de chamados, clientes de e-mail que mostrariam uma imagem quebrada para um AVIF.

Então substituir um vetor por um AVIF estreita o conjunto de coisas capazes de exibir o ativo, e a mitigação usual — um elemento picture com uma fonte de reserva — significa enviar dois arquivos onde o SVG sozinho teria funcionado nos dois lugares. É um custo real sem benefício correspondente.

O codificador AV1 é o maior módulo WebAssembly que este site entrega e o mais lento de rodar, porque fazer um AVIF parado significa realizar uma busca intra-quadro de AV1. Um único desenho de 1.024 pixels levou cerca de um segundo do início ao fim em teste, incluindo buscar o codificador pela primeira vez.

Para um arquivo só, isso não é nada. Para uma pasta de duzentas ilustrações é uma espera real, e se repete a cada build se isso estiver num pipeline. Vale pesar isso junto com o resultado em bytes, não separadamente — gastar tempo de build para deixar um vetor maior é uma troca ruim nas duas direções.

Solte a pasta. Todo desenho é renderizado na mesma escala e codificado com a mesma qualidade, e os resultados voltam como um ZIP. Uma escala compartilhada é o que um conjunto de ilustrações costuma querer, já que consistência entre o conjunto lê melhor do que qualquer arquivo individual sendo ótimo sozinho.

As proporções não vão bater a menos que os viewBoxes de origem batessem — a escala fixa a largura e a altura segue cada desenho —, então confira as dimensões antes de encaixar num grid que assume uma proporção comum. E guarde os SVGs: eles são as matrizes, e os AVIFs são uma exportação que pode ser regenerada em qualquer tamanho.