Convertir GIF en SVG

La vectorisation cherche les frontières entre des zones de couleur voisine et dessine un contour autour de chacune. Elle réussit donc quand ces zones existent vraiment, avec des bords francs et aucune variation fine à l’intérieur.

Une image indexée est exactement cela par construction. Une frame de GIF est dessinée à partir d’une palette d’au plus 256 entrées, donc chaque pixel est une valeur exacte parmi un petit nombre et les zones sont déjà plates avant que le traceur ne les regarde. La limite qui fait du GIF un mauvais format photographique devient, pour cette unique conversion, ce qui en fait une bonne source.

Il faut être précis sur ce qui sort. Le SVG n’est pas le dessin qu’une personne a fait en 1998 avant d’exporter en GIF ; c’est un nouvel ensemble de chemins calés sur les pixels de cet export. Là où l’original avait un cercle parfait, la trace a une courbe fermée qui longe un cercle fait de pixels.

Aux tailles où ces fichiers sont réellement utilisés, la différence ne se voit pas. Ce qui se voit, c’est partout où l’original avait quelque chose qu’un chemin ne sait pas représenter : un dégradé devient des bandes étagées, une ombre portée devient plusieurs formes concentriques, et l’antialiasing le long d’une courbe devient un mince contour supplémentaire dans une couleur intermédiaire.

L’option « couleurs » réduit l’image à ce nombre de plages plates avant que les contours ne soient dessinés, et c’est le réglage qui a le plus d’effet à la fois sur l’aspect et sur la taille du résultat. Quatre donne les formes les plus nettes possibles et convient à une marque monochrome. Huit est la valeur par défaut et couvre la plupart des logos.

Seize et trente-deux suivent la source de plus près et multiplient le nombre de chemins. L’instinct de choisir le plus haut est presque toujours mauvais. Davantage de couleurs veut dire que la frange antialiasée autour de chaque bord reçoit ses propres formes au lieu d’être absorbée dans la plage de chaque côté, et ces formes sont à la fois le gros du poids et la première chose que vous supprimeriez à la main.

Le réglage de détail commande deux seuils d’erreur et une taille minimale de forme. Lisse accepte un calage plus libre sur les pixels de bord et supprime toute forme plus petite que seize pixels ; équilibré divise ces tolérances par deux et supprime les formes en dessous de huit ; net suit les pixels de près et garde tout ce qui dépasse deux.

L’effet pratique porte sur les mouchetures. L’antialiasing laisse un éparpillement de fragments d’un ou deux pixels le long de chaque bord, et en mode net ils deviennent tous des chemins — des centaines, invisibles un par un et responsables de la plus grande partie du poids. Lisse les élimine et arrondit légèrement les angles en passant. Pour un logo qui sera agrandi, lisse est presque toujours la meilleure réponse.

Si le GIF a été fabriqué à partir d’une photo ou d’un dégradé, l’encodeur a presque certainement appliqué un tramage — un semis de pixels de deux couleurs de la palette en damier, pour que l’œil en fasse la moyenne. Cela ressemble à une transition douce et n’en est pas une.

Pour un traceur, ce sont des milliers de petites zones alternées, dont chacune devient un chemin. La sortie est énorme, le fichier prend un temps sensible à s’afficher, et le résultat visuel est un gâchis postérisé plutôt que le dégradé qu’il imitait. C’est l’indicateur le plus fiable pour savoir si cette conversion va marcher : zoomez dans le GIF, et si les zones plates se révèlent être des damiers, arrêtez-vous là.

Toute image dont le plus grand côté dépasse 1 600 pixels est ramenée à cette taille avant que les contours ne soient cherchés. Le coût de la trace croît avec le nombre de bords, et une grande image a un bord presque partout, si bien que sans plafond une grande source produit un SVG de plusieurs mégaoctets en dizaines de secondes.

Pour cette conversion, le plafond ne coûte rien, et ce n’est pas une nuance. La sortie est indépendante de la résolution : une marque tracée depuis une image à 1 600 pixels et la même marque tracée depuis 4 000 pixels s’affichent identiquement à n’importe quelle taille à l’écran ou à l’impression. Ce qui change, c’est la précision avec laquelle les chemins épousent la grille des pixels, ce qui est une différence qu’il faut zoomer sur la source pour voir.

Une capture d’écran contenant du texte a été mesurée à quarante fois la taille de l’image source une fois tracée. Chaque lettre antialiasée devient sa propre collection de formes, les pleins internes des lettres deviennent des chemins séparés, et le résultat est à la fois énorme et un peu faux sur chaque jambage.

La bonne chose à faire quand le graphique contient des mots est de tracer seulement le symbole et d’inscrire les mots en vrai texte dans le SVG ensuite, dans la police réellement utilisée. Cela produit un fichier plus petit, une sortie plus nette à toutes les tailles, et quelque chose qui peut être édité ou traduit plus tard. Tracer le texte n’est raisonnable que quand le lettrage est vraiment un dessin sur mesure plutôt qu’une police.

Rien ici n’essaie de prédire si votre GIF particulier se tracera bien. Une heuristique sur le nombre de couleurs serait une supposition, et la vraie réponse est disponible un instant plus tard gratuitement : tracez le fichier, puis regardez ce qui est sorti face à ce qui est entré.

La page affiche les deux tailles, si bien qu’un résultat quarante fois plus grand s’annonce immédiatement. Traitez cela comme un signal plutôt que comme une curiosité — un SVG plus gros que sa source vous dit que l’image n’avait pas de zones plates à trouver, et aucune combinaison de réglages ne changera ce fait sur l’image.

Le traceur est une petite bibliothèque JavaScript — 46 Ko, choisie en partie parce que les meilleures alternatives ont une licence qu’un site statique ne peut pas respecter — et elle tourne dans l’onglet. Le GIF est décodé, réduit, tracé et écrit en SVG sans qu’une requête ne quitte votre navigateur. Vous pouvez le confirmer en ouvrant les outils de développement et en regardant l’onglet réseau pendant la conversion, ou en débranchant la machine et en convertissant quand même.

L’avantage pratique au-delà de la vie privée est la vitesse sur les petits fichiers. Il n’y a pas de téléversement, pas de file d’attente, pas de téléchargement du résultat depuis ailleurs, donc un logo se trace en moins d’une seconde et essayer trois nombres de couleurs différents ne coûte rien d’autre que les clics. Un dossier d’une trentaine de petites icônes traitées en lot rentre dans la même seconde par fichier et permet de comparer rapidement la sortie à la source.