Changer les couleurs d’un SVG et corriger les problèmes courants

Il existe trois véritables méthodes pour changer la couleur d’un SVG, toutes gratuites. Envoie-le dans un outil en ligne et clique sur la nuance à remplacer. Ouvre-le dans une application vectorielle comme Inkscape, sélectionne la forme et choisis un nouveau remplissage. Ou ouvre le fichier dans un éditeur de texte et remplace le code hexadécimal, puisque SVG est du texte. Recolorer un vecteur est aussi sans perte : tu réécris une instruction sans repeindre des pixels, donc rien ne devient flou ou ne se dégrade.

Le choix dépend du contenu du fichier. Et lorsqu’un SVG refuse de changer de couleur, ce contenu est presque toujours la raison plutôt que l’outil. Ce guide présente les trois méthodes, puis le diagnostic : six causes courantes d’une recoloration qui échoue, dont une qu’aucun outil de couleur ne peut corriger.

Où un SVG conserve ses couleurs

Un fichier SVG est une liste de formes écrite en texte. Chaque forme peut avoir un fill pour l’intérieur et un stroke pour le contour, comme l’explique le guide SVG des remplissages et contours de MDN. Il n’existe pas une seule « couleur d’image » remplaçable à un endroit. Un dessin monochrome à l’écran peut être un tracé bien organisé ou quarante tracés distincts ayant le même remplissage.

Tout se joue là. Chaque méthode ci-dessous trouve les formes et réécrit leur fill ou stroke d’une façon différente. Cela explique aussi les variations entre fichiers : des formes moins nombreuses et plus propres facilitent la recoloration.

Choisis ta méthode

Méthode 1 : un outil de recoloration SVG en ligne

1. Ouvre un outil gratuit dans le navigateur et envoie le fichier ; les bons acceptent aussi du code SVG collé.
2. L’outil liste les couleurs trouvées. Les plus utiles regroupent les remplissages identiques : « le bleu » est une nuance même s’il couvre des dizaines de formes.
3. Clique sur une nuance, choisis son remplacement et observe l’aperçu.
4. Télécharge le résultat et ouvre-le une fois dans un onglet pour confirmer.

Cette méthode convient à la plupart des personnes la plupart du temps. Vérifie deux points avant de confier un vrai travail à l’outil : la présence des couleurs de contour et le traitement des dégradés. S’il affiche moins de couleurs que l’écran, une partie du fichier est un dégradé ou une image intégrée qu’un simple remplacement de nuance n’atteindra pas.

Méthode 2 : une application de dessin vectoriel

Inkscape est gratuit et répond à tous les besoins de cette tâche ; Illustrator et Figma fonctionnent de la même manière.

1. Ouvre le SVG et clique sur la partie à changer. Si tout se sélectionne en bloc, c’est regroupé : double-clique pour entrer dans le groupe ou dégroupe.
2. Change le remplissage dans Fill & Stroke (Inkscape) ou la nuance de remplissage (Illustrator, Figma).
3. Si une couleur visible couvre plusieurs formes, ne les clique pas une à une. Fais un clic droit sur une forme et utilise Select Same → Fill Color dans Inkscape, ou le Select → Same → Fill Color documenté d’Illustrator. Toutes les formes partageant ce remplissage sont sélectionnées et un changement les recolore ensemble.
4. Exporte ou enregistre en SVG simple.

Une application de dessin permet aussi d’aller au-delà de la couleur, comme déplacer les formes ou retravailler les courbes. Pour ces outils plus larges, consulte modifier un SVG.

Méthode 3 : un éditeur de texte

Puisque SVG est du texte, tout éditeur convient : Notepad, TextEdit ou VS Code.

1. Ouvre le .svg et cherche fill=.
2. Change la valeur, par exemple fill="#1e3a5f" en fill="#c2410c", puis enregistre.
3. Actualise le fichier dans un onglet pour vérifier.

