Postériser puis vectoriser : pourquoi le convertisseur vous a rendu un mauvais SVG

La plupart des outils image vers SVG postérisent puis vectorisent. Ce que cela fait aux dégradés, aux bords et aux nœuds, et ce qu'une reconstruction change.

Ouvrez n'importe quel outil « PNG vers SVG », envoyez un logo avec un dégradé doux, et vous obtenez des bandes. Envoyez une icône propre, et vous obtenez plus de nœuds qu'un plan de métro. Les outils diffèrent par leur interface, mais presque tous appliquent la même recette : postériser, puis vectoriser.

La recette

  • Réduire l'image à N couleurs, en général en regroupant les pixels.
  • Pour chaque couleur, trouver les taches de pixels connexes.
  • Détourer chaque tache par un polygone, puis lisser le polygone en courbes.
  • Empiler les résultats et les écrire dans le fichier.

C'est rapide, facile à programmer et exactement ce que faisaient les vectoriseurs classiques des années 2000. Ses défauts tiennent à la méthode elle-même ; aucun réglage ne les corrige.

Défaut 1 : les dégradés deviennent des rayures

Un dégradé, ce sont des milliers de couleurs légèrement différentes. Les ranger dans N seaux produit N bandes unies avec des bords durs entre elles. Augmenter N donne des bandes plus fines et plus de tracés ; cela ne donne jamais un dégradé.

Défaut 2 : deux couleurs, deux bords

Chaque couleur est vectorisée séparément, donc la frontière entre le rouge et le bleu est tracée deux fois : une fois du côté rouge, une fois du côté bleu. Les deux contours ne coïncident jamais exactement. Là où ils se chevauchent, on voit une couture sombre ; là où ils se manquent, un filet de fond apparaît. Un plotter de découpe coupe les deux lignes.

Défaut 3 : on fait confiance aux pixels les yeux fermés

Blocs JPEG, anticrénelage et bruit du générateur ne sont que des pixels pour un vectoriseur, qui les détoure donc fidèlement. Le résultat a des bords en escalier, des îlots de couleur minuscules et des milliers de nœuds pour une forme qu'un graphiste dessinerait avec vingt.

Ce qu'une reconstruction fait à la place

svgize part de l'autre bout : quel dessin, fait d'aplats, de dégradés et de courbes propres, aurait produit ces pixels, une fois prise en compte la façon dont l'image a été dégradée ? Il mesure d'abord le flou, la qualité JPEG et le bruit. Il teste des hypothèses de dégradé sur les pixels et garde celles qui les expliquent. Il attribue chaque pixel à la forme à laquelle il appartient, de sorte que la frontière entre deux couleurs est une seule courbe, partagée par les deux. Il ajuste cette courbe à la fraction de pixel près, trouve les angles et lisse les portions où la source elle-même ondule.

La différence se lit dans trois chiffres à côté de chaque résultat : tracés, couleurs et taille du fichier. Un logo propre, ce sont quelques tracés, quelques couleurs et quelques kilo-octets.

Voir sur votre propre fichier