recolorer un SVG
☞ tout se passe dans ton navigateur — rien n’est envoyéDépose ton SVG ici
ou clique pour parcourir — SVG uniquement
Aperçu
recolorer un SVG
Toutes les couleurs du fichier réunies dans une seule palette — modifie n'importe laquelle et vois le résultat aussitôt, ou confie le tout au CSS avec currentColor.
ou clique pour parcourir — SVG uniquement
Aperçu
une palette, toutes les couleurs
Une couleur peut se trouver sur un attribut fill ou stroke, dans un style en ligne, ou dans une feuille de style intégrée au fichier — et un export d'Illustrator ou de Figma choisit en général la dernière option. C'est pour cela que modifier un SVG à la main dans un éditeur de texte laisse si souvent passer quelques formes.
Cet outil lit les trois endroits, plus les arrêts de dégradé et les couleurs de filtre, et les rassemble dans une seule palette. Change un échantillon et chaque occurrence de cette couleur change avec lui, où qu'elle ait été écrite.
trois étapes
Choisis un fichier .svg — il reste sur ton appareil.
Chaque couleur du fichier en a un, avec sa fréquence d'utilisation.
Seules les couleurs changent ; les formes restent intactes.
réponses rapides
Il dit à la forme d'utiliser la couleur de texte de l'élément qui la contient. Une icône en currentColor devient blanche dans un bouton sombre et grise dans un texte atténué, sans second fichier ni la moindre règle CSS supplémentaire. C'est la façon standard dont les bibliothèques d'icônes livrent leurs SVG.
Un dégradé est une référence vers une définition ailleurs dans le fichier, pas une couleur : le remplacer supprimerait le dégradé au lieu de le recolorer. Les couleurs d'arrêt à l'intérieur du dégradé apparaissent bien dans la palette — modifie celles-là.
C'est que le fichier n'a pas de couleur propre. Cela veut dire en général que le dessin est déjà en currentColor ou qu'il hérite sa couleur d'une feuille de style extérieure au fichier. Ouvre-le dans la visionneuse SVG pour voir le source.
Les couleurs sont regroupées selon ce qu'elles valent réellement : #FFF, #ffffff et white forment une seule entrée. La modifier les met toutes à jour, chacune dans la forme où elle était écrite.
Non. Le fichier est analysé et réécrit dans ton navigateur.