Les traits SVG disparaissent après l’exportation : trouver la cause

Quand un trait SVG disparaît après l’exportation, vérifie d’abord si la géométrie du tracé existe encore. La ligne peut n’avoir aucune peinture de trait, se confondre avec le fond, devenir trop fine à la nouvelle échelle, sortir du viewBox ou être rognée au bord de la page. Elle peut aussi utiliser un pinceau, un profil de largeur variable, un filtre ou une règle CSS que l’application cible ne comprend pas.

Ne retrace pas immédiatement le dessin et ne décompose pas tous les objets. Conserve la source modifiable, crée une copie de test et isole une ligne défaillante. Une réparation minimale préserve généralement davantage la structure d’origine.

Le diagnostic rapide

1. Ouvre le même SVG dans un navigateur récent et un éditeur vectoriel.
2. Sélectionne la ligne manquante et confirme que son tracé et ses nœuds existent encore.
3. Applique à la copie une couleur vive, une opacité complète et un trait temporairement plus large.
4. Éloigne-la du bord et désactive un à un les écrêtages, masques et filtres.
5. Supprime les transformations ou examine leur effet sur la largeur du trait.
6. Si une seule destination échoue, remplace l’apparence incompatible dans une copie de livraison.

Quatre résultats possibles pour un trait

Vérifier d’abord que le tracé existe encore

Ouvre une copie du SVG dans un éditeur de texte et cherche des formes ordinaires comme <path>, <line>, <polyline>, <circle> ou <rect>. Sélectionne ensuite l’objet manquant dans un éditeur vectoriel et passe en vue contour ou filaire.

• Si les nœuds et le tracé sont visibles, la géométrie a survécu. Examine peinture, écrêtage, transformations et prise en charge.
• Si l’objet existe loin de la page, ramène-le ou corrige le viewBox.
• Si la ligne est devenue une forme fermée remplie, elle a peut-être déjà été convertie en contour.
• Si aucune géométrie correspondante n’existe, examine la source et les réglages d’exportation. L’exportateur a pu omettre un objet incompatible.

Compare deux moteurs avant toute modification. Un trait visible dans Chrome mais absent d’un éditeur de bureau suggère une limitation d’importation ou une dépendance CSS. Une ligne absente partout suggère davantage une peinture incorrecte, un écrêtage, de mauvaises limites ou une géométrie absente. Si tout le document est vide, suis le diagnostic des SVG vides.

Si le trait disparaît précisément dans Penpot, utilise les vérifications d’importation SVG dans Penpot pour isoler le problème.

Cause 1 : le trait n’a aucune peinture visible

SVG traite remplissage et trait comme des propriétés distinctes. Un tracé peut exister sans afficher de ligne. Le guide MDN des remplissages et traits couvre les propriétés essentielles, dont stroke, stroke-width et l’opacité.

Examine l’objet et ses styles hérités pour repérer :

• stroke="none" ;
• un stroke absent avec fill="none" ;
• stroke-width="0" ou une largeur extrêmement faible ;
• opacity="0" ou stroke-opacity="0" ;
• une couleur identique à la page ou à la forme environnante ;
• display="none" ou visibility="hidden" sur l’objet ou un groupe parent ;
• une classe CSS qui remplace les attributs de présentation.

Sur une copie, applique une couleur saturée, une opacité de 100 % et une largeur multipliée plusieurs fois. Si un contour épais recouvre le remplissage des lettres, compare l’ordre de peinture SVG du trait et du remplissage avant de changer les tracés. Place un rectangle contrasté derrière. Si la ligne apparaît, restaure sa couleur et choisis une largeur lisible à la taille de livraison.

Un style déclaré sur l’élément peut être remplacé par une règle de feuille de style plus spécifique. Examine le style calculé dans les outils de développement du navigateur si le balisage indique une chose et le rendu une autre.

Cause 2 : la ligne est rognée au bord de la page ou du cadre

Un trait s’étend des deux côtés de son axe. Si celui-ci se trouve sur la frontière du viewBox, la moitié du trait peut sortir de la zone d’affichage. Une ligne épaisse, une extrémité carrée, une jonction en onglet, un flou ou une ombre nécessitent plus de place que les coordonnées du tracé ; la spécification SVG de peinture définit cette extension selon largeur, extrémités, jonctions et limites d’onglet. Si une forme fermée nécessite un trait entièrement intérieur ou extérieur, consulte le guide d’alignement des traits pour comparer son emprise avant de redimensionner la page.

