Comment réduire les nÅ“uds SVG

Si votre SVG contient trop de nÅ“uds, simplifiez les tracés vectoriels plutôt que de supprimer des points au hasard.

Le flux de travail le plus sûr est :

1. Enregistrez une copie du SVG d'origine.
2. Identifiez les tracés qui contiennent des nÅ“uds excessifs.
3. Simplifiez un tracé ou une section à la fois.
4. Comparez le tracé simplifié avec l'original.
5. Protégez les coins importants et les courbes serrées.
6. Supprimez manuellement les points inutiles restants.
7. Optimisez le code SVG une fois que la géométrie est propre.

Dans Adobe Illustrator, vous pouvez utiliser Objet → Tracé → Simplifier. La fonction Simplification automatique d'Adobe est spécialement conçue pour supprimer les points d'ancrage inutiles tout en lissant le tracé.

Dans Inkscape, les tracés peuvent être simplifiés et modifiés à l'aide de nÅ“uds et de leurs poignées de Bézier. Inkscape propose également une action de simplification de tracé pour supprimer les nÅ“uds supplémentaires.

Mais il y a un avertissement important : Moins de nÅ“uds n'est pas automatiquement mieux. Le but est de supprimer les nÅ“uds redondants tout en conservant la géométrie souhaitée.

Que sont les nœuds SVG ?

Le mot nÅ“ud peut signifier des choses légèrement différentes selon le logiciel ou le contexte technique.

Dans les éditeurs vectoriels tels qu'Inkscape, les nÅ“uds sont des points le long d'un tracé qui aident à définir sa forme. Adobe Illustrator les appelle généralement points d'ancrage.

Les données de tracé SVG décrivent elles-mêmes la géométrie par le biais de commandes telles que le déplacement, le dessin de lignes, la création de courbes de Bézier et le dessin d'arcs.

Pour ce guide, lorsque nous parlons de nÅ“uds SVG, nous entendons principalement les points d'ancrage modifiables qui définissent les tracés vectoriels. C'est différent des nÅ“uds DOM ou des éléments SVG dans la structure de document XML du SVG.

Pourquoi mon SVG a-t-il autant de nœuds ?

Un nombre excessif de nÅ“uds provient généralement de la façon dont le vecteur a été créé.

Traçage automatique d'image

C'est l'une des causes les plus courantes. Lorsqu'un PNG ou un JPG est automatiquement vectorisé, le traceur essaie de suivre les limites de pixels visibles. Un bord raster rugueux peut devenir une courbe vectorielle contenant des dizaines de points d'ancrage.

Images source de mauvaise qualité

Les images floues ou pixélisées contiennent des bords irréguliers. Le système de traçage peut convertir ces irrégularités en géométrie.

Trop de détails de traçage

Les paramètres de détails élevés indiquent au traceur de préserver les petites variations visuelles. Cela augmente fréquemment le nombre de tracés et de points.

Trop de couleurs

Chaque région de couleur supplémentaire peut potentiellement devenir un objet vectoriel distinct.

Dessin à main levée

Le dessin à main levée peut créer beaucoup plus de points qu'une courbe de Bézier soigneusement construite.

Pourquoi réduire les nÅ“uds SVG ?

La réduction des nÅ“uds inutiles peut améliorer plusieurs parties du flux de travail.

• Édition plus facile : Une courbe contenant cinq points bien positionnés est généralement plus facile à remodeler que la même courbe représentée par 100 points minuscules.
• Courbes plus lisses : Plus de points ne créent pas nécessairement un tracé plus lisse. Des points mal positionnés peuvent introduire des bosses et des irrégularités.
• Meilleures performances logicielles : Un grand nombre de points d'ancrage peut créer une surcharge d'édition notable. Les utilisateurs ont signalé des décalages, une utilisation élevée de la mémoire et des plantages.
• Flux de travail CAO et de découpe plus propres : Des tracés SVG denses peuvent devenir problématiques dans les logiciels en aval tels que Fusion 360, SolidWorks et les processus de découpe au laser.
• Fichiers potentiellement plus petits : Des données de tracé plus simples peuvent réduire la quantité d'informations de coordonnées stockées dans un SVG.

Méthode 1 : Empêcher les nÅ“uds en excès pendant la vectorisation

Le meilleur moment pour réduire les nÅ“uds est souvent avant qu'ils ne soient créés. Si votre SVG provient d'un PNG ou d'un JPG, retournez à l'étape de traçage.

Au lieu de tracer avec un maximum de détails :

• Réduire les couleurs inutiles
• Augmenter le lissage
• Ignorer les minuscules bruits
• Utiliser une image source plus propre
• Supprimer d'abord l'arrière-plan
• Tracer uniquement la géométrie dont vous avez réellement besoin

Une trace plus propre est normalement préférable à la recherche de chaque détail et à la tentative de réparation de milliers de points par la suite. Pour en savoir plus, consultez notre guide de conversion PNG en SVG.

Méthode 2 : Réduire les points d'ancrage dans Adobe Illustrator

Illustrator inclut une fonction de simplification dédiée.

1. Sélectionnez le tracé : Choisissez l'objet que vous souhaitez simplifier.
2. Ouvrir Simplifier : Allez dans : Objet → Tracé → Simplifier
3. Prévisualiser les modifications : Ne jugez pas la simplification uniquement par le nombre de points supprimés. Faites attention aux coins, aux petites encoches, aux courbes serrées et à la symétrie.
4. Utilisez la simplification automatique avec précaution : La fonction de simplification automatique d'Adobe supprime automatiquement les points d'ancrage inutiles et lisse les tracés. Pour des illustrations plus complexes, utilisez les commandes de simplification disponibles.
5. Inspecter le résultat : Basculez entre la version d'origine et la version simplifiée si possible.

