Comment changer les couleurs SVG ?

Scalable Vector Graphics (SVG) est devenu très populaire en tant que format capable de produire des graphiques vectoriels de haute qualité qui peuvent être redimensionnés à n'importe quelle taille sans perte. Un avantage supplémentaire de l'utilisation de SVG est la possibilité de modifier la couleur des graphiques en fonction de préférences spécifiques. Si vous souhaitez coordonner le ton de votre site Web ou affiner la palette de couleurs pour un objectif spécifique, il est facile de modifier les couleurs d'un SVG à l'aide de CSS. Cet article vous guide pas à pas dans la modification des couleurs d'un SVG, depuis l'identification d'éléments spécifiques jusqu'à l'ajustement des couleurs elles-mêmes. Que vous soyez un web designer, un développeur ou un apprenant curieux désireux de personnaliser ses graphiques SVG, cet article promet de vous fournir toutes les connaissances nécessaires pour démarrer votre voyage.

Utilisez CSS pour positionner les éléments SVG

CSS signifie Cascading Style Sheets et est un outil influent pour styliser le HTML et peut également être utilisé pour modifier le style des graphiques SVG. Pour modifier la couleur d'un SVG, vous pouvez utiliser des sélecteurs CSS pour cibler l'élément exact qui doit être modifié. Par exemple, si vous souhaitez changer la couleur de remplissage de tous les chemins dans un SVG, vous pouvez adopter la règle CSS suivante -

svg path {
   fill: red;
}

Cela changera la couleur de remplissage de tous les chemins du SVG en rouge. Vous pouvez également utiliser CSS pour cibler des éléments spécifiques dans SVG par ID ou classe.

Modifier la couleur SVG

Il est possible de modifier la teinte d'un élément SVG en n'importe quelle teinte CSS officiellement autorisée, qu'il s'agisse d'une balise personnalisée pour la teinte, le système hexadécimal, RVB, RGBA, HSL, HSLA ou d'autres normes de couleurs autorisées. Par exemple, vous pouvez modifier la couleur d'un chemin en une teinte traditionnelle (telle que « verdoyant ») ou un code hexadécimal (tel que « #ff0000 »). Vous pouvez également spécifier la teinte exacte via une valeur RVB ou HSL, telle que "rgb(255, 0, 0)" ou "hsl(0, 100%, 50%)". En plus d'ajuster la teinte de remplissage d'un élément SVG, vous pouvez également modifier la teinte du trait à l'aide de la propriété Stroke au lieu de la propriété Fill.

Remplacer les couleurs SVG

Veuillez noter que certains fichiers SVG peuvent contenir des styles en ligne ou des couleurs codées en dur, qui peuvent remplacer les règles CSS que vous définissez. Dans ce cas, le fichier SVG devra peut-être être modifié pour éliminer ces styles ou couleurs. Vous pouvez le faire en ouvrant le fichier SVG avec un éditeur de texte et en recherchant la valeur de couleur que vous souhaitez modifier. Une fois que vous avez trouvé des styles ou des couleurs pertinents, vous pouvez les supprimer ou les ajuster à votre guise. Cependant, vous devez faire attention à éviter de supprimer tout code ou balise important qui pourrait affecter la fonctionnalité du SVG.

Méthode

Voici les directives que vous pouvez suivre pour changer la teinte de votre SVG -

Il est crucial d'identifier l'élément SVG spécifique dont vous souhaitez changer la couleur. Cela peut être accompli en utilisant les outils de développement de votre navigateur Web pour inspecter l'élément SVG.

Faites une déclaration CSS conçue pour modifier la teinte d'un élément SVG spécifique ou de plusieurs éléments. Vous pouvez utiliser des sélecteurs d'éléments tels que "svg", "path" ou "rect" pour vous concentrer sur des éléments spécifiques, ou utiliser des sélecteurs de classe ou des sélecteurs d'ID pour cibler des éléments spécifiques de manière plus granulaire.

Dans la déclaration CSS, attribuez votre couleur préférée à la propriété fill pour changer la couleur de remplissage du SVG. Vous pouvez représenter les couleurs à l'aide de noms de couleurs, de codes hexadécimaux ou de valeurs RVB.

Vous avez également la possibilité de spécifier les propriétés du trait pour changer la couleur du trait SVG, ou d'utiliser d'autres propriétés CSS pour façonner le SVG.

Si vous utilisez un fichier CSS externe, utilisez l'élément link dans la section d'en-tête du document HTML pour créer un lien vers celui-ci.

Enregistrez vos modifications et actualisez la page pour voir les couleurs SVG mises à jour.

Exemple 1

L'exemple ci-dessous montrera comment changer la couleur d'un graphique SVG à l'aide de CSS

<!DOCTYPE html>
<html>
<head>
   <title>How to change SVG color?</title>
   <style>
      #my-svg path {
         fill: green;
      }
   </style>
</head>
<body>
   <h4>How to change SVG color?</h4>
   <div>
      <p>Before Color Change</p>
      <svg width="100" height="100">
         <path fill="#000000" d="M10 10 H 90 V 90 H 10 L 10 10"></path>
      </svg>
   </div>
   <br>
   <div>
      <p>After Color Change</p>
      <svg id="my-svg" width="100" height="100">
         <path fill="#000000" d="M10 10 H 90 V 90 H 10 L 10 10"></path>
      </svg>
   </div>
</body>
</html>

Exemple 2

L'exemple suivant montre le processus de modification dynamique de la couleur d'un graphique SVG à l'aide de JavaScript et CSS.

<!DOCTYPE html>
<html>
<head>
   <title>How to change SVG color?</title>
   <style>
      svg {
         width: 100px;
         height: 100px;
      }
   </style>
</head>
<body>
   <h4>How to change SVG color?</h4>
   <div>
      <p>Before Color Change</p>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
         <path fill="none" d="M0 0h24v24H0z" />
         <path
         d="M6.1 3.3L4.7 4.7l6.2 6.2L2 17.6l1.4 1.4 4.6-4.6 6.2 6.2 1.4-1.4-6.2-6.2 6.2-6.2-1.4-1.4-4.6 4.6-2.5-2.5zM12 18c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6z" />
      </svg>
   </div>
   <br>
   <div>
      <p>After Color Change</p>
      <svg id="my-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
         <path fill="none" d="M0 0h24v24H0z" />
         <path
         d="M6.1 3.3L4.7 4.7l6.2 6.2L2 17.6l1.4 1.4 4.6-4.6 6.2 6.2 1.4-1.4-6.2-6.2 6.2-6.2-1.4-1.4-4.6 4.6-2.5-2.5zM12 18c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6z" />
      </svg>
   </div>
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script>
      $(document).ready(function () {
         $('#my-svg path').css('fill', 'red');
      });
   </script>
</body>
</html>

Conclusion

Pour résumer, changer la teinte d'une image SVG est un moyen simple mais efficace de personnaliser vos graphiques en fonction de vos besoins spécifiques. En utilisant CSS, vous pouvez facilement modifier la teinte d'éléments spécifiques en SVG ou de l'image entière. En suivant les directives présentées dans cet article, vous devriez maintenant comprendre parfaitement comment modifier les tons des images SVG et pouvoir appliquer ces connaissances pour créer des conceptions plus esthétiques pour vos pages ou projets Web. Gardez à l’esprit que les images SVG présentent plusieurs avantages par rapport aux autres formats d’image, notamment la possibilité de réglage et la flexibilité. Leur intégration dans vos conceptions peut donc améliorer considérablement vos capacités de développement Web. Nous espérons que cet article vous a inspiré et que vous pourrez désormais expérimenter avec vos propres palettes SVG.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!