Espaces blancs entre les formes SVG : diagnostic et correction

Les fines lignes blanches entre les formes SVG sont souvent des raccords de rendu, et non des trous dans le fichier. Le modèle de rendu SVG autorise les implémentations à utiliser l’anticrénelage lors de la rastérisation des dessins vectoriels ; des bords adjacents échantillonnés séparément peuvent donc laisser apparaître une ligne très fine de la couleur du fond à une échelle donnée. Cette ligne peut disparaître à un autre niveau de zoom ou dans un autre moteur de rendu.

Parfois, l’espace est réel. Avant de faire chevaucher des formes, d’ajouter des contours ou de réunir des tracés, effectue quatre vérifications : change le zoom, change le fond, exporte le dessin en matriciel et examine les tracés en mode contour. Les résultats indiquent s’il faut corriger l’échantillonnage à l’écran ou la géométrie.

Raccord de rendu ou vrai espace ?

• Change ou disparaît avec le zoom : probablement un raccord d’affichage.
• Prend la couleur du fond : le fond est échantillonné entre les bords.
• Absent en mode contour : les limites vectorielles se rejoignent peut-être déjà.
• Visible dans un export matriciel haute résolution : examine de plus près la précision d’export et la géométrie.
• Persiste dans un maillage, un aperçu de découpe ou une mesure des tracés : traite-le comme un véritable problème de géométrie.

Pourquoi des tracés qui se touchent peuvent afficher un raccord

Les écrans dessinent les formes vectorielles sur une grille de pixels. Lorsqu’un bord traverse un pixel, l’anticrénelage mélange la couleur de ce pixel entre celle de la forme et celle du fond pour lisser le bord. Deux formes dessinées séparément peuvent chacune mélanger leurs pixels de bord, même lorsque leurs coordonnées vectorielles coïncident.

L’échelle ajoute une variable. Une coordonnée partagée qui tombe exactement sur une limite de pixel à une taille donnée peut tomber entre deux pixels à une autre taille. L’arrondi à l’export peut également déplacer très légèrement une limite. C’est pourquoi une ligne peut apparaître uniquement à 67 % de zoom, disparaître à 100 % et revenir dans une petite vignette web.

Le SVG peut pourtant être mathématiquement correct. Modifier la géométrie avant de la tester peut créer des chevauchements qui deviennent visibles dans les usages avec transparence, impression, découpe ou animation.

La distinction essentielle est de savoir si les contours sous-jacents partagent un bord. Un raccord de rendu peut apparaître sur une géométrie jointive ; un véritable espace reste visible entre les contours eux-mêmes.

Effectue quatre tests avant de modifier le fichier

1. Change le zoom

Observe le SVG à plusieurs niveaux de zoom, notamment à 100 % et avec un fort agrandissement. Un véritable espace reste entre les tracés lorsque tu agrandis. Un raccord d’échantillonnage apparaît et disparaît souvent, change d’épaisseur ou s’efface.

Ne te fie pas uniquement au zoom. Certains espaces géométriques sont plus petits qu’un pixel et peuvent eux aussi changer d’apparence.

2. Change le fond

Place le SVG sur du blanc, du noir et une couleur vive. Si la ligne prend la couleur du fond, le moteur de rendu affiche le fond entre des bords échantillonnés séparément. Il peut s’agir d’un raccord d’échantillonnage ou d’un véritable espace transparent : poursuis donc avec l’examen des contours.

3. Exporte un PNG haute résolution

Exporte à deux ou quatre fois les dimensions finales, puis examine le résultat réduit. Si le raccord disparaît dans l’export haute résolution, le problème venait probablement d’une rastérisation dépendante de l’échelle. S’il reste et devient mesurable, examine les coordonnées et la précision d’export.

4. Utilise le mode contour ou filaire

Désactive les remplissages et examine les limites réelles. Sélectionne les nœuds voisins et compare leurs coordonnées. Si les tracés se rejoignent exactement, la ligne visible vient du moteur de rendu. Si les extrémités ou les bords ne correspondent pas, répare la géométrie.

Pour d’autres modifications de tracés, consulte comment modifier un SVG. Conserve une copie, car la meilleure correction dépend de l’usage du fichier.

Corriger un raccord d’affichage

Pour un dessin en aplats dont les remplissages adjacents ne doivent laisser aucune transparence entre eux, un très léger chevauchement contrôlé est généralement la correction la plus fiable. Prolonge la forme sous-jacente ou la plus sombre sous sa voisine sur une petite distance. Le chevauchement doit rester invisible à taille normale et ne pas modifier la silhouette extérieure.

Voici d’autres possibilités :

• Ajoute un contour très fin de la même couleur que la forme, placé de manière à couvrir le raccord.
• Place une forme de base de couleur assortie derrière toutes les pièces adjacentes.
• Augmente la précision des coordonnées à l’export SVG si les arrondis ont séparé des bords partagés.
• Produis un rendu matriciel plus grand puis réduis-le lorsque le livrable final est un PNG.

La propriété SVG shape-rendering peut demander une précision géométrique ou des bords plus nets, mais MDN précise qu’il s’agit d’une indication de rendu, et non d’une garantie portable que chaque raccord disparaîtra. Consulte quand crispEdges aide et quelles sont ses limites avant d’appliquer cette indication à tout un fichier.

