Développeur / Couleurs SVG

Changeur de couleur SVG : recolorez et copiez un SVG

Examinez les couleurs explicites d’un SVG et leur nombre d’occurrences, modifiez les arrêts de dégradé et les règles CSS simples de couleur, puis téléchargez le SVG ou copiez son code.

Changeur de couleur SVG : recolorez et copiez un SVG: Repère les valeurs de couleur explicites dans les attributs fill, stroke, stop-color, color, flood-color et lighting-color, ainsi que dans les styles inline et les règles de style simples. Les couleurs nommées, les notations hexadécimales courtes, rgb() et hsl() sont normalisées. Les remplacements préservent les autres octets du fichier source lorsque le nettoyage ne nécessite aucune modification. Fonctionne 100 % localement dans votre navigateur, sans aucun téléversement de fichier vers le serveur.

Catégorie
Outils développeur
Exécutions
Dans votre navigateur
Coût
Gratuit · sans inscription
Disponibilité
Prêt à l'emploi
Modificateur de couleur SVGTraitement local

Fonctionne entièrement dans votre navigateur

Choisissez ou déposez un SVG

Peinture SVG

Les propriétés fill et stroke SVG ainsi que les arrêts de dégradé utilisent des valeurs de couleur et des références à des serveurs de peinture. Spécification : https://www.w3.org/TR/SVG2/painting.html

Syntaxe des couleurs

L’analyseur prend en charge les couleurs nommées, les valeurs hexadécimales, rgb(), hsl() et currentColor. La transparence est conservée lorsqu’elle est fournie. Les variables CSS et les espaces colorimétriques avancés ne sont pas pris en charge par l’analyseur de cet outil. Spécification : https://www.w3.org/TR/css-color-4/

Comment l'utiliser

  1. Déposez un SVG ou collez son balisage.
  2. Utilisez chaque sélecteur de couleur ou saisissez une couleur de remplacement ; vous pouvez aussi recolorer tous les tokens en une seule fois.
  3. Comparez l’original et le résultat, puis téléchargez ou copiez le SVG nettoyé.

Confidentialité et limitations

Le code SVG reste dans votre navigateur. Les aperçus sont des images isolées, et le contenu dangereux ainsi que les ressources externes sont supprimés.

Outils associés

Éditeur SVGNettoyeur SVGSVG vers JSX

Questions fréquentes

Que compte le compteur d’occurrences ?

Les valeurs de couleur explicites présentes dans le balisage, et non le nombre de pixels rendus ni le nombre d’éléments auxquels un style hérité est appliqué.

Les dégradés sont-ils pris en charge ?

Oui. Les couleurs des arrêts de dégradé peuvent être modifiées sans remplacer les identifiants ni les références des dégradés.

À quoi sert currentColor ?

Cette valeur utilise la valeur CSS color héritée lorsque le SVG est intégré inline. Un aperçu sous forme d’image utilise normalement le noir, sauf si le SVG définit lui-même une couleur.

Toutes les couleurs CSS sont-elles résolues ?

Non. Les variables CSS, les espaces colorimétriques avancés, les valeurs par défaut héritées et les résultats calculés des sélecteurs ne sont pas résolus. Les déclarations et sélecteurs simples sont pris en charge.

Outil gratuit · dans votre navigateur exécutions · aucun compte requis