Convertir PNG en SVG : vectoriser logos, icônes et dessins

Un PNG est une image matricielle : une grille fixe de pixels, chacun avec une couleur et, éventuellement, une valeur d'opacité. Un logo de 500 × 500 px contient exactement 250 000 de ces carrés et rien d'autre ; l'agrandir à la taille d'une affiche ne peut que grossir chaque carré ou rendre flous les espaces entre eux. Un SVG est une image vectorielle, un fichier texte qui liste des formes comme <path>, <circle> et <rect> avec leurs coordonnées et leurs couleurs de remplissage. Un navigateur ou une machine de découpe redessine ces formes à la taille voulue, ce qui explique qu'un logo vectoriel reste net sur un écran de téléphone comme sur une banderole de salon professionnel.

Passer du vectoriel à la matrice est facile, car le moteur de rendu peint simplement les formes en pixels ; SVG en PNG le fait en une seconde. Dans l'autre sens, il n'existe aucun raccourci sans perte, car la grille de pixels ne garde aucune trace des formes qui l'ont produite. Il faut analyser les pixels et deviner où chaque forme commence et finit. Cette étape s'appelle la vectorisation (ou le tracé), et tout convertisseur PNG en SVG honnête, d'Illustrator à un programme en ligne de commande, est au fond un traceur.

Certains convertisseurs évitent la partie difficile. Ils écrivent un fichier SVG valide contenant un seul élément <image> avec le PNG d'origine intégré en base64, ce qui rend aussi le fichier environ un tiers plus lourd que le PNG. Le résultat s'ouvre comme un SVG et passe un contrôle de type de fichier, mais reste une image en pixels dans une enveloppe vectorielle : en zoomant, on retrouve les mêmes bords crénelés, et une machine de découpe ne trouve aucun tracé à suivre. Ouvrez un SVG dans un éditeur de texte et cherchez data:image/png ; si cette chaîne y figure, rien n'a été vectorisé.

Le tracé réussit sur les images dessinées dès l'origine comme des formes. Un logo exporté d'une application de design, une icône plate, un dessin animé aux contours noirs, une signature scannée ou un pochoir se composent de quelques couleurs unies séparées par des bords nets. Le traceur regroupe chaque couleur en zones, suit leurs bordures et ajuste des courbes lisses le long de celles-ci ; le SVG est donc proche des formes dessinées à l'origine par le graphiste. Les lettres grasses d'un logotype se tracent bien aussi, car une grande lettre n'est qu'une forme remplie de plus, et chaque glyphe devient un contour que vous pouvez recolorer ou redimensionner, mais plus retaper.

Les photographies sont le cas inverse. Un portrait ou une photo de produit contient des milliers de tons subtilement différents qui se fondent les uns dans les autres, et un format vectoriel n'a aucun moyen efficace de les décrire. Demandez 16 couleurs à un traceur et vous obtenez une illustration postérisée avec des bandes visibles ; demandez-en 64 et vous obtenez des dizaines de milliers de minuscules formes dans un fichier bien plus lourd que le PNG, qui ne ressemble toujours pas à une photo. Les dégradés doux, les ombres portées et les halos lumineux se transforment de la même façon en piles de fines bandes. Le petit texte est un troisième point faible : à 10–12 px, l'anticrénelage fond chaque lettre dans son arrière-plan, et le traceur ne distingue plus un « e » d'un « o ».

La résolution compte plus que n'importe quel réglage. Le traceur ajuste chaque courbe à l'escalier de pixels le long d'un bord, et plus cet escalier est fin, plus la courbe est fidèle. Si vous avez exporté vous-même le PNG depuis Figma, Canva, Photoshop ou un diaporama, exportez-le à nouveau à deux ou trois fois la taille d'affichage ; un logo de 1500–2000 px de large donne au traceur beaucoup de matière. N'agrandissez pas d'abord un petit PNG avec un agrandisseur IA, sauf si le résultat paraît net à un zoom de 100 %, car une texture de bord inventée est tracée aussi fidèlement que de vrais bords.

Ensuite, simplifiez l'arrière-plan. Le PNG gère la transparence complète, et un fond transparent est le cas le plus simple : chaque pixel entièrement transparent est traité comme un espace vide, donc le SVG n'a pas de boîte blanche derrière le visuel. Si le PNG a un fond uni, recadrez-le d'abord au plus près du visuel ; notre guide sur comment recadrer une image selon un ratio explique le cadrage exact. Un arrière-plan chargé, comme un logo photographié sur un T-shirt, doit être supprimé ou recouvert d'une seule couleur unie avant le tracé.

Enfin, réduisez le nombre de couleurs avant que le traceur ne le fasse à votre place. Masquez les ombres, les halos et les calques de dégradé dans le fichier source, et remplacez un dégradé par sa couleur médiane si la version vectorielle n'en a pas besoin. Comptez les couleurs unies restantes, contour compris, et notez ce nombre : c'est la valeur la plus utile que vous saisirez à l'étape suivante. Si vous hésitez entre un JPEG et un PNG du même logo, prenez le PNG, car la compression JPEG ajoute du bruit autour de chaque bord, comme l'explique JPG, JPEG et PNG : les différences.

Tout traceur pose les mêmes trois questions, même si les libellés diffèrent. La première : combien de couleurs conserver. Dans le convertisseur PNG en SVG, Mode couleur permet de choisir entre Couleur, Niveaux de gris et Noir et blanc, et Nombre de couleurs fixe le nombre de groupes dans lesquels les pixels sont répartis, de 2 à 64. Alignez-le sur le nombre que vous avez noté. Trop élevé, le traceur isole les pixels anticrénelés des bords dans leurs propres fines couleurs, ce qui se voit comme un léger halo autour de chaque forme ; trop bas, il fusionne deux couleurs de la marque en une seule.

