Convertir SVG en GIF

C’est la chose à régler avant de convertir quoi que ce soit, et presque rien de ce qui propose cette conversion ne le mentionne. Le GIF a bien une transparence, mais sous une seule forme : une entrée de la table de couleurs peut être marquée invisible. L’encodeur utilisé ici n’en marque aucune. Il construit une palette, l’écrit comme une liste de triplets rouge-vert-bleu, et au moment où le fichier est assemblé il n’y a nulle part où l’information d’alpha puisse vivre.

Un dessin rendu depuis un SVG a des pixels transparents là où rien n’a été dessiné, donc chacun d’eux doit devenir quelque chose d’opaque avant que la palette soit construite. Ils sont remplis avec la couleur de fond réglée sur cette page, qui commence au blanc. Un logo dessiné sur rien arrive donc comme un logo sur une carte blanche — invisible sur une page blanche et parfaitement visible sur une page sombre, ce qui est le cas qui mérite d’être vérifié avant de l’envoyer.

Le sélecteur de couleur de fond sur cette page décide ce que deviennent les zones vides, et il est lu avant que quoi que ce soit d’autre ne se passe : le remplissage est peint sur le canvas d’abord et le dessin rendu est composé dessus en une seule passe. Cet ordre est la raison pour laquelle les bords sortent nets. Remplir après coup, ou mettre à l’échelle un rendu transparent puis le remplir, laisse une frange de pixels semi-transparents le long de chaque courbe que le remplissage assombrit ensuite.

Faites correspondre la valeur à ce sur quoi le GIF sera posé. Si la destination est une page blanche, laissez tel quel. Si c’est un panneau coloré et que vous connaissez la valeur hexadécimale, tapez-la et la jointure disparaît. Si la destination est susceptible de changer — un modèle qui est blanc cette année et sombre l’an prochain — mettez plutôt un rectangle couvrant toute la viewBox dans le dessin, pour que le fichier porte son propre fond et ne dépende pas d’un réglage fait une fois.

Un SVG n’a pas de taille, donc la conversion en choisit une : 1 024 pixels de large par défaut, la hauteur suivant les proportions du dessin. Ce réglage par défaut convient à PNG et WebP, où une grande image plate coûte peu. Il convient mal au GIF, parce que les endroits qui en demandent encore — blocs de signature, avatars, icônes de forum — tournent presque toujours autour de 100 à 300 pixels.

Utilisez le réglage d’échelle. À 0,2 le même dessin rend 205 pixels de large, ce qui est plus proche de ce que ces destinations affichent, et le fichier rétrécit à peu près comme la surface. Envoyer un GIF de 1 024 pixels là où 150 étaient voulus veut dire que le logiciel de quelqu’un d’autre le réduit, en général mal et toujours sans demander.

La réduction est moins brutale que le nombre 256 ne le suggère, au moins sur le genre d’œuvres qui arrivent en SVG. Les aplats utilisent une couleur chacun, les traits en utilisent une de plus, et l’antialiasing ajoute un étalement de nuances intermédiaires le long de chaque bord — ce qui sur un dessin à deux couleurs fait quelques dizaines de valeurs au total.

Sur le fichier de test le quantificateur a produit une palette suffisamment petite pour que l’encodeur écrive une table de couleurs de seize entrées, la plus petite puissance de deux qui puisse la contenir, et le GIF 1 024 par 1 024 entier a fait 7 844 octets à partir d’un SVG de 140 octets. Les aplats se compressent extrêmement bien dans ce format ; le GIF stocke des suites d’indices identiques, et un dessin est en grande partie des suites.

Les dégradés sont le cas. Un remplissage linéaire ou radial sur une grande surface génère des centaines de valeurs distinctes, et la palette ne peut pas les contenir, donc le quantificateur choisit des représentants et le résultat fait des paliers au lieu de fondre. Sur un rendu de 1 024 pixels ces paliers sont assez larges pour être clairement visibles.