Méthode 3 : Réduire les nÅ“uds SVG dans Inkscape

Inkscape permet à la fois une simplification automatique et une édition manuelle des nÅ“uds.

1. Faites une sauvegarde : Conservez le tracé d'origine avant de le simplifier, car la simplification modifie la géométrie.
2. Sélectionnez le tracé : Choisissez l'objet contenant les nÅ“uds inutiles.
3. Simplifiez le tracé : Utilisez la fonction Simplifier d'Inkscape (Tracé → Simplifier).
4. Évitez les simplifications agressives répétées : Une simplification répétée peut altérer progressivement la forme.
5. Passez à l'outil NÅ“ud : Inspectez manuellement le tracé restant. Supprimez les nÅ“uds manifestement redondants tout en ajustant les poignées voisines.

Méthode 4 : Supprimer manuellement les nÅ“uds inutiles

La simplification automatique n'est pas idéale pour toutes les conceptions. Pour les logos, les lettrages et les illustrations géométriques, le nettoyage manuel peut offrir un meilleur contrôle.

• Préserver les coins : Un coin pointu a généralement besoin d'un point d'ancrage lors du changement de direction. Ne le supprimez pas simplement pour réduire le nombre.
• Conserver les extrêmes des courbes : Les positions de virage importantes en haut, en bas, à gauche et à droite constituent souvent des emplacements d'ancrage utiles.
• Utiliser les poignées de Bézier : Les poignées d'un nÅ“ud peuvent décrire de grandes sections d'une courbe lisse.
• Supprimer des points entre les sections lisses : Si plusieurs ancres se trouvent le long d'une courbe presque identique, certaines peuvent être redondantes. Supprimez-en une et ajustez les poignées voisines.

Méthode 5 : Redessiner des tracés extrêmement désordonnés

Parfois, le nettoyage prend plus de temps que la reconstruction. Si une simple forme de logo contient plusieurs centaines de points après le traçage automatique, il peut être plus efficace de redessiner manuellement la même forme avec la plume ou l'outil de Bézier.

N'optimisez pas la géométrie défectueuse indéfiniment lorsqu'une géométrie propre peut être recréée rapidement.

Méthode 6 : Corriger la trace d'origine

Pour les SVG tracés, recherchez la cause de l'apparition des nÅ“uds en excès.

Un meilleur processus peut être : Raster propre → simplifier les couleurs → vectoriser → inspecter les tracés → nettoyage léger plutôt que : Raster médiocre → vectorisation avec un maximum de détails → des milliers de nÅ“uds → simplification agressive.

Méthode 7 : Optimiser le code SVG

Le nettoyage de la géométrie et l'optimisation du code SVG sont des tâches liées mais différentes.

Un outil tel que SVGO peut supprimer ou transformer des informations redondantes, notamment les métadonnées, les commentaires, les éléments cachés et les valeurs inefficaces, sans modifier intentionnellement le résultat du rendu. Cela peut rendre le code SVG plus petit et plus propre.

NÅ“uds SVG vs Éléments SVG : Quelle est la différence ?

Considérez un SVG contenant un <path>. C'est un élément graphique SVG. Mais la valeur d à l'intérieur du tracé peut décrire de nombreux segments de ligne et de courbe.

Par conséquent, il existe deux questions d'optimisation différentes :

• Ai-je trop de points d'ancrage dans mes tracés ? (Géométrie)
• Ai-je trop d'éléments SVG ou de structures de code inutiles ? (Balisage)

Elles nécessitent des solutions différentes.

Combien de nœuds un SVG devrait-il avoir ?

Il n'y a pas de nombre maximum de nÅ“uds universel. Une simple icône peut en nécessiter très peu, tandis qu'une illustration détaillée peut légitimement en nécessiter des centaines.

Au lieu de viser un nombre arbitraire, demandez-vous : Chaque point restant contribue-t-il de manière significative à la forme ?

Pourquoi Simplifier ruine-t-il mon SVG ?

La simplification est une approximation. Des problèmes apparaissent lorsque la tolérance est trop agressive. Vous pouvez voir des coins arrondis, des courbes aplaties, un lettrage déformé ou des détails manquants.

La solution n'est pas nécessairement d'éviter la simplification. Au lieu de cela : simplifiez moins, simplifiez de manière sélective et protégez manuellement la géométrie importante.

Comment réduire les nÅ“uds sans perdre les coins pointus

Les coins sont l'un des détails les plus faciles à endommager par la simplification automatique.

Essayez ce flux de travail :

1. Dupliquer la forme d'origine.
2. Identifier les coins importants.
3. Simplifier de manière prudente.
4. Comparez les positions des coins.
5. Restaurer ou recréer manuellement tout coin perdu.

Simplifiez les sections lisses de manière plus agressive que les sections pointues.

Foire aux questions

Créer des tracés SVG plus propres

Un bon SVG ne se définit pas par le nombre de nÅ“uds qu'il contient. Il se définit par le fait que la géométrie est précise, modifiable et pas plus compliquée que nécessaire.

Commencez par notre guide sur comment vectoriser une image si vous créez le SVG à partir de zéro, ou consultez comment convertir PNG en SVG pour le flux de travail complet de la trame au vecteur.