Convertir JPG en SVG

Un SVG décrit des formes géométriques par des chemins, des courbes de Bézier, des régions de couleur. Une photo JPG décrit des pixels. Notre convertisseur passe de l’un à l’autre par un algorithme de traçage (imagetracerjs), qui redessine l’image comme un assemblage de régions de couleur plates. Ce n’est pas une vectorisation au sens où le tracé retrouverait les formes d’origine : c’est une approximation par aplats.

Pour une photo, le résultat est presque toujours mauvais : le nombre de régions explose, la taille du SVG explose avec, et l’image n’est pas fidèle. Pour un logo, un picto, une capture d’écran avec peu de couleurs, le résultat peut être très bon, avec un SVG de quelques kilo-octets qui représente l’original avec fidélité. Le test a été mesuré avant la sortie de la fonctionnalité, et les chiffres sont dans le code source.

Le commentaire dans le code source documente les mesures faites avant la mise en service du pipeline. Un logo plat en PNG 6 Ko devient un SVG 16 Ko, round-trip presque parfait. Un dégradé est rendu en bandes, et l’œil le voit. Un screenshot avec du texte produit un SVG quarante fois plus gros que le PNG, parce que chaque glyphe est tracé comme un assemblage de chemins. Une photo vient quatre fois plus grosse que le PNG et posterisée.

Ces mesures expliquent pourquoi le pipeline est présenté comme « utile pour les logos, à éviter pour les photos ». Le code source est sans détour : « la qualité d’un tracé dépend presque entièrement de la simplicité du sujet ». Le preset par défaut est « balanced » avec 8 couleurs, et c’est un compromis mesuré entre fidélité et taille de fichier.

Le SVG produit a une largeur par défaut de 1024 pixels, et la hauteur est calculée à partir des proportions de l’image source. Cette résolution est fixée par le pipeline de tracé, et c’est explicite dans le code source. Pour un logo, c’est un peu grand, et le SVG est plus gros qu’il ne devrait. Pour une photo, c’est le dernier paramètre qu’on regarde, parce que le problème est la nature du tracé, pas la résolution.

Pour un usage où la taille du SVG compte, il faut ouvrir le fichier dans Inkscape ou Illustrator et le ré-exporter avec une largeur plus petite. Le SVG produit par le pipeline est techniquement vectoriel, mais il est aussi « fix-size » parce que les coordonnées des chemins sont calibrées pour 1024 pixels de large. Le code source force `viewbox` à `true` sans quoi le SVG est techniquement vectoriel et pratiquement fixed-size.

Les traceurs de meilleure qualité sont tous inaccessibles en licence. potrace et autotrace sont GPL, et dans un navigateur, un binaire GPL ne peut pas être lié dynamiquement comme il le serait dans un exécutable classique. VTracer, le plus moderne, n’a pas d’embarquement navigateur avec une licence déclarée. Imagetracerjs, celui que nous utilisons, est Unlicense, ce qui est utilisable.

Le code source est explicite sur ce point : « les meilleurs traceurs sont tous inutilisables — potrace et autotrace sont GPL, et VTracer n’a pas d’embarquement navigateur avec licence ». C’est un compromis sur la qualité, pas un choix de design, et c’est la raison pour laquelle le pipeline est plus limité qu’un outil de bureau. Pour un logo important, la bonne chaîne est un designer avec Illustrator.

Le SVG est écrit avec `viewbox` activé, ce qui le rend réellement vectoriel et redimensionnable sans perte. L’espace de noms XML est ajouté après le tracé, parce qu’imagetracerjs l’omet et qu’Illustrator et Inkscape refusent alors le fichier. C’est explicite dans le code source, et c’est une correction connue de la bibliothèque. Pour un designer qui ouvre le SVG, c’est sans surprise.

Les chemins sont écrits en relative (relatifs au point précédent), ce qui est la convention SVG moderne. Les couleurs sont en hexadécimal, sans alpha. Les coordonnées sont en unités utilisateur, sans `transform`. Pour un usage direct dans une page web, c’est conforme à l’attendu, et le SVG s’affiche dans tous les navigateurs sans avertissement.

Le JPG ne porte pas de transparence, donc le SVG produit n’a pas de fond explicite. Le fond est implicitement transparent, parce que le traceur ne dessine que les régions qu’il a identifiées. Pour un logo qui était sur fond blanc dans le JPG, le SVG sera avec des régions blanches explicites, pas avec un fond transparent, et c’est un défaut à connaître.

Les dégradés sont rendus en bandes, et le nombre de bandes est limité par le preset de couleurs. À 8 couleurs, une photo avec un ciel dégradé aura un ciel en 8 bandes, ce qui est visible. À 16 couleurs, c’est moins visible. À 32, c’est plus fidèle mais le SVG est plus gros. Le compromis est exposé dans la documentation, et le bon réglage dépend de l’usage.

Un logo d’entreprise en JPG qu’il faut vectoriser pour un site web, en sachant que le résultat sera retravaillé par un designer. Un picto en JPG qu’il faut afficher en SVG pour qu’il soit net à toutes les tailles. Une capture d’écran d’une UI avec peu de couleurs qu’il faut intégrer dans une documentation. Pour ces cas, le pipeline est utile, et le SVG produit est un point de départ qui sera retravaillé.

Cas où ce pipeline n’est pas le bon : une photo, un screenshot avec beaucoup de texte, une image avec des dégradés fins. Pour ces cas, le JPG en JPG reste la cible, et la conversion en SVG est une perte de temps et un fichier plus gros sans qualité ajoutée. Le bon réflexe est de regarder l’image source et de décider avant de convertir.

Le JPG source n’est pas uploadé, le SVG produit n’est jamais transmis. La conversion se fait dans l’onglet, en mémoire, par un algorithme de tracé chargé à la demande. C’est important pour les logos qui peuvent indiquer une marque, un sigle client, un design en cours. Aucun fichier ne quitte l’appareil, et l’onglet réseau reste vide pendant la conversion.

Les fichiers jusqu’à 100 Mo sont pris en charge, ce qui est très large pour ce format, et l’ensemble du calcul est client pour cette paire. C’est la seule forme sous laquelle la phrase « privé » signifie quelque chose : aucune requête vers l’extérieur pendant que la conversion tourne, et l’assertion se vérifie dans l’onglet réseau des outils de développement.