Déplace l’objet vers l’intérieur ou agrandis temporairement le viewBox. Si la partie manquante réapparaît, ajoute une marge délibérée. N’agrandis pas aveuglément la page : calcule l’espace nécessaire pour la largeur maximale, les extrémités, jonctions et effets.

Examine aussi les références clipPath et mask. Un écrêtage limité au remplissage peut rogner le trait qui le dépasse. Les SVG imbriqués peuvent créer leurs propres zones d’affichage, et le comportement overflow peut varier entre navigateur et importateur.

Si un seul angle disparaît, examine stroke-miterlimit. Un onglet aigu peut dépasser largement le tracé. Une jonction arrondie ou biseautée peut mieux convenir qu’un agrandissement de la zone, mais seulement si elle préserve le dessin voulu.

Cause 3 : l’échelle ou les transformations faussent le trait

Une transformation peut changer la géométrie et l’apparence du trait. Une ligne lisible à la taille de création peut devenir extrêmement fine après l’importation, surtout si l’application interprète autrement les unités ou les transformations imbriquées.

Cherche transform="scale(...)" sur le tracé et ses groupes parents. Compare viewBox, width et height, puis teste à 100 % de zoom et à la taille physique finale. Si tout le dessin s’importe aux mauvaises dimensions, corrige la correspondance avec le test d’échelle SVG à taille connue plutôt que de compenser avec des largeurs arbitraires.

SVG accepte aussi vector-effect="non-scaling-stroke". Comme l’explique la référence MDN vector-effect, la valeur courante non-scaling-stroke empêche la largeur rendue de suivre les transformations. Cela peut servir aux schémas d’interface et aux cartes ; vérifie l’importateur prévu, car la prise en charge hors navigateur dépend de l’application.

N’ajoute pas non-scaling-stroke comme correction universelle. Décide si la ligne doit suivre l’échelle du dessin. Les traits d’un logo agrandi pour l’impression doivent généralement grandir aussi. Une ligne de carte qui doit rester à un pixel écran pendant le zoom peut volontairement conserver sa largeur.

Cause 4 : la destination ne reproduit pas l’apparence

Toute ligne d’une application de dessin n’est pas un simple trait SVG. Elle peut utiliser un pinceau sensible à la pression, un profil variable, un pinceau à motif, un effet dynamique, un dégradé de formes, un filtre ou une pile d’apparences propriétaire. L’exportateur peut l’approximer et une autre application ignorer cette approximation.

Sur un duplicata, effectue un test de réduction :

1. supprime le filtre en gardant le trait de base ;
2. remplace le motif ou pinceau par un trait uni ;
3. supprime la largeur variable ;
4. aplatis les transformations imbriquées ;
5. exporte uniquement cet objet dans un SVG minimal ;
6. ouvre-le dans la destination.

La première simplification qui restaure la ligne identifie la fonctionnalité incompatible. Tu peux alors choisir un remplacement portable sans aplatir tout le document.

Les CSS et ressources externes présentent aussi un risque. Un SVG intégré à un site peut hériter d’une classe ou propriété personnalisée de la page qui manque à l’ouverture autonome. Un éditeur de bureau peut à l’inverse supprimer des sélecteurs étrangers à son modèle d’objets. Pour un fichier autonome, utilise des styles intégrés dont l’importation dans la cible est vérifiée.

Trait éditable ou tracé en contour ?

Un trait éditable conserve son axe, sa largeur, ses extrémités, jonctions, tirets et peinture. Il est compact et facile à ajuster. Sa conversion en contour transforme la bande visible en géométrie remplie. Elle fixe l’apparence, mais sacrifie l’axe et les commandes de trait.

Convertis une copie de livraison lorsque la destination ne préserve pas un pinceau ou une largeur variable essentielle, ou si un prestataire exige des formes remplies. La documentation Adobe Expand objects décrit la décomposition des traits en objets constitutifs.

Garde l’original avec ses traits éditables, car la décomposition peut :

• augmenter les nœuds et la taille du fichier ;
• ralentir les changements de largeur ;
• transformer les chevauchements en géométrie complexe ;
• créer des éléments distincts à réunir ;
• changer le sens des tracés ouverts pour le traçage, la gravure ou l’animation.

