Convertir PNG en SVG

Vectoriser un dessin, c’est reconnaître les formes qui le composent et les redessiner en chemins. Tracer une image, c’est la redessiner en zones de couleur à partir des pixels, sans chercher à comprendre ce que l’image représente. Ce convertisseur fait la seconde opération, et la sortie est un SVG, mais c’est un SVG de zones plates et non un SVG de formes comprises.

La distinction compte pour les usages en aval. Un logo tracé est correct visuellement et reste éditable en tant que zones de couleur. Une photographie tracée est posterisée et n’a rien de l’original. Le module le dit lui-même : un logo round-trip fidèlement, une capture d’écran avec du texte produit un fichier quarante fois plus gros que le PNG.

Le preset balanced applique une quantification à 8 couleurs, ce qui veut dire que l’image de sortie est composée de 8 aplats au maximum. Pour un logo en quatre couleurs, c’est largement assez, et le résultat reste lisible à toutes les échelles. Pour une photographie, c’est une posterisation sévère qui détruit les dégradés et les transitions douces.

Le contrôle expose un nombre de couleurs. Monter à 16 ou 32 aide sur des images un peu plus complexes, mais le coût en taille grimpe rapidement. Pour une icône, 4 à 8 est presque toujours le bon intervalle. Pour un asset d’interface avec des dégradés, c’est plutôt un PNG bien compressé qu’un SVG tracé qu’il faut.

Sans attribut viewBox, un SVG est techniquement vectoriel et pratiquement de taille fixe. C’est documenté en clair dans le module de tracer, et la conversion ajoute toujours la déclaration viewBox à partir des dimensions du PNG source. Sans cela, Inkscape et Illustrator refusent parfois le fichier, et l’incorporation dans une page web produit un asset qui ne se met pas à l’échelle.

Le résultat est un SVG qui se comporte comme un SVG : il occupe la taille qu’on lui donne, indépendamment de la résolution du PNG d’origine. Pour un usage en CSS, en HTML, ou dans un document où la mise à l’échelle compte, c’est ce qui rend le fichier utilisable.

imagetracerjs, la bibliothèque qui fait le travail, omet la déclaration de namespace XML. Le fichier résultant s’affiche dans un navigateur sans problème, et Inkscape et Illustrator le refusent. La conversion ajoute la namespace après le tracé, ce qui rend le fichier portable dans les outils de design sans configuration supplémentaire.

C’est le genre de détail qui distingue un fichier qui marche d’un fichier qui marche dans la moitié des cas. Pour un asset qui sera édité, vectorisé à nouveau, ou intégré dans un pipeline de design, la namespace est obligatoire, et le fichier tracé ici l’a.

Un PNG qui contient du texte — une capture d’écran, un schéma légendé, une infographie — pose un problème particulier au tracer. Le texte est un ensemble de petits détails très contrastés, et le quantificateur le voit comme une mer de zones minuscules plutôt que comme des glyphes. La sortie est soit illisible, soit si volumineuse que la conversion n’a aucun sens.

Pour ces contenus, garder le PNG est presque toujours la bonne réponse. Un PNG avec un bon pipeline d’oxipng à niveau 2 est déjà remarquablement compact, et le texte y est net à toute résolution. Le tracer ne sait pas que les petits amas sombres sont des lettres, et le SVG qu’il en tire est inutilisable.

Tracer une photographie revient à la réduire à 8 zones de couleur, ce qui supprime les dégradés, les transitions douces, et la quasi-totalité de l’information qui faisait que la photo était une photo. Le fichier de sortie est en général quatre fois plus gros que le PNG d’origine, et l’image est posterisée à un point qui n’a plus grand-chose à voir avec la scène capturée.

Pour une photographie, un JPEG ou un WebP à 80 est meilleur en taille et en qualité. Le SVG tracé est une caricature de l’image originale, et c’est précisément pour cela que la mesure a été faite avant que la fonctionnalité ne soit construite : un logo fait 16 ko en SVG contre 6 en PNG, une capture d’écran fait quarante fois la taille, et une photographie quatre fois plus sans rien gagner.

Le nombre de couleurs est exposé parce que c’est le levier principal entre fidélité et compacité. Pour un logo en deux ou trois couleurs, descendre à 4 produit un fichier très petit qui reste reconnaissable. Pour un asset plus complexe avec des demi-teintes, monter à 16 ou 32 est nécessaire, mais le coût de stockage grimpe vite.

La qualité balanced par défaut applique un préréglage qui marche pour la plupart des logos et des icônes. Le mode détaillé ajoute du post-traitement qui lisse les bords et réduit l’aliasing visible à grande échelle, au prix d’un fichier plus gros. Pour la plupart des usages, balanced est le bon point de départ, et détaillé est un raffinement à demander explicitement.

Les deux éditeurs vectoriels de référence ouvrent le SVG tracé sans configuration, et c’est précisément pour cela que la namespace XML est ajoutée. Le fichier arrive avec un viewBox, des groupes de chemins par zone de couleur, et la structure attendue par les outils de design.

C’est là que l’intérêt principal de la conversion se voit. Un logo tracé peut être réédité, recolorié, redimensionné à l’infini sans perte, et c’est ce qu’un SVG est censé permettre. Pour un asset qui sera retravaillé, c’est la bonne réponse. Pour un asset qui sera affiché tel quel et jamais modifié, un PNG bien compressé est plus simple et plus petit.

Le module mesure le SVG produit contre le PNG d’origine et indique lequel des deux est le plus petit, et de combien. Si le SVG est plus gros, la page le dit, et le téléchargement reste possible mais l’utilisateur est prévenu que le résultat n’est pas un gain. C’est une honnêteté qui coûte peu et qui épargne une mauvaise surprise à l’arrivée.

Pour un asset qui doit voyager, c’est l’information utile. Si le SVG est plus gros que le PNG, le gain n’est pas dans la taille mais dans l’éditabilité, et c’est à l’appelant de décider. Pour un asset qui doit seulement être affiché, garder le PNG est probablement la bonne réponse, et la mesure permet cette décision informée.

Aucune requête ne porte le PNG source. Pour des images sous embargo de presse, des logos propriétaires, des documents de design confidentiels, c’est la condition qui rend l’utilisation sûre plutôt qu’à proscrire. Téléverser un logo non publié vers un service tiers est le genre d’étape qui publie l’asset par accident.

C’est vérifiable plutôt que promis. Ouvrez les outils de développement, regardez l’onglet réseau pendant une conversion, ou déconnectez complètement la machine et convertissez quand même. La page continue de fonctionner parce qu’il n’y a jamais rien eu à faire pour le réseau, et c’est l’unique manière dont cette affirmation peut valoir quelque chose.