Choisis une correction, puis teste-la dans la destination réelle. Cumuler plusieurs corrections peut créer des lignes sombres ou des renflements aux endroits où les formes se chevauchent.

Corriger un véritable espace géométrique

Si le mode contour ou le résultat en aval confirme un trou :

1. Aligne les nœuds concernés sur la même coordonnée.
2. Prolonge les bords voisins jusqu’à ce qu’ils se rejoignent réellement.
3. Relie les extrémités uniquement lorsque le dessin nécessite un tracé continu unique.
4. Supprime les segments en double ou isolés.
5. Réexporte avec une précision de coordonnées suffisante.
6. Rouvre le fichier et répète les quatre tests.

Évite de couvrir l’espace avec une forme blanche. Elle ne masque le symptôme que sur un fond blanc et reste un objet supplémentaire dans le fichier.

Si les espaces viennent de la vectorisation d’une image matricielle bruitée, le dessin peut contenir de nombreuses fines bandes et jonctions presque jointives. Les réparer une par une peut prendre plus de temps que de vectoriser à nouveau une source plus propre.

La destination détermine la bonne correction

Une fissure qui subsiste dans une face CAO ou un maillage en aval est fondamentalement différente d’un raccord d’un pixel dans un navigateur. Si la géométrie en aval se sépare, répare les tracés source ou la tolérance de conversion. Si seule une vignette de navigateur montre la ligne, la géométrie de production est peut-être déjà correcte.

La liste de vérification SVG avant découpe couvre les contrôles propres aux machines. Pour un affichage flou ou des pixels cachés plutôt que des raccords, utilise le diagnostic d’un SVG pixellisé.

Le rôle de PerfectVector

Lorsque des espaces parsèment une vectorisation réalisée à partir d’un PNG ou d’un JPG, reviens à la source matricielle avant de retoucher des dizaines de tracés. Nettoie les blocs de compression évidents, retire le fond indésirable et conserve les bords d’origine les plus nets. Utilise ensuite le flux de conversion d’image en vecteur pour reconstruire les zones visibles en tracés modifiables et examine l’aperçu.

PerfectVector ne peut pas savoir si deux zones de même couleur doivent rester séparées pour l’animation, la découpe ou l’assemblage. Utilise l’aperçu pour vérifier les silhouettes et les espaces négatifs, puis teste le SVG téléchargé dans sa destination réelle. Une nouvelle vectorisation est utile lorsque la fragmentation de la source a causé les espaces, pas lorsqu’un navigateur applique simplement l’anticrénelage à une géométrie adjacente correcte.

FAQ

Pourquoi y a-t-il des lignes blanches entre les tracés SVG ? Le navigateur ou l’application peut appliquer l’anticrénelage séparément aux bords adjacents, ce qui laisse apparaître le fond à certaines échelles. Les tracés peuvent pourtant se rejoindre exactement. Change le zoom, le fond, le moteur de rendu et le mode contour avant de modifier le fichier.

Comment supprimer les raccords d’anticrénelage dans un SVG ? Pour des aplats adjacents, ajoute un très léger chevauchement contrôlé, un contour extrêmement fin de même couleur ou une forme de fond. Teste le résultat aux tailles d’affichage finales. N’applique pas ces corrections aveuglément aux dessins destinés à la découpe, à la CAO, à la transparence ou à l’animation.

Réunir tous les tracés supprimera-t-il les espaces ? Cela peut fonctionner, mais supprime aussi la séparation des couleurs et la structure de modification. Réunis les tracés uniquement s’ils doivent former une seule forme. Un dessin multicolore nécessite généralement des objets séparés : faire coïncider les bords ou contrôler le chevauchement est donc plus sûr.

Pourquoi les espaces n’apparaissent-ils que lorsque le SVG est petit ? La mise à l’échelle déplace les limites vectorielles par rapport à la grille de pixels. À certaines tailles, les deux bords adjacents se mélangent au fond dans la même rangée ou colonne de pixels. Un rendu plus grand ou un léger chevauchement peut empêcher le fond d’apparaître.

Les petits espaces dans un SVG comptent-ils pour l’impression 3D ou la découpe ? Ils comptent s’ils subsistent dans la face, le maillage ou le parcours d’outil. Un raccord visible uniquement à l’écran ne prouve pas que la géométrie est défectueuse. Examine l’aperçu en aval et répare toute fissure ou tout contour ouvert qui modifie l’objet produit.

Sources

1. W3C — SVG 2 Rendering Model — Décrit l’ordre de peinture SVG, l’écrêtage, la composition et l’anticrénelage.
2. MDN — shape-rendering — Documente les indications de rendu disponibles pour les formes SVG.
3. W3C — SVG 2 Coordinate Systems — Définit le modèle de coordonnées, de zone d’affichage et de transformations qui sous-tend le rendu dépendant de l’échelle.

---

Si une vectorisation fragmentée issue d’une image matricielle contient de véritables espaces, reconstruis-la en tracés vectoriels modifiables et examine l’aperçu. Si les tracés se rejoignent déjà, conserve le fichier et applique uniquement la correction d’affichage minimale adaptée à la destination.