Convertir SVG en AVIF

L’AVIF est le format d’image fixe le plus efficace en usage général et la migration vaut le coup pour les photographies, les captures d’écran et les photos de produits. Aucun de ces raisonnements ne transfère sur un dessin. Un SVG est une description de formes, donc il est déjà à peu près aussi petit que l’image peut être exprimée, et il se rend à n’importe quelle taille que la mise en page lui donne sans un second fichier.

La mesure : un dessin de test de 140 octets rendu à la largeur par défaut de 1 024 pixels est sorti en AVIF de 9 730 octets. De vrais logos sont plus gros en SVG — quelques kilooctets en général — mais la conclusion tient à cette échelle aussi, et l’AVIF est celui qui a aussi besoin d’un srcset et d’un repli. Si la raison de cette conversion était le compte d’octets, elle travaille contre vous.

Il y en a quatre, et ils méritent d’être connus parce qu’ils ne sont pas évidents. Le premier est un SVG qui n’est pas vraiment un vecteur : un fichier produit en traçant une photographie, ou un fichier avec une image raster intégrée en base64, qui peuvent tous deux faire des centaines de kilooctets et s’encoderont bien plus petits en AVIF. Le second est un dessin qui s’appuie sur des filtres — flous gaussiens, modes de fusion, découpes complexes — que les navigateurs implémentent avec de vraies différences, donc rasteriser une fois rend le résultat identique partout.

Le troisième est une contrainte de pipeline : un CDN de transformation, un proxy d’image ou un CMS qui gère les formats raster et refuse le SVG. Le quatrième est la confiance — un SVG est du XML qui peut porter du script et des références externes, donc un site qui accepte des dessins d’utilisateurs les rasterise souvent plutôt que de maintenir un assainisseur. N’importe lequel de ces cas rend cette conversion correcte. « Tout le reste est en AVIF maintenant » ne le fait pas.

La propriété à laquelle on renonce est facile à sous-estimer. Un seul SVG sert un téléphone en densité 3, un ordinateur portable en 2, un écran externe en 1 et une feuille de style d’impression, tous à partir des mêmes octets, et il est net sur chacun. Au moment où il devient un AVIF, il n’en sert bien qu’une seule.

Récupérer le reste veut dire rendre à plusieurs largeurs et écrire un srcset, ce qui fait trois ou quatre fichiers et un bloc de balisage là où il y avait un fichier et rien. Cette complexité est le vrai coût de cette conversion, et il est plus grand que les kilooctets de part et d’autre de la comparaison.

Le réglage d’échelle est la seule décision que la conversion vous demande. Le rendu par défaut fait 1 024 pixels de large et la hauteur suit les proportions du dessin ; la plage va de 0,1 à 10, ce qui donne de 102 à 10 240 pixels.

L’habitude qui vaut le coup est de trouver la plus grande largeur CSS que l’image occupera jamais et de rendre au double, ce qui couvre les écrans 2× sans aller jusqu’à un srcset complet. Un logo affiché à 180 pixels veut un rendu de 360 pixels, pas de 1 024 — et à ces dimensions l’AVIF est vraiment petit, ce qui ne change pas le fait que le SVG était plus petit et servait toutes les densités d’un coup.

L’AVIF est la voie intra-image d’un codec vidéo, construite pour prédire des blocs à partir de leurs voisins et jeter le détail résiduel qu’un œil en mouvement ne remarquera pas. Sur une photographie, ce résiduel est la texture. Sur un dessin, c’est le bord d’un caractère, et la qualité par défaut de 82 est réglée pour la première.

Le résultat visible est un léger adoucissement le long des contours nets et, aux réglages plus bas, un fin mouchetage dans les grands aplats là où l’encodeur a décidé que la différence importait peu. Poussez la qualité vers 95 pour les aplats. À ces dimensions cela coûte des kilooctets en un seul chiffre et c’est la différence entre un trait qui a l’air dessiné et un trait qui a l’air photographié.

Le canal alpha passe : sur un dessin de test le pixel de coin de l’AVIF résultant se lit 0,0,0,0, donc un signe détouré se dépose sur n’importe quel fond exactement comme le SVG le faisait. Ce n’est pas universel parmi les cibles raster — la voie GIF sur ce site rend le même coin en noir opaque.

Il est stocké comme un second plan codé à côté de la couleur, effectivement une petite seconde image à l’intérieur du conteneur. Sur une photographie cette surcharge se perd dans le bruit ; sur un dessin simple où le fichier entier fait quelques kilooctets, c’est une part visible du total, et c’est en partie pour cela que les chiffres ci-dessus sont ce qu’ils sont.

Tous les grands navigateurs actuels décodent l’AVIF et le font depuis plusieurs années, ce qui suffit à la plupart des sites pour le servir directement. Le SVG est lu par tout depuis bien avant cela, et par bien des choses qui ne sont pas un navigateur : outils de design, logiciels de bureautique, systèmes de billetterie, clients de messagerie qui afficheraient une image cassée pour un AVIF.

Donc remplacer un vecteur par un AVIF réduit l’ensemble des choses qui peuvent afficher l’image, et l’atténuation habituelle — un élément picture avec une source de repli — veut dire livrer deux fichiers là où le SVG seul aurait fonctionné aux deux endroits. C’est un vrai coût sans bénéfice assorti.

L’encodeur AV1 est le plus gros module WebAssembly que ce site livre et le plus lent à exécuter, parce que faire un AVIF fixe veut dire faire une recherche intra-image AV1. Un seul dessin de 1 024 pixels a pris environ une seconde de bout en bout en test, chargement de l’encodeur compris pour la première fois.

Pour un seul fichier, ce n’est rien. Pour un dossier de deux cents illustrations, c’est une attente véritable, et elle se répète à chaque build si cela s’intègre à un pipeline. Cela vaut la peine d’être pesé contre le résultat en octets plutôt que séparément — passer du temps de build à rendre un vecteur plus gros est un mauvais échange dans les deux directions.

Déposez le dossier. Chaque dessin est rendu à la même échelle et encodé avec la même qualité, et les résultats reviennent dans un ZIP. Une échelle partagée est ce qu’un jeu d’illustrations veut en général, parce que la cohérence de l’ensemble se lit mieux que n’importe quel fichier individuellement optimal.

Leurs proportions ne s’accorderont pas à moins que les viewBox sources ne l’aient fait — l’échelle fixe la largeur et la hauteur suit chaque dessin — donc vérifiez les dimensions avant de les câbler dans une grille qui suppose un rapport d’aspect commun. Et gardez les SVG : ce sont les copies maîtresses, et les AVIF sont un export qui peut être régénéré à n’importe quelle taille.

resvg dessine le SVG et l’encodeur AV1 tourne en WebAssembly dans cet onglet, donc le dessin n’est jamais téléversé. Le plafond gratuit est de 100 Mo par fichier, et un logo complexe en SVG est en général très en dessous, ce qui supprime la question de la file d’attente et du quota.

Pour un asset non sorti, une marque cliente, ou un logo sous embargo, c’est la propriété qui compte. Une conversion qui ne quitte jamais le navigateur supprime la question de savoir si le service de conversion a vu le fichier, ce qui est différent d’y répondre avec une politique de confidentialité.