Pourquoi mon SVG devient-il noir ou perd-il ses couleurs ?
Découvrez pourquoi un SVG devient noir, transparent ou mal coloré dans un navigateur, Canva, Cricut ou un importateur, puis corrigez-le.
Réponse rapide
Un SVG devient souvent noir lorsque ses formes n’ont pas de remplissage explicite, dépendent d’un CSS externe, héritent de currentColor dans un autre contexte ou perdent un dégradé, masque ou style pendant l’import. Le noir est le remplissage par défaut quand aucune autre peinture n’atteint la forme. Analysez le fichier avant de recolorer : normalisez le balisage avec le nettoyeur SVG sécurisé, puis utilisez le remplacement de couleurs SVG uniquement si la palette voulue est connue.
Repérer l’endroit où la couleur change
Ouvrez le même fichier directement dans un navigateur, dans l’application cible et dans un éditeur vectoriel. S’il est correct dans le navigateur mais noir après import, l’application ignore probablement un bloc de style, une classe, un filtre ou une couleur héritée. S’il est noir partout, le fichier lui-même manque peut-être de remplissages valides.
| Symptôme | Cause probable | Étape sûre |
|---|---|---|
| Toutes les formes deviennent noires | Remplissages absents ou CSS retiré | Ajouter des attributs directs |
| L’icône suit la couleur du texte | currentColor est volontaire | Définir ou remplacer la couleur |
| Seul un dégradé noircit | Référence de peinture rompue | Réparer l’ID ou aplatir les couleurs |
| Le dessin disparaît | fill none, opacité nulle ou masque cassé | Vérifier remplissage, opacité et masque |
| Couleurs modifiées à l’import | Prise en charge SVG limitée | Transformer les styles en attributs |
Réparer sans détruire
- Conservez une copie intacte.
- Lancez le contrôle de fichier SVG et notez styles, currentColor, masques, filtres, dégradés et images.
- Convertissez les classes nécessaires en attributs fill et stroke directs.
- Préservez la transparence voulue. Ne remplacez pas toutes les couleurs si le dessin doit rester multicolore.
- Utilisez des identifiants uniques pour les dégradés et masques lorsque plusieurs SVG partagent une page.
- Testez sur fond blanc, sombre et quadrillé, puis dans l’application finale.
Cas particuliers
Pour une icône web intégrée, currentColor est utile car le CSS la recolore. Chargé comme image ou envoyé dans un service, le même SVG peut perdre ce contexte. Une livraison de production devrait utiliser des couleurs explicites lorsqu’un rendu prévisible est prioritaire.
Certaines applications de découpe ne gèrent qu’un sous-ensemble simple de SVG. Les remplissages plats et les tracés voyagent mieux que le CSS lié, les filtres ou les masques complexes. Simplifier la compatibilité ne signifie pas pixelliser.
Questions fréquentes
Pourquoi le SVG est-il noir dans Cricut ou Canva mais coloré dans le navigateur ?
Le navigateur applique peut-être des styles que l’importateur ignore. Transformez les styles essentiels en attributs directs.
Peut-on retrouver automatiquement les couleurs originales ?
Seulement si elles existent encore dans le fichier ou si la palette approuvée est connue. Une information perdue ne peut pas être devinée avec certitude.
Un SVG noir est-il toujours défectueux ?
Non. De nombreuses icônes sont volontairement monochromes et utilisent currentColor pour laisser l’application choisir leur couleur.