Trois précisions. Les couleurs peuvent être des noms (fill="black") ou des codes hexadécimaux. Les contours utilisent stroke=, pas fill=. Et de nombreux exports ne placent pas la couleur sur la forme : ils utilisent des classes avec le code dans un bloc <style> près du début (.st0{fill:#1e3a5f;}). Modifie le code dans ce bloc et toutes les formes de cette classe suivent.

Cette méthode convient aux icônes monochromes, où un seul remplacement suffit, et au traitement d’un dossier entier. Pour une illustration à quarante couleurs, elle est lente.

Si ton SVG se trouve sur un site

Peut-on changer la couleur d’un SVG avec CSS ? La méthode directe est un balisage SVG intégré directement dans le HTML. fill fonctionne alors comme propriété CSS et currentColor permet à l’icône d’hériter de la couleur du texte environnant. Un SVG externe chargé comme <img> est traité comme image ; MDN indique que JavaScript ne peut pas manipuler sa structure dans ce cas, et les styles de la page ne sélectionnent pas directement ses tracés internes.

Si tu ne peux pas intégrer le fichier directement au HTML, utilise les méthodes précédentes : change la couleur dans le SVG puis recharge-le. Pour choisir le mode de livraison, compare SVG intégré au HTML et image externe avec le même dessin et un test CSS.

Pour une silhouette d’interface monochrome, les masques SVG CSS et formes transparentes d’icônes offrent une autre méthode : colore l’élément icône avec CSS en laissant les couleurs des tracés sources intactes.

Pour un effet réversible, compare feColorMatrix aux changements directs de remplissage. Un filtre change les couleurs rendues en conservant les peintures sources, ce qui compte pour livrer un dessin modifiable.

Pourquoi ton SVG ne change pas de couleur

C’est la partie oubliée des tutoriels et celle où échouent la plupart des recolorations. Parcours ce tableau.

Deux cas méritent un examen plus précis.

La surprise de la boîte de fond

Certains SVG portent un rectangle de fond pleine taille invisible sur une page blanche. Recolorer « tout » le fait apparaître comme bloc coloré derrière le dessin ; certaines applications le sélectionnent aussi au clic. C’est une forme normale : sélectionne-la et supprime-la ou donne-lui la couleur souhaitée. Si elle apparaît blanche dans d’autres logiciels, c’est un problème voisin expliqué dans le guide pour conserver un fond transparent.

Le SVG qui n’est pas un vecteur

Le cas récalcitrant : aucune forme sélectionnable, aucun changement de remplissage utile et des bords pixellisés au zoom. Dans un éditeur de texte, tu trouves une seule balise <image> avec un mur de base64 plutôt que des éléments <path>. C’est une image matricielle dans une enveloppe .svg. Les convertisseurs ne vectorisant pas réellement produisent ces fichiers et aucun outil de couleur ne peut aider, faute de formes à repeindre. Les filtres de « colorisation » teintent simplement les pixels, généralement mal. Les deux fichiers semblent identiques à l’écran, mais le code montre la différence :

<!-- A real vector: a shape with a fill you can change -->
<path fill="#1e3a5f" d="M12 2 L22 20 H2 Z" />
 
<!-- A raster in an .svg shell: one sealed picture, no shapes -->
<image href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg..." />

Retourne à l’image elle-même, idéalement le PNG ou JPG original, et convertis-la en vrai vecteur avec de vrais tracés. Le guide des SVG encore pixellisés explique leur origine et comment les repérer avant de s’y fier. Dès que les vraies formes existent, chaque méthode de ce guide fonctionne.

Recolorer un fichier de découpe : chaque couleur est un calque

Cricut ou Silhouette traite chaque couleur SVG comme un calque : chacun signifie un passage, une feuille de matériau et davantage d’échenillage. Recolorer est donc une planification des calques : donner le même remplissage à deux éléments les rassemble pour une découpe, et séparer une couleur crée un nouveau calque.

Cela rend particulièrement utile la fusion de couleurs presque identiques. Un dessin vectorisé porte souvent trois bleus similaires ajoutant des calques sans différence visible. Réunis-les et le fichier se découpe plus vite et s’échenille plus facilement. La procédure de réduction de palette SVG montre comment fusionner selon le rôle visuel sans effacer contraste ou sens des opérations. Pour construire volontairement plusieurs calques, le guide SVG en calques couvre toute la procédure, et la page SVG Cricut la préparation complète pour les découpeuses.

Si tu veux des téléchargements séparés après recoloration, enregistre chaque couleur exacte comme SVG aligné.

Comment cela fonctionne avec PerfectVector

Une limite claire d’abord : PerfectVector ne modifie pas les SVG existants. Il convertit des images PNG, JPG et WebP en SVG. Toutefois, beaucoup de difficultés de recoloration proviennent de la conversion : le fichier récalcitrant est souvent une vectorisation désordonnée ou pas un vrai vecteur.

Si le SVG vient d’une image ou si tu as encore l’original, la recoloration la plus propre se fait à la source. Convertis l’image en SVG conçu pour être modifié : tracés propres, peu de nœuds et chaque couleur comme forme distincte. Utilise ensuite l’éditeur de couleurs intégré avant le téléchargement pour remplacer ou fusionner les couleurs, par couleur plutôt qu’en cherchant les tracés. Tu obtiens la palette voulue et un fichier plus simple en une fois ; les premières conversions sont gratuites, sans carte bancaire.

Ce qu’une recoloration ne peut pas faire

• Un dégradé n’est pas une nuance. C’est une progression entre arrêts de couleur. Tu peux modifier ces arrêts, mais un simple remplacement peut changer seulement une partie de la progression, expliquant un aspect étrange après un remplacement naïf.
• Les couleurs d’écran ne sont pas celles d’impression. SVG stocke des instructions orientées écran, tandis qu’un travail d’impression peut nécessiter une couleur de marque, un ton direct ou une composition de noir exacte. Si un export change l’apparence, diagnostique le changement de couleurs SVG avant de remplacer la palette ; le format demandé par l’imprimeur reste la référence de couleur.
• Recolorer ne nettoie pas la géométrie. De nouveaux remplissages ne fusionnent pas les lamelles, ne ferment pas les espaces et ne réduisent pas les nœuds. Une vectorisation désordonnée avec de nouvelles couleurs reste désordonnée.

Avant d’enregistrer

• Ouvre à nouveau le fichier recoloré dans un onglet et compare à l’original.
• Vérifie les contours : ont-ils changé avec les remplissages lorsque nécessaire ?
• Cherche un rectangle de fond parasite recoloré accidentellement.
• Pour la découpe, compte les calques après fusion ; moins est presque toujours préférable.
• Garde une copie intacte de l’original.

FAQ

Comment changer la couleur d’un SVG sans Illustrator ou Photoshop ? Utilise un outil gratuit en ligne — envoi, clic sur une nuance, téléchargement — ou Inkscape, éditeur vectoriel gratuit. Pour une icône monochrome, ouvrir le fichier dans un éditeur de texte et changer le code après fill= fonctionne aussi. Aucune méthode n’est payante.

Pourquoi mon SVG reste-t-il noir quoi que je fasse ? Sur un site, CSS ne peut pas restyler un SVG chargé avec img ; intègre-le directement au HTML ou modifie le fichier. Dans un éditeur, cherche un groupe bloquant la sélection, un contour portant la couleur ou des couleurs dans un bloc style. Si rien ne se sélectionne et que le zoom montre des pixels, le fichier est matriciel dans un .svg sans formes à recolorer.

Peut-on recolorer un SVG dans Canva ? L’éditeur SVG dédié de Canva indique qu’on peut envoyer, recolorer et télécharger gratuitement sans filigrane. Les fonctionnalités SVG complexes peuvent être rendues différemment selon l’éditeur : examine le téléchargement avant de remplacer l’original.

Un SVG peut-il utiliser plusieurs couleurs ? Oui. Chaque forme porte son remplissage et contour : il peut donc contenir autant de couleurs que de formes, plus les dégradés. Recolorer un dessin multicolore signifie changer plusieurs remplissages plutôt qu’un réglage global.

Comment changer les couleurs SVG pour un projet Cricut ? Tu peux recolorer dans Design Space, mais par calque plutôt que par forme. Pour restructurer les parties partageant une couleur et se découpant ensemble, modifie le SVG avant l’envoi : fusionne les couleurs voulues sur un calque et donne un remplissage distinct aux parties à découper séparément.

Changer la couleur d’un SVG réduit-il la qualité ? Non. La couleur est une instruction textuelle : la changer réécrit cette instruction sans toucher à la géométrie. Contrairement à un PNG, tu peux recolorer un SVG autant de fois que souhaité sans perte de qualité.

Sources

1. MDN : remplissages et contours SVG — fill, stroke, opacité et propriétés de peinture associées.
2. MDN : ajouter des graphismes vectoriels au web — Comparaison du SVG intégré au HTML et du chargement avec <img>.
3. Adobe Illustrator : sélectionner les objets ayant les mêmes remplissages et contours — Sélection selon les attributs de peinture partagés.
4. W3C : contenu intégré SVG 2 — Contenu matriciel <image> dans les documents SVG.
5. Canva : éditeur SVG — Référence actuelle des affirmations d’envoi, recoloration et téléchargement.

Recolorer un SVG est rapide lorsque le fichier convient : choisis la méthode adaptée et diagnostique avant de lutter avec les outils. Si le fichier est le problème, convertis l’image originale en SVG propre modifiable et choisis tes couleurs tant que c’est facile.