Changer les couleurs d'un SVG

À propos du changement de couleurs dans un SVG

Un SVG, c'est du texte. Quelque part à l'intérieur, une forme dit fill="#1f2937", et c'est toute la raison pour laquelle l'icône est gris foncé. Changez ces sept caractères et l'icône devient ce que vous voulez.

L'ennui, c'est de les trouver. Un vrai export d'Illustrator ou de Figma ne range pas ses couleurs à un endroit évident — il les éparpille entre des attributs fill, des attributs style, un bloc <style> plein de règles de classe et les arrêts d'un dégradé. Ouvrez le fichier dans un éditeur de texte et vous cherchez, parmi mille lignes, les onze qui comptent.

Cet outil lit tout le fichier, rassemble chaque couleur employée et les liste dans un tableau. Changez la couleur à droite d'une ligne et toutes les formes qui l'utilisent changent avec elle, dans l'aperçu modifié, au fil de vos choix. Ce qui revient, c'est votre fichier avec de nouvelles valeurs de couleur — rien d'autre n'a bougé.

Deux façons de changer une couleur

• Par couleur — le tableau sous les images liste chaque couleur distincte du fichier : à gauche ce qu'elle est, à droite ce qu'elle devient. Chaque ligne démarre sur son propre original, donc rien ne change tant que vous ne le demandez pas. Changez-en une et toutes ses occurrences changent ensemble. C'est ce qu'il faut pour « mettre les parties bleues en vert » et pour recolorer une icône sur une palette de marque.
• Par forme — cliquez n'importe quelle forme de l'image et colorez-la seule, même si elle partage sa couleur avec vingt autres. Son remplissage et son contour reçoivent leurs propres valeurs, et rien d'autre ne bouge.

Les deux se complètent : réglez d'abord la palette, puis corrigez la forme qui devait être différente.

Tout en une seule couleur

De loin la tâche la plus fréquente. Une icône arrive en cinq gris et il vous la faut en blanc uni pour un en-tête sombre, en noir uni pour l'impression, ou dans une couleur de marque pour une série de boutons.

Choisissez une couleur, appuyez sur Appliquer, et chaque couleur du fichier devient celle-là. Les formes sans remplissage restent sans remplissage : les contours restent des contours et les trous restent des trous.

Où il cherche les couleurs

• fill et stroke écrits comme attributs
• Les mêmes propriétés à l'intérieur d'un attribut style
• les blocs <style> — des règles de classe comme .cls-1 { fill: #231f20; }, la façon dont Illustrator écrit quasiment tous ses exports
• stop-color dans les dégradés, pour recolorer un dégradé arrêt par arrêt
• flood-color et lighting-color sur les filtres

Les couleurs écrites de n'importe quelle manière autorisée par CSS sont comprises — #f00, #ff0000, rgb(255,0,0), rgba(255,0,0,.5) et les noms comme red ou darkslategray. La transparence est conservée : une forme à moitié transparente le reste dans sa nouvelle couleur.

Ce à quoi il ne touche pas

• Les dégradés et motifs en tant que tels. Les arrêts d'un dégradé peuvent être recolorés ; le dégradé lui-même n'est pas transformé en couleur unie, et une forme remplie avec url(#pattern) est laissée telle quelle.
• Les bitmaps intégrés. Un PNG collé dans un SVG est une photo, pas une forme, et il n'a pas de remplissage à changer. Utilisez plutôt Pipette de couleur ou un éditeur d'images.
• Tout ce qui n'est pas une couleur. Opacité, épaisseur de trait, transformations et texte ressortent tels qu'ils sont entrés.

Rien n'est envoyé

Le fichier est lu, recoloré et réécrit dans votre navigateur. Il n'atteint jamais un serveur, ce qui compte quand le fichier est un logo non publié, la marque d'un client ou un visuel sous accord de confidentialité.

Cela veut dire aussi : aucune attente d'envoi, aucune limite de taille, et l'outil continue de fonctionner hors ligne une fois la page chargée.

Une exception délibérée à « rien n'est modifié » : si le fichier contient un bloc <script>, il est retiré, et la page vous le dit. Une image n'a aucune raison de transporter du code exécutable, et cet outil doit dessiner le fichier pour vous le montrer.

À quoi cela sert

• Recolorer un jeu d'icônes sur une palette de marque sans ouvrir de logiciel de dessin
• Passer un logo en blanc uni pour un en-tête sombre, ou en noir uni pour l'impression
• Corriger la seule forme qui est sortie de la mauvaise couleur
• Produire des versions claire et sombre du même visuel
• Changer les arrêts d'un dégradé sans le reconstruire
• Essayer des couleurs rapidement, puisque l'image se met à jour au fil des choix

Bon à savoir

• Les deux aperçus sont le fichier avant et après, dessinés à la même échelle — et celui de droite est le document réel, donc ce que vous voyez est exactement ce qui se télécharge
• Une modification forme par forme est écrite comme un simple attribut fill ou stroke quand cela suffit, et comme un style en ligne seulement lorsqu'une règle <style> du fichier prendrait le dessus — l'outil vérifie ce qui s'est réellement passé plutôt que de le supposer
• Les couleurs sont regroupées par valeur : #FFF, #ffffff et white ne font qu'une ligne
• Chaque ligne a son propre retour en arrière, et Remettre toutes les couleurs rend au fichier l'état dans lequel il est arrivé
• Un fichier à plusieurs centaines de couleurs est presque toujours une photo vectorisée ; seules les plus utilisées sont listées
• Pour rogner le vide autour du résultat, utilisez Rogner un SVG
• Pour transformer le résultat en PNG, utilisez SVG en PNG

Comment l'utiliser

• Cliquez sur Cliquez pour envoyer, ou déposez votre SVG sur la zone
• Chaque couleur du fichier apparaît en ligne dans le tableau, l'original à gauche
• Réglez la couleur de droite — au sélecteur ou en tapant un hexadécimal — pour la changer partout où elle sert
• Ou cliquez une forme dans l'image modifiée pour ne colorer qu'elle
• Utilisez Tout en une seule couleur pour une version unie
• Appuyez sur Télécharger le SVG, ou sur Copier le code SVG pour le coller directement dans une page

Outils liés

• Rogner un SVG — supprimer le vide autour du résultat
• SVG en PNG — transformer le SVG recoloré en bitmap
• SVG en JPG — un SVG en image plate
• Image en SVG — vectoriser d'abord un logo
• Palette de couleurs d'une image — extraire une palette d'une photo
• Contraste des couleurs — vérifier que les couleurs choisies restent lisibles