La deuxième question porte sur le traitement des bords. Lissage arrondit les marches d'escalier laissées par les pixels, et Détail détermine la taille minimale d'une tache pour devenir une forme. La page PNG démarre à Détail 70 et Lissage 40, ce qui conserve les petits angles d'un export propre. Baissez Détail si de la poussière et des points parasites apparaissent, augmentez Lissage si les courbes ondulent, et réglez Courbes sur Lignes droites pour les logos géométriques à bords droits ou sur Bords de pixels pour un pixel art qui doit rester anguleux.

La troisième question ne concerne que le tracé en noir et blanc : où placer la limite entre l'encre et le papier. Seuil va de 1 à 254, avec 128 par défaut. Les pixels plus sombres que le seuil deviennent noirs, les plus clairs deviennent vides. Pour une signature au stylo bille bleu fin, montez-le vers 160–180 afin que les traits pâles survivent ; pour un dessin au feutre épais sur un papier légèrement gris, baissez-le vers 100 pour que la texture du papier ne devienne pas des taches. Changez un réglage à la fois et comparez, car les effets interagissent.

Ne vous arrêtez pas à la miniature. Ouvrez le SVG dans un navigateur et zoomez à 400–800 % sur la courbe la plus serrée, le creux d'une lettre ou la pointe d'un angle. Un bon tracé montre des arcs lisses et des angles vifs là où le dessin en a ; un tracé médiocre montre des ondulations, des creux et des pointes arrondies. Regardez ensuite le fichier dans un éditeur vectoriel comme Inkscape, Illustrator ou Figma et activez l'affichage des contours ou des nœuds. Un logo simple à deux couleurs demande en général quelques centaines de nœuds ; si le vôtre en montre plusieurs milliers, le traceur a suivi du bruit et les tracés seront pénibles à modifier ou à découper.

Le poids du fichier est un contrôle rapide. Un SVG optimisé d'un logo plat pèse en général de quelques kilo-octets à quelques dizaines de kilo-octets, souvent moins que le PNG d'origine. Un fichier tracé plusieurs fois plus lourd que le PNG source signifie généralement trop de couleurs, trop de détail, ou une photo qui n'aurait pas dû être tracée. Laissez Optimiser le SVG activé, car il arrondit les coordonnées et fusionne les tracés sans changement visible ; enfin, agrandissez le visuel à la taille d'une affiche et réduisez-le à celle d'une favicon pour vérifier qu'il reste lisible dans les deux cas.

L'option gratuite sur ordinateur est Inkscape. Importez le PNG, sélectionnez-le et ouvrez Chemin > Vectoriser le bitmap (Maj+Alt+B). Les modes à balayage unique, comme le seuil de luminosité, produisent un seul tracé noir, adapté au dessin au trait ; les modes à balayages multiples tracent un nombre défini de couleurs ou de gris en calques superposés. Le tracé en noir et blanc d'Inkscape repose sur Potrace, une bibliothèque de vectorisation publiée par Peter Selinger en 2001. Potrace est lui-même un programme en ligne de commande qui lit les formats PBM, PGM, PPM ou BMP plutôt que PNG, ne gère que les images bicolores et écrit en SVG, PDF, EPS ou DXF, ce qui en fait un bon choix pour automatiser de grands lots de scans.

Dans Adobe Illustrator, Image Trace (Vectorisation dynamique de l'image) a remplacé l'ancien Live Trace dans Illustrator CS6. Placez le PNG, ouvrez Fenêtre > Vectorisation de l'image et partez d'un préréglage comme Logo noir et blanc, 3 couleurs ou 16 couleurs, puis ajustez Tracés, Angles et Bruit dans la section avancée. Le tracé reste dynamique jusqu'à ce que vous cliquiez sur Fusionner, ce qui le transforme en tracés ordinaires modifiables. Si aucun de ces deux programmes n'est installé, un convertisseur en ligne applique le même processus de réduction des couleurs, de détection des bords et d'ajustement des courbes ; le convertisseur d'image en SVG accepte aussi JPG, WebP et HEIC et peut écrire en EPS, PDF ou DXF au lieu de SVG.

Sur le web, SVG est une recommandation du W3C depuis 2001 et tous les navigateurs actuels l'affichent dans une balise <img>, en arrière-plan CSS ou en ligne dans le HTML, où ses couleurs peuvent même changer au survol. Un logo vectorisé remplace généralement plusieurs tailles de PNG pour les écrans Retina par un seul petit fichier. Pour les machines de découpe, SVG est le format attendu par Cricut Design Space et Silhouette Studio : chaque forme tracée devient un chemin de coupe, et un tracé multicolore arrive en calques séparés que vous pouvez découper dans des vinyles de couleurs différentes. Les découpeuses laser et les logiciels CNC préfèrent en général le DXF, que PNG en DXF produit avec les mêmes réglages de tracé.

Les imprimeurs demandent des visuels vectoriels parce qu'une presse, un logiciel de digitalisation de broderie ou un traceur de découpe a besoin de bords, pas de pixels, et un SVG vectorisé suffit souvent pour des autocollants, des T-shirts ou une banderole. Cela reste une approximation : les courbes sont des estimations ajustées, les couleurs sont moyennées à partir des pixels et le texte est converti en contours. Avant de vectoriser un logo d'entreprise, demandez donc à son auteur. Un graphiste ou une agence possède presque toujours l'original AI, EPS, PDF ou SVG avec les courbes exactes, les couleurs nommées et les polices, et l'envoyer lui prend une minute. Le tracé est le bon outil quand cet original est perdu, quand le logo n'existe plus que sur un papier à en-tête scanné, ou quand le visuel est votre propre dessin.