Pourquoi les trous d’un SVG se remplissent et comment les rétablir

Un trou SVG se remplit quand le fichier ou la destination cesse de considérer le contour intérieur comme extérieur à la forme remplie. Les causes habituelles sont un tracé composé libéré, un contour intérieur stocké comme objet rempli séparé, une règle de remplissage ou un sens de tracé modifié, un importateur qui perd la relation ou une vectorisation de l’image matricielle qui a fermé l’ouverture avant la création du SVG.

Commence par ouvrir le SVG dans un navigateur. Si le trou y est déjà rempli, répare le fichier. Si le navigateur est correct mais qu’une autre application remplit le trou, l’importation est probablement en cause.

Trouve d’abord où le trou a disparu

Utilise deux moteurs de rendu avant de changer la géométrie :

1. Enregistre une copie du SVG.
2. Ouvre directement la copie dans Chrome, Safari, Firefox ou un autre navigateur.
3. Place-la sur un fond clair et un fond sombre.
4. Ouvre le même fichier dans l’application de destination.
5. Compare le trou précis, pas seulement la silhouette globale.

Cette comparaison distingue un mauvais SVG d’un problème d’importation propre à la destination. Elle évite aussi que des opérations aléatoires sur les tracés abîment un fichier correct avant importation.

Une forme blanche n’est pas un trou

Un vrai trou montre ce qui se trouve derrière le SVG. Une forme blanche semble vide uniquement sur une surface blanche. Pour un dessin utilisé dans une interface Web, le guide de pointer-events SVG montre comment un trou, une région peinte et une cible d’interaction séparée répondent aux clics.

Pour tester, ajoute un rectangle sombre temporaire derrière le dessin. Si le trou supposé reste blanc, sélectionne cet objet intérieur. Tu peux le garder comme élément blanc délibéré, mais n’attends pas d’une machine de découpe, d’un outil de gravure, d’une superposition dans un navigateur ou d’un importateur 3D qu’il l’interprète comme du vide.

Pour une ouverture transparente, utilise un tracé composé ou soustrais la forme intérieure de la forme extérieure. Un masque peut aussi créer de la transparence, mais de nombreuses applications de production gèrent plus fiablement une géométrie de tracé simple que des masques. Pour un workflow scripté, essaie de découper et réunir les tracés importés avec Paper.js, puis rouvre le SVG exporté pour vérifier l’ouverture.

Pour un dessin de gobo, une ouverture transparente correcte laisse encore une décision de matériau distincte. La comparaison des gobos en acier et en verre suit la même lettre O dans un dessin à ponts en acier et un dessin soutenu par du verre, et explique pourquoi inverser les régions claires et sombres projetées change ce qui doit rester attaché.

Les tracés composés portent la relation du trou

Une lettre O, un anneau et un logo au centre évidé utilisent souvent un seul élément path avec plusieurs sous-tracés fermés. Le contour extérieur définit la silhouette ; un sous-tracé entouré définit la contreforme ou l’évidement. Le modèle de tracé SVG autorise plusieurs sous-tracés dans un seul tracé.

Voilà pourquoi Ungroup, Break Apart et Release Compound Path ne sont pas interchangeables. Libérer le tracé composé peut transformer le contour intérieur en objet rempli ordinaire. La géométrie est encore présente, mais sa relation au contour extérieur a disparu.

Rétablis-la sur une copie :

1. Sélectionne la limite extérieure et uniquement les contours qui doivent être des trous.
2. Utilise Make Compound Path, Combine ou la commande équivalente.
3. Applique un remplissage unique à l’objet obtenu.
4. Vérifie la règle de remplissage.
5. Rouvre le SVG enregistré dans un navigateur et l’application de destination.

La documentation actuelle des tracés composés d’Adobe utilise ce même modèle : les tracés constitutifs déterminent les régions remplies et transparentes par une règle de remplissage.

Rétablis la relation, pas seulement l’apparence

Pour un dessin de tampon, vérifie la géométrie en relief ou en creux des tampons de poterie avant de décider quelles zones doivent rester remplies.

Vérifie nonzero et evenodd

SVG possède deux règles de remplissage. La spécification de peinture SVG 2 définit nonzero comme valeur initiale et evenodd comme autre option.

• nonzero utilise les croisements signés du tracé. Un contour intérieur dans le mauvais sens peut ajouter du remplissage au lieu de l’annuler.
• evenodd compte les croisements. Un point entouré deux fois est extérieur : un simple contour imbriqué devient donc un trou indépendamment du sens du contour.

Ce tracé minimal contient deux rectangles dans le même sens. Avec evenodd, le centre reste transparent :

<path
  fill="#2563eb"
  fill-rule="evenodd"
  d="M10 10H90V90H10Z M30 30H70V70H30Z"
/>

Changer la règle aide si cela correspond au dessin, mais ce n’est pas une réparation universelle. Les deux contours doivent encore être évalués comme sous-tracés de la même forme. Définir fill-rule="evenodd" sur deux objets sans lien ne fait pas découper l’un à travers l’autre.

Si tu gardes nonzero, inverse uniquement le contour intérieur lorsque ton éditeur propose cette commande. Illustrator expose les deux règles de remplissage et un contrôle de sens pour les tracés composés. Enregistre une copie avant toute inversion, car les auto-intersections et contreformes imbriquées multiples peuvent produire un résultat différent d’un simple anneau.

Quand le SVG est correct mais l’importateur incorrect