Elle est particulièrement risquée si un traceur à stylo ou un procédé de gravure doit suivre l’axe une seule fois. Un trait converti donne deux frontières à la machine. Utilise alors le guide des SVG à ligne unique.

Choisir la correction selon la destination

Teste la destination exacte, pas seulement un autre éditeur du même fournisseur. Navigateur, dessin, impression, découpe et CAO peuvent prendre en charge des sous-ensembles SVG différents.

Un ordre de réparation prudent

Commence par les contrôles réversibles avant de convertir la structure :

1. conserve la source modifiable et crée un duplicata ;
2. confirme la présence de géométrie ;
3. compare deux moteurs ;
4. teste peinture, largeur et opacité explicites ;
5. vérifie le contraste du fond et le CSS hérité ;
6. examine limites, écrêtages, masques et zones imbriquées ;
7. examine transformations et rendu à taille finale ;
8. simplifie les apparences incompatibles une à une ;
9. convertis uniquement les traits nécessaires dans une copie de livraison ;
10. rouvre le SVG livré et compare-le à la source.

N’utilise pas la rastérisation comme réparation intermédiaire lorsque de bons tracés subsistent. Elle supprime la géométrie à préserver et ajoute une vectorisation susceptible d’adoucir les angles, de changer les courbes et de créer des nœuds inutiles.

Le rôle de PerfectVector

PerfectVector sert lorsque la géométrie originale a disparu ou est inutilisable et que la meilleure source restante est une image matricielle. Il peut reconstruire un logo en aplats, une icône ou une illustration adaptée en formes vectorielles modifiables.

Il ne répare pas le CSS, ne restaure pas un trait éditable omis et ne convertit pas un pinceau incompatible en préservant son axe. Si le tracé existe encore, corrige peinture, limites, transformations ou apparence dans un éditeur vectoriel. Cela préserve davantage d’informations que la vectorisation d’une capture.

FAQ

Pourquoi les traits SVG disparaissent-ils après l’exportation ? Le tracé peut subsister sans trait visible, avec une opacité nulle, une couleur identique au fond, une largeur minuscule, un écrêtage, une mauvaise échelle ou une apparence incompatible. Confirme d’abord la géométrie, puis isole peinture, limites, transformations et prise en charge.

Comment vérifier si le tracé existe encore ? Sélectionne l’objet dans un éditeur vectoriel et passe en vue contour ou filaire. Tu peux aussi chercher l’élément correspondant dans le texte SVG. Des nœuds présents sans ligne visible indiquent plutôt un problème de rendu ou de style.

Pourquoi un trait est-il rogné au bord du SVG ? Il dépasse son axe : sur la frontière du viewBox, il peut perdre la moitié de sa largeur. Extrémités, jonctions, filtres, écrêtages et masques nécessitent parfois davantage de marge. Déplace le tracé vers l’intérieur ou dimensionne la zone et le écrêtage selon toute l’apparence.

Faut-il décomposer les traits avant l’exportation ? Seulement si la destination ne préserve pas une apparence essentielle ou exige des formes remplies. Décompose une copie et conserve l’original éditable. Cela ajoute de la géométrie et ne convient pas à un outil qui doit suivre un seul axe.

PerfectVector peut-il restaurer un trait SVG manquant ? Pas si le SVG nécessite simplement une réparation de tracé ou de style. Il peut reconstruire le dessin visible depuis la meilleure image restante quand la géométrie vectorielle n’est plus disponible, mais ne récupère ni CSS, ni réglages de pinceau, ni axe éditable original.

Sources

1. W3C — SVG 2 Painting — Définit remplissage, trait, largeur, extrémités, jonctions et effets vectoriels.
2. W3C — SVG 2 Coordinate Systems — Documente zones d’affichage, viewBox, unités et transformations.
3. MDN — vector-effect — Explique non-scaling-stroke.
4. Adobe Illustrator — Group and expand objects — Documente la décomposition des traits en objets modifiables.

---

Lorsque la géométrie originale a disparu et que la meilleure source restante est matricielle, reconstruis le dessin en tracés nets avec PerfectVector, puis vérifie-le dans l’application cible. Si les tracés existent encore, répare le SVG plutôt que de le retracer.