Converter SVG para AVIF
Rasterize SVG em AVIF na largura que você escolher, com transparência preservada.
Prévia do arquivo AVIF gerado
O AVIF segura bem a qualidade em números baixos. Entre 50 e 70 já costuma ficar melhor que um JPG em 85.
SVG é desenho vetorial e não tem tamanho próprio. Escolha com folga: depois de virar AVIF, ampliar embaça.
Tamanho do arquivo
-
Convertendo…
Ver as 64 conversões de imagem. A conversão inteira roda no seu dispositivo. Nenhuma imagem é enviada para servidor nenhum.
Rasterizar vetor para o formato mais eficiente
Rasterizar um SVG só faz sentido em algumas situações: quando o desenho é complexo demais e custa processamento a cada carregamento, quando a plataforma de destino não aceita vetor, ou quando é preciso uma imagem de tamanho fixo, como na prévia de link de redes sociais. Se nenhuma dessas se aplica, manter o SVG costuma ser melhor.
Quando a rasterização é necessária e o projeto já padronizou AVIF, esta é a página. O AVIF guarda transparência com 256 níveis, então o fundo livre do desenho continua livre, e gera arquivos bem pequenos. Vale um cuidado com a qualidade: desenho vetorial é feito de bordas duras, que é onde compressão com perdas deixa marcas. Valores acima de 85 mantêm os contornos limpos.
Sobre a largura: como vetor não tem tamanho próprio, você escolhe. Pense no maior uso da imagem e acrescente folga, porque ampliar um AVIF depois embaça igual a qualquer outra imagem de pixel. E guarde o SVG original, que continua sendo a fonte da verdade para gerar outros tamanhos.
Como funciona a conversão
- Solte seus arquivos .svg na área de entrada, um ou vários.
- Escolha a largura da imagem gerada. A altura acompanha a proporção do desenho.
- O navegador desenha o vetor nesse tamanho, e o codificador AVIF é baixado na primeira conversão.
- Ajuste a qualidade. Para desenho com linhas finas, use 85 ou mais.
- Confira a prévia e baixe um arquivo ou o lote em ZIP.
Para que serve
- Projeto padronizado em AVIF Quando todas as imagens do site estão em AVIF, rasterizar os vetores que precisam virar imagem mantém o fluxo consistente.
- SVG complexo demais Ilustração com centenas de caminhos e filtros custa processamento a cada carregamento. Uma imagem pronta em AVIF é mais barata para o navegador.
- Prévia de link Redes sociais não aceitam SVG na imagem de compartilhamento. Uma versão rasterizada na largura certa é obrigatória.
- Plataforma que recusa SVG Muitos serviços bloqueiam vetor por questão de segurança. O AVIF passa sem restrição, com arquivo mínimo.
Perguntas frequentes
A transparência é preservada?
É, com 256 níveis. O AVIF guarda canal alfa completo, então bordas suaves e fundo livre continuam funcionando sobre qualquer cor.
Qual qualidade usar?
Acima de 85 para desenho vetorial. Borda dura e cor chapada são o conteúdo em que compressão com perdas deixa marcas mais visíveis. Como o arquivo fica pequeno de qualquer jeito, não há motivo para economizar.
Que largura devo escolher?
Pense no maior tamanho de exibição e dobre, se for para tela de alta densidade. Depois de gerado, ampliar embaça. Como o SVG original continua disponível, dá para gerar outro tamanho quando precisar.
Vale a pena sair do SVG?
Só quando há motivo: SVG muito complexo, plataforma que recusa vetor ou necessidade de imagem de tamanho fixo. Para logo simples em um site, o SVG costuma ser menor e melhor, porque escala sem limite.
Por que demora alguns segundos?
Porque codificar AVIF é caro e roda no seu processador, em WebAssembly de uma thread. Em imagens pequenas, típicas de logo, isso é rápido. Em larguras muito grandes, o tempo cresce.
Por que o texto saiu com outra fonte?
Porque o SVG declara a fonte pelo nome e ela não existe no seu computador. A solução é converter o texto em curvas no programa de origem antes de exportar. Confira sempre a prévia.
A conversão é segura? SVG pode conter script.
É segura. O arquivo é desenhado como imagem, e nesse modo o navegador não executa script nenhum. Referências externas por URL também não são carregadas.
Ferramentas relacionadas
Fontes
Os limites e formatos aplicados por esta ferramenta vêm das especificações oficiais abaixo, não de terceiros:
- Especificação SVG 2 (W3C) Especificação do formato de origem, que define o SVG como descrição de formas em XML.
- Especificação AVIF (Alliance for Open Media) Especificação do formato de destino, que descreve a codificação do AV1 e o suporte a canal alfa.
- SVG no MDN Web Docs Referência sobre SVG carregado como imagem, modo em que scripts não são executados.
- jSquash: codecs de imagem em WebAssembly A biblioteca que traz o codificador AVIF para dentro do navegador.
Termos relacionados
Esta página responde a quem procura por: