Par Irene Kim7 min de lecture

Pourquoi votre SVG auto-vectorisé a trop de nœuds (et comment y remédier)

Les SVG auto-vectorisés sont souvent encombrés de centaines de points d’ancrage inutiles, ce qui les rend difficiles à modifier et lents à découper. Voici pourquoi cela arrive, et comment obtenir des tracés propres.

Sur cette page

Vous avez transformé un PNG en SVG, vous l’avez ouvert pour commencer à le modifier, et le tracé est enseveli sous les points d’ancrage. Des centaines, regroupés le long de courbes qui auraient dû en demander cinq ou six. À chaque fois que vous essayez de déplacer légèrement une forme, vous vous battez avec une douzaine de poignées que vous n’aviez jamais demandées.

Si cela vous parle, votre vectoriseur n’est pas cassé. Il fait exactement ce que font la plupart des outils d’auto-vectorisation : il transcrit des pixels au lieu de dessiner des formes. Voici pourquoi cela arrive, pourquoi cela vous ralentit plus que vous ne le pensez, et comment obtenir dès le départ des vecteurs vraiment propres.

522 nœuds contre 59 nœuds
La même illustration de hibou vectorisée de deux façons : 522 points d’ancrage à gauche, 59 à droite
La même illustration, vectorisée de deux façons. À gauche : une auto-vectorisation typique avec 522 nœuds. À droite : PerfectVector avec 59 nœuds, le même hibou avec une fraction de l’encombrement.

Ce que signifie vraiment « trop de nœuds »

Chaque tracé dans un SVG est construit à partir de points d’ancrage (aussi appelés nœuds) reliés par des segments de courbe. Chaque point d’ancrage porte une paire de poignées de Bézier qui courbent la ligne de part et d’autre. Quelques points bien placés peuvent décrire parfaitement une longue courbe fluide : c’est tout l’intérêt du vectoriel.

Le problème commence quand il y a beaucoup plus de points que la forme n’en a besoin. Une courbe qu’un designer dessinerait avec cinq points se retrouve avec cinquante. L’image semble encore correcte au premier coup d’œil, mais le tracé sous-jacent est un vrai fouillis.

Vous êtes probablement face à un gonflement du nombre de nœuds si :

  • Une courbe simple a des points d’ancrage tous les quelques pixels au lieu de quelques points espacés.
  • Sélectionner une forme fait apparaître des dizaines de points là où vous vous attendiez à une poignée.
  • Le fichier est étonnamment lourd pour un visuel aussi simple.

Pourquoi les outils d’auto-vectorisation accumulent les nœuds

La plupart des outils de vectorisation, d’Image Trace dans Illustrator aux moteurs basés sur Potrace derrière beaucoup de convertisseurs gratuits en ligne, fonctionnent en suivant la frontière entre les couleurs de votre image raster et en y déposant des points d’ancrage.

Le piège, c’est l’endroit où se trouve cette frontière. Votre PNG contient de l’anticrénelage : ces pixels doux, semi-transparents, qui lissent les bords à l’écran. Pour un outil de vectorisation, ce bord adouci ressemble à une ligne légèrement tremblante ; il ajoute donc des points pour suivre chaque oscillation. Il ne se demande pas « est-ce un arc ou un segment droit ? » : il transcrit le contour des pixels, avec toutes ses irrégularités. Le niveau d’agressivité varie beaucoup selon les outils ; voici comment se comparent les principaux vectoriseurs d’images par IA.

On le voit jusque dans les données du tracé. Voici à peu près à quoi ressemble une touffe d’oreille de ce hibou lorsqu’elle est vectorisée automatiquement, puis dessinée proprement :

<!-- Auto-vectorisé : une touffe d’oreille, plus de 40 points -->
<path d="M312.4,98.1 C313.0,97.8 313.9,97.2 314.6,96.9 C315.2,96.7
316.1,96.4 316.8,96.2 C317.4,96.0 318.3,95.7 319.0,95.5 ...(beaucoup d’autres) Z"/>
 
<!-- Propre : la même touffe, 6 points -->
<path d="M312,98 C320,70 360,68 372,96 C378,112 340,140 312,98 Z"/>

Même courbe. L’un est la transcription de chaque pixel ; l’autre est une forme.

Pourquoi cela vous ralentit

Un tracé gonflé ne se contente pas d’avoir l’air désordonné dans l’éditeur : il vous coûte du temps de trois façons très concrètes.

Auto-vectorisé (typique)Vecteur propre
Points d’ancrageDes centaines par formeQuelques dizaines
ModificationDes poignées à gérer à chaque ajustementForme modifiable directement
Taille du fichierPlus lourd, plus lent à chargerCompact
Machines de découpeÀ-coups, découpes rugueuses, temps de découpe longDécoupes fluides et rapides

Dans les outils de design

Dans Illustrator ou Figma, chaque point d’ancrage supplémentaire est un élément qu’il faut contourner, éviter ou nettoyer avant de pouvoir faire une vraie modification. Remodeler une courbe propre demande un ou deux points. Remodeler une courbe transcrite oblige à lutter avec tout un amas de points, et bonne chance pour garder un résultat fluide.

Sélectionné dans Illustrator
Un logo et le mot-symbole COMPANY NAME sélectionnés dans Adobe Illustrator, avec des tracés saturés de points d’ancrage
Un tracé gonflé ouvert dans Illustrator. Sélectionnez le visuel et les tracés s’illuminent de points d’ancrage, surtout dans le lettrage. Chacun d’eux devient une poignée avec laquelle il faut composer pour obtenir une modification propre.

Sur les machines de découpe

C’est là que le problème devient vraiment pénible. Les Cricut, Silhouette et découpeuses laser suivent le tracé à la lettre. Trop de nœuds, et la machine avance par à-coups le long de chaque micro-segment : découpes plus rugueuses, temps de découpe plus longs, et davantage de risques que le matériau se déchire. Un tracé propre se découpe sans effort. Si votre fichier est destiné à un laser, convertissez-le en SVG prêt pour la découpe laser et évitez complètement les à-coups.

Comment obtenir des nœuds propres

Il y a trois façons de s’en sortir, dans l’ordre approximatif de la douleur qu’elles vous épargnent :

  1. Simplifier après coup. La commande Object → Path → Simplify d’Illustrator peut supprimer des points d’ancrage. Cela aide, mais c’est destructif : elle approxime le tracé, ce qui peut adoucir les angles et déformer la forme. Et vous partez toujours d’un tracé déjà gonflé.
  2. Réduire le niveau de détail de la vectorisation. La plupart des outils permettent de réduire la complexité, mais c’est un réglage grossier : si vous le baissez assez pour réduire les nœuds, vous commencez à perdre les détails que vous vouliez conserver.
  3. Partir d’un résultat propre. La vraie solution consiste à vectoriser avec un outil qui produit des tracés propres dès le départ, pour ne rien avoir à nettoyer.

C’est toute la raison d’être de PerfectVector. Au lieu de transcrire la frontière des pixels, son modèle a été entraîné sur de vrais fichiers de design, où un humain avait déjà décidé où placer les points d’ancrage et quels segments forment une seule courbe plutôt que trois. Le résultat reproduit ce jugement : des courbes de Bézier fluides, un anticrénelage géré, et un nombre de nœuds qui ressemble à ce qu’un designer aurait dessiné.

Et cela ne concerne pas seulement les illustrations. Les logos et les lettrages gonflent exactement de la même manière, ce qui se remarque le plus là où il faut des bords nets et des découpes vinyle propres.

235 nœuds contre 76 nœuds
Le mot BRAND vectorisé de deux façons : 235 points d’ancrage à gauche, 76 à droite
Un mot-symbole subit le même traitement. À gauche : une auto-vectorisation disperse 235 points d’ancrage sur les lettres. À droite : PerfectVector le reconstruit avec 76 nœuds, pour des courbes propres qui restent faciles à modifier et rapides à découper.

Essayez

Déposez un PNG ou un JPG dans PerfectVector, sans connexion ni carte bancaire. Vous verrez le nombre de nœuds et de couleurs directement sur votre résultat, afin de juger la différence vous-même avant de télécharger quoi que ce soit.

Est-ce que je ne peux pas simplement utiliser Simplify dans Illustrator ?

Si, et cela aide. Mais Simplify fonctionne en approximant un tracé déjà gonflé : il a donc tendance à arrondir les angles et à déplacer les courbes d’une façon qu’il faut surveiller de près. C’est une étape de nettoyage ajoutée à un point de départ brouillon. Vectoriser avec une sortie propre évite entièrement ce nettoyage : il n’y a rien à simplifier, parce que les points ont été bien placés dès le départ.

Plus depuis le blog

Prêt à créer
des vecteurs parfaits ?