Les ombres portées douces, les bords flous et les superpositions semi-transparentes font la même chose, puisque chacun produit une plage de valeurs mélangées. Si le dessin a l’un de ces éléments et que la destination ne peut pas être dissuadée de vouloir un GIF, rendez plus petit — moins de pixels veut dire moins de mélanges distincts et moins de bandes visibles.

Le SVG peut animer. Il a des éléments SMIL, il répond à l’animation CSS, et un fichier peut porter du script. Le GIF peut aussi animer, ce qui donne envie de supposer que les deux se connectent. Ils ne se connectent pas : le moteur de rendu produit une image statique à l’état initial du dessin, et l’encodeur écrit exactement une image dans le fichier.

Donc un logo animé sort comme sa première pose, et aucun réglage ne change cela. Produire un GIF en mouvement à partir d’un SVG en mouvement est un travail différent — il faut lire l’animation et la capturer image par image, ce qui n’est pas ce que fait un moteur d’images fixes.

Le GIF est lisible par tout depuis 1987, et c’est la seule propriété qui compte pour celui qui a écrit l’exigence. Les clients de messagerie, les moteurs de forum, les portails intranet et les logiciels d’entreprise écrits avant le milieu des années 2000 lisent tous un GIF, et la personne qui a spécifié le format voulait une réponse qui ne pouvait échouer sur aucun d’eux.

Lisez le reste de cette spécification pendant que vous y êtes. Une exigence assez ancienne pour nommer le GIF épingle aussi en général une taille en pixels maximale et un nombre d’octets maximal, et le format est rarement la seule contrainte. Réussir toutes ces contraintes du premier coup est plus rapide que trois tours de rejet.

Cela vaut une tentative avant d’accepter le compromis. Bon nombre de systèmes qui disent GIF dans leur texte d’aide acceptent PNG dans leur code de validation, parce que le texte a été écrit avant le code et que le code couvre tout ce que la bibliothèque sous-jacente lit. Si cela passe, la transparence survit exactement et la réduction de couleur n’a jamais lieu.

Là où le GIF est vraiment exigé, prenez-le et choisissez la couleur de remplissage délibérément plutôt que d’accepter la valeur par défaut sans regarder. Le résultat est alors une image à fond plein qui a été décidée plutôt qu’une image qui s’est produite, et elle aura la même apparence pour chaque destinataire — ce qui est ce que l’exigence essayait d’obtenir au départ.

Déposez le dossier. Chaque SVG est rendu à la même échelle et encodé séparément, le tout renvoyé en ZIP. La palette est construite par image plutôt qu’à travers le jeu, donc la même couleur de marque peut atterrir à un index légèrement différent dans deux fichiers — invisible à l’usage, et une raison de ne pas s’attendre à ce que les fichiers soient comparables en octets.

Chaque fichier garde aussi ses propres réglages, donc la couleur de fond se choisit par rangée plutôt qu’une fois pour tout le dépôt. Pour un jeu allant dans un seul modèle cela veut dire régler la même valeur sur chacun, ce qui vaut la peine d’être fait avant de commencer plutôt que de la découvrir une signature à la fois ; la compensation est qu’un dossier contenant des œuvres pour deux fonds différents n’a pas à être scindé en deux passes.

resvg dessine le SVG et un petit encodeur construit le GIF, tous deux en WebAssembly sur votre machine, donc le dessin n’est jamais téléversé. C’est ce qui compte pour un asset non sorti, un logo client, ou un dessin sous embargo : une conversion qui ne quitte jamais le navigateur supprime la question de savoir si le service de conversion a vu le fichier.

Le plafond gratuit est de 100 Mo par fichier, ce qui dépasse largement n’importe quel logo raisonnable. Le batch fonctionne si vous avez plusieurs fichiers à convertir — déposez un dossier, prenez un ZIP — et chaque fichier garde ses propres réglages de fond et d’échelle.