Certains outils de découpe, CAO, 3D et d’animation ne prennent en charge qu’un sous-ensemble pratique de SVG. Un navigateur peut rendre correctement le tracé composé alors que la destination importe chaque contour comme objet plein.

Utilise cet ordre de réparation :

1. Enregistre une copie simplifiée depuis l’éditeur source.
2. Convertis le texte éditable en contours dans cette copie si l’importation du texte est le point faible.
3. Remplace les masques, écrêtages et effets d’apparence par de la géométrie de tracé simple uniquement là où nécessaire.
4. Garde chaque trou voulu avec son contour extérieur dans un seul tracé composé.
5. Teste délibérément evenodd et nonzero au lieu de changer sans cesse.
6. Si l’importateur remplit encore l’ouverture, importe les deux limites et soustrais le profil intérieur dans la destination.

Pour un workflow d’extrusion, la destination doit aussi reconnaître un profil fermé sélectionnable. Le diagnostic d’extrusion SVG couvre les extrémités ouvertes, doublons et la validité du profil après préservation du trou.

Quand le tracé a fermé l’ouverture

Un vectoriseur peut fermer la contreforme d’une petite lettre ou fusionner un espace étroit si la source matricielle est petite, floue ou peu contrastée. C’est un problème de géométrie, pas de règle de remplissage : la limite intérieure n’est jamais entrée dans le SVG.

Reviens à la source matricielle et :

• agrandis-la ou capture-la à nouveau sans ajouter de flou ;
• augmente la séparation autour de l’ouverture importante ;
• retire le bruit de compression près de l’espace ;
• réduis le lissage ou la fusion des couleurs si l’outil propose ces contrôles ;
• compare le nouveau tracé à la taille de sortie finale.

C’est la branche où PerfectVector peut aider. Utilise le workflow d’image vers vecteurs si tu as l’original matriciel et que tu as besoin d’un nouveau tracé SVG. Inspecte chaque contreforme et espace négatif avant téléchargement. Si le SVG était correct jusqu’à ce qu’un éditeur libère ses tracés composés, répare plutôt ce SVG ; retracer ne récupérera pas l’historique des modifications perdu.

La même approche centrée sur la source aide pour le lettrage. Le guide de vectorisation du lettrage à la main montre comment garder les petites contreformes ouvertes sans retirer le caractère du dessin entier.

Une vérification finale sûre

Avant d’envoyer le SVG réparé :

• affiche-le sur des fonds clairs, sombres et transparents ;
• sélectionne la cible et confirme qu’il s’agit d’un seul tracé composé voulu ;
• inspecte la règle de remplissage dans l’éditeur ou le code source SVG ;
• vérifie chaque contreforme de lettre, anneau et espace négatif entouré ;
• rouvre le fichier exporté au lieu de te fier à la surface non enregistrée ;
• teste l’application de destination exacte ;
• garde la source modifiable et la copie de livraison simplifiée séparées.

Si l’objet se comporte désormais comme une seule sélection, cela peut être correct. Un tracé composé est un objet unique par conception. Utilise le guide de dissociation SVG avant de le séparer à nouveau.

FAQ

Pourquoi les trous se sont-ils remplis après Break Apart ? Break Apart a séparé les contours intérieurs du tracé composé extérieur. Les anciens trous sont devenus des objets remplis ordinaires. Annule la commande ou combine à nouveau chaque contour extérieur avec les bons contours intérieurs, puis vérifie la règle de remplissage.

Dois-je utiliser fill-rule="evenodd" pour les trous SVG ? evenodd est souvent pratique pour les contours imbriqués, car leur sens ne décide pas du résultat. Il fonctionne encore au sein d’une seule forme ; il ne soustrait pas un objet séparé. Garde nonzero si ta source et ta destination préservent les sens de contours voulus.

Pourquoi le SVG semble-t-il correct dans un navigateur mais plein dans mon application ? L’importateur de destination peut ne pas préserver le tracé composé, la règle de remplissage, le masque ou le sens du contour. Simplifie une copie en tracés simples, puis reteste. Au besoin, importe les limites extérieure et intérieure et soustrais le trou dans la destination.

Puis-je créer un trou en plaçant une forme blanche dessus ? Cela simule uniquement un trou sur un fond blanc. L’objet blanc reste rempli : il peut donc être imprimé, découpé ou importé comme un autre solide. Utilise un tracé composé, une soustraction ou une autre structure de transparence si le fond doit apparaître à travers.

PerfectVector peut-il réparer les trous remplis d’un SVG existant ? PerfectVector sert si tu peux revenir à une source matricielle adaptée et créer un nouveau tracé avec les ouvertures voulues visibles. Il ne répare pas un tracé composé libéré par un éditeur ou ignoré par un importateur. Corrige ces relations dans un éditeur vectoriel ou l’application de destination.

Sources

1. W3C — peinture SVG 2 — Définit nonzero, evenodd et la valeur initiale de la règle de remplissage.
2. W3C — tracés SVG — Définit les tracés, sous-tracés et la géométrie des tracés fermés.
3. Adobe Illustrator — créer des tracés composés — Documente les trous composés, règles de remplissage et inversions du sens des tracés constitutifs.
4. PerfectVector — Image to Vector — Workflow actuel de conversion matricielle vers SVG utilisé dans la branche conditionnelle de nouveau tracé.

Si l’ouverture a été perdue pendant la vectorisation de l’image matricielle, crée un nouveau vecteur à partir de la source propre et inspecte chaque contreforme avant livraison. Si la version navigateur est déjà correcte, garde cette géométrie et répare uniquement l’importation qui échoue.