Pourquoi les couleurs SVG changent après l’export : diagnostiquer la cause

Un SVG change de couleur après l’export lorsque l’apparence source et le fichier livré sont interprétés différemment. L’exportateur peut convertir les valeurs de couleur. Un site web peut remplacer fill via le CSS ou résoudre currentColor à partir d’un parent. Un dégradé, un réglage d’opacité, un mode de fusion ou un filtre peut dépendre d’une fonction que la destination traite autrement. Parfois, le balisage exporté est correct et un seul importateur se distingue des autres.

Ne commence pas par remplacer toutes les valeurs hexadécimales. Trouve d’abord à quel moment l’apparence change. Tu sauras ainsi s’il faut réparer le SVG, changer l’export, simplifier une copie de livraison ou conserver le dessin dans un autre format.

Associe le symptôme à la première vérification

Où chercher en premier

Isole le problème en cinq minutes

1. Garde le fichier maître modifiable intact

Enregistre un duplicata pour les tests. N’aplatis pas les effets, ne convertis pas tous les objets en contours et ne remplace pas les couleurs dans ta seule copie modifiable. Ces changements peuvent masquer la cause et compliquer les révisions ultérieures.

2. Ouvre le SVG exporté à deux endroits

Utilise un navigateur à jour comme témoin neutre, puis ouvre ou importe le même fichier dans sa destination réelle. Compare les deux au dessin source sur le même fond.

• Si les deux affichages exportés sont incorrects, examine l’exportateur ou le SVG sérialisé.
• Si le navigateur affiche correctement le fichier seul mais que la destination est incorrecte, examine l’intégration, le CSS ou la prise en charge par l’importateur.
• Si seules les zones transparentes ou fusionnées diffèrent, teste le fond et les effets avant de toucher aux aplats.

Un navigateur est un témoin utile, pas une preuve que toutes les applications de dessin ou de production importeront les mêmes fonctions.

3. Examine les instructions de peinture

Ouvre le SVG dans un éditeur de texte et cherche :

fill=
stroke=
currentColor
url(#
opacity=
fill-opacity=
mix-blend-mode
filter=

Tu cherches la structure ; tu ne réécris encore rien. Une valeur littérale fill="#2F6BFF" oriente vers une autre piste que fill="currentColor" ou fill="url(#paint0)".

Si tu ouvres du balisage SVG pour la première fois, le guide complet pour modifier un SVG explique les méthodes par le code et par un éditeur visuel.

4. Simplifie un objet défectueux

Copie le plus petit objet qui change encore dans un nouveau document et exporte-le. Retire une fonction à la fois : d’abord le filtre, puis le mode de fusion, puis le dégradé, puis l’opacité du groupe. Le premier retrait qui corrige le résultat identifie la fonction non prise en charge ou dépendante du contexte.

Ce test de réduction est plus sûr que l’aplatissement de toute l’illustration, car il révèle une contrainte précise de livraison.

Cause 1 : l’exportateur a converti l’espace colorimétrique

Les couleurs hexadécimales et la syntaxe familière rgb() décrivent des couleurs sRGB. Le CSS moderne peut également exprimer des espaces à gamut plus large, comme Display P3, via color(), comme le définit CSS Color Module Level 4. Une application de dessin peut donc contenir une couleur source à convertir avant qu’elle devienne une valeur hexadécimale sRGB, et cette conversion peut changer les nombres ou écrêter une couleur hors gamut.

Vérifie le problème dans cet ordre :

1. note l’espace colorimétrique du document source et la valeur numérique de l’objet sélectionné ;
2. exporte un seul objet en aplat, sans opacité ni effets ;
3. ouvre le SVG comme texte et lis le fill ou le stroke sérialisé ;
4. compare le nombre exporté à celui de la source ;
5. teste le même fichier dans la destination.

Si la valeur a changé dans le fichier, la conversion a eu lieu à l’export. Choisis délibérément l’espace colorimétrique cible et exporte à nouveau. Si la valeur est inchangée mais que l’apparence diffère, passe au CSS, aux effets, au fond ou au comportement de l’importateur.

Pour les travaux d’impression nécessitant des séparations CMJN, des tons directs ou une composition précise du noir, garde le fichier maître faisant autorité pour l’impression dans le format natif de l’application de dessin et livre le format demandé par l’imprimeur, souvent PDF. Un SVG peut rester utile à l’écran, mais ne doit pas devenir implicitement la référence de couleur d’un flux qu’il ne peut pas décrire de façon fiable.

Cause 2 : currentColor ou le CSS a remplacé la peinture

Le SVG peut être stylé avec le CSS. La spécification de style SVG 2 indique que les attributs de présentation comme fill participent à la cascade CSS avec une spécificité nulle : le CSS de l’auteur peut donc les remplacer. Un SVG intégré directement dans le HTML partage aussi le document avec la page qui l’entoure, ce qui signifie que des noms de classes génériques peuvent entrer en collision avec les styles du site.

currentColor est une indirection intentionnelle. La référence MDN sur la couleur SVG explique qu’il fournit une valeur à fill, stroke, aux arrêts de dégradé et à d’autres propriétés de peinture. C’est utile pour les icônes qui doivent suivre le texte environnant, mais cela signifie aussi que le fichier n’a pas de couleur fixe à cet endroit.

Utilise l’une de ces deux stratégies de livraison :

• Pour une icône web adaptable au thème, garde currentColor et définis un color explicite sur le SVG ou son parent prévu.
• Pour une ressource autonome devant conserver sa palette, écris des remplissages et des contours explicites et donne aux classes internes des noms propres à leur contexte pour éviter les collisions.

Lorsque plusieurs SVG intégrés directement dans le HTML contiennent des identifiants comme paint0, clip0 ou gradient1, rends-les uniques et mets leurs références à jour ensemble. Ne change pas uniquement l’id ; chaque url(#id) doit continuer à pointer vers sa définition.

Si ton objectif est de recolorer volontairement plutôt que de corriger un changement à l’export, utilise le guide séparé pour changer les couleurs SVG sans risque.

Cause 3 : un dégradé ou une référence de peinture est cassé

Les dégradés et motifs SVG sont des serveurs de peinture. Une forme y fait référence, par exemple avec fill="url(#brandGradient)", tandis que la définition du dégradé se trouve normalement dans <defs>. La spécification des serveurs de peinture SVG 2 définit aussi comment les coordonnées et transformations des dégradés influencent le résultat.

Trois vérifications détectent la plupart des défaillances structurelles :

1. chaque url(#id) possède une définition correspondante ;
2. les identifiants restent uniques après la réunion de plusieurs SVG sur une même page ou dans un même document ;
3. la destination préserve le type de peinture, les unités, les transformations et les arrêts du dégradé utilisés par le fichier.

Si un aplat simple est importé correctement mais pas le dégradé, garde le dégradé dans le fichier maître et crée une copie de livraison pour la destination. Essaie d’abord un dégradé linéaire ou radial plus simple. Si la destination ne peut toujours pas le reproduire et que l’apparence exacte compte davantage qu’une peinture modifiable, utilise un format ou une ressource aplatie pris en charge par le flux destinataire. Nomme clairement cette copie afin qu’elle ne remplace pas la source modifiable.

Cause 4 : l’opacité et la fusion ont changé le résultat visible

Le pixel visible ne correspond pas toujours au remplissage stocké. fill-opacity agit sur le remplissage d’une forme, l’opacity d’un groupe s’applique après la combinaison de ses enfants, et un mode de fusion mélange la source à son arrière-plan. La spécification W3C Compositing and Blending définit l’ordre de rendu et les formules de fusion dépendantes de l’arrière-plan.

Cela a deux conséquences pratiques :

• Le même SVG peut sembler différent sur une page blanche, noire ou colorée sans qu’aucune valeur de couleur change.
• Déplacer l’opacité d’un groupe vers chacun de ses enfants peut changer les chevauchements, car l’ordre de composition est différent.

Teste sur le fond réel. Retire ensuite mix-blend-mode, les filtres, les masques et l’opacité du groupe un par un sur un duplicata. Si la destination ne peut pas préserver un effet essentiel, choisis entre un traitement vectoriel simplifié et une ressource de livraison aplatie. N’aplatis pas les parties du dessin sans rapport avec le problème.

Un rectangle blanc ou coloré derrière le dessin est un cas distinct. Le guide du SVG à fond transparent montre comment distinguer une véritable forme de fond d’une zone de dessin vide.

Cause 5 : la destination n’a importé qu’une partie du SVG

Le SVG est une norme web, mais de nombreux outils de bureau, d’impression, de découpe, de présentation et de création de sites le traduisent dans leur propre modèle d’objets. La prise en charge peut varier selon l’application et la version. Évite une règle comme « cette application ne prend jamais en charge les dégradés », sauf si la documentation officielle actuelle le dit et correspond à ta version exacte.

Effectue plutôt un test d’import contrôlé :

1. importe un seul tracé en aplat ;
2. ajoute le dégradé original ;
3. ajoute l’opacité ;
4. ajoute la fusion ou le filtre ;
5. arrête-toi à la première version qui change.

Tu connais maintenant la limite de cette destination. Garde le fichier maître complet et exporte une copie de livraison respectant la limite testée. Si ce sont les contours qui disparaissent, suis le diagnostic d’export propre aux contours plutôt que de convertir chaque ligne en forme pleine.

Choisis la plus petite correction sûre

Le rôle de PerfectVector

PerfectVector est utile lorsque la source vectorielle a disparu ou est inutilisable et que le meilleur dessin restant est une image matricielle. Tu peux transformer cette image en formes vectorielles modifiables, puis examiner la palette, la transparence et les tracés avant d’ouvrir le résultat dans la destination.

Il ne répare pas le CSS hérité, ne restaure pas une définition de dégradé manquante, ne récupère pas le profil colorimétrique d’une application de dessin, ne préserve pas un mode de fusion non pris en charge et ne modifie pas l’analyseur d’un importateur. Si le SVG contient encore de bons tracés et instructions de peinture, répare le fichier plutôt que de vectoriser une capture d’écran. Tu préserveras davantage de sa structure originale.

Liste de vérification avant livraison

• Garde le fichier maître modifiable et effectue les corrections dans un duplicata.
• Compare le fichier exporté dans un navigateur et dans la destination réelle, sur le même fond.
• Vérifie si les valeurs sérialisées de fill et de stroke ont changé.
• Cherche currentColor, les classes génériques et les identifiants répétés.
• Associe chaque référence url(#id) à sa définition.
• Teste séparément l’opacité des groupes, les modes de fusion, les filtres et les masques.
• Simplifie uniquement la fonction que la destination ne peut pas reproduire.
• Rouvre ou réimporte le fichier de livraison final avant de remplacer la version précédente.

FAQ

Pourquoi mon SVG est-il correct dans un navigateur, mais incorrect après import ? Le fichier utilise probablement une fonction ou un contexte de style que la destination traduit différemment. Importe un seul tracé en aplat, puis réintroduis le dégradé, l’opacité, la fusion ou le filtre un par un. La première étape défectueuse révèle la limite de la destination sans abîmer le fichier maître.

Les fichiers SVG sont-ils toujours en RVB ? Les couleurs hexadécimales courantes et rgb() sont en sRGB, tandis que le CSS moderne peut aussi exprimer des espaces comme Display P3. Les applications de dessin et d’impression peuvent convertir ces couleurs à l’export ou à l’import. Examine la couleur sérialisée et utilise le format de production demandé par l’imprimeur pour les travaux CMJN ou en tons directs.

Pourquoi mon SVG est-il devenu noir après l’export ? Vérifie si le fichier utilise currentColor, a perdu une règle CSS ou référence un dégradé ou un identifiant de peinture manquant. Le noir peut être une couleur héritée ou le symptôme d’un mécanisme de repli, plutôt qu’un remplacement du remplissage original. Compare le fichier seul à sa version intégrée ou importée.

Dois-je remplacer toutes les valeurs hexadécimales lorsque les couleurs semblent incorrectes ? Non. Détermine d’abord si les valeurs ont changé à l’export. Si les nombres sont intacts, les remplacer peut masquer un problème de CSS, de référence de peinture, de fusion, de fond ou d’importateur, et rendre le fichier moins fidèle ailleurs.

PerfectVector peut-il réparer un SVG dont les couleurs ont changé après l’export ? Pas lorsque le SVG a seulement besoin d’une correction de CSS, de dégradés, d’opacité, de profil ou de comportement d’importateur. PerfectVector convient lorsque le vecteur original est perdu et que tu dois reconstruire un dessin matriciel en aplats adapté en formes vectorielles modifiables.

Sources

1. W3C — SVG 2 Styling — Définit le style CSS, les attributs de classe et de style, les attributs de présentation, la cascade et l’héritage dans le SVG.
2. MDN — Attribut SVG color — Explique comment currentColor fournit les valeurs de peinture des remplissages, contours, arrêts de dégradé et propriétés associées.
3. W3C — SVG 2 Paint Servers — Définit les dégradés linéaires et radiaux, les références de peinture, les systèmes de coordonnées, les transformations et l’interpolation des couleurs.
4. W3C — CSS Color Module Level 4 — Définit la syntaxe de couleur sRGB et les espaces prédéfinis plus larges, dont Display P3.
5. W3C — Compositing and Blending Level 1 — Définit les groupes d’opacité, l’ordre de composition, les arrière-plans et les modes de fusion pour SVG et CSS.

Si la meilleure source restante est un PNG ou un JPG, reconstruis-la en SVG avec PerfectVector, puis compare le résultat dans un navigateur affichant le fichier seul et dans sa destination finale avant de remplacer l’ancien fichier.