6 techniques simples pour personnaliser la couleur de tes SVG avec CSS
Tu bosses sur un projet web et tu galères à changer la couleur de tes icônes SVG ? Bonne nouvelle : CSS peut faire des merveilles là-dessus ! Que tu sois graphiste, webdesigner ou développeur, comprendre comment styliser un SVG directement dans ton code te fera gagner un temps fou et te donnera bien plus de flexibilité qu’un simple fichier PNG.
Dans cet article, je te montre 6 techniques efficaces pour personnaliser la couleur de tes SVG avec CSS. Promis, c'est clair, rapide et avec des exemples à copier-coller.
Pourquoi styliser un SVG avec CSS ?
Avant de plonger dans le code, petit rappel : le SVG (Scalable Vector Graphics) est un format vectoriel qui a l’énorme avantage d’être léger, responsive et personnalisable à souhait via CSS et JavaScript.
Changer ses couleurs via CSS te permet :
- De personnaliser une icône selon le thème du site
- D'ajouter des effets interactifs (hover, focus…)
- De centraliser le style pour éviter de modifier chaque fichier SVG
À retenir : Pour que ça fonctionne, ton SVG doit être intégré dans le HTML directement ou via une balise <object> avec type="image/svg+xml". Avec une balise <img>, tu ne pourras pas le styliser via CSS.
Utiliser les propriétés fill et stroke
C'est la méthode de base pour colorer les éléments d'un SVG.
svg path {
fill: ##61a89d; /* Couleur de remplissage */
stroke: #2c3e50; /* Couleur du contour */
}fill colore l’intérieur de la forme, et stroke gère le contour.
Ajouter des classes CSS sur les éléments SVG
Si ton SVG est intégré en inline dans le HTML, tu peux ajouter des classes à ses éléments et les cibler facilement.
<svg>
<circle class="mon-cercle" cx="50" cy="50" r="40" />
</svg>Puis dans ton CSS :
.mon-cercle {
fill: #e74c3c;
stroke: #c0392b;
}Parfait pour gérer plusieurs éléments avec des styles différents dans un même SVG.
Utiliser des variables CSS
Pour rendre tes couleurs dynamiques et facilement modifiables, pense aux variables CSS.
:root {
--couleur-principale: #2ecc71;
--couleur-secondaire: #27ae60;
}
svg .element {
fill: var(--couleur-principale);
stroke: var(--couleur-secondaire);
}Hyper pratique pour gérer un thème clair/sombre ou plusieurs palettes sur ton site.
Créer des effets avec les pseudo-classes
Et pourquoi ne pas rendre ton SVG interactif avec un petit effet au survol ?
svg path:hover {
fill: #f39c12;
}Simple et efficace pour dynamiser une interface.
Utiliser les styles inline dans le SVG
Tu peux aussi appliquer les styles directement dans l’attribut style des éléments SVG.
<svg>
<rect style="fill: #9b59b6; stroke: #8e44ad;" width="100" height="100" />
</svg>Idéal pour des ajustements rapides ou des styles uniques.
Passer par les attributs de présentation
Enfin, tu peux définir fill et stroke directement dans les balises SVG.
<svg>
<circle cx="50" cy="50" r="40" fill="#3498db" stroke="#2c3e50" />
</svg>Solution rapide mais moins flexible si tu veux centraliser le style.
Conclusion
Tu l’auras compris, il existe plein de façons de personnaliser tes SVG avec CSS. Que tu sois adepte du fill et stroke, des classes ou des variables CSS, l’important c’est de choisir la méthode qui colle à ton projet.
Petit conseil : privilégie toujours l’intégration inline ou via <object> si tu veux tirer parti des CSS.
Et toi, quelle technique utilises-tu le plus souvent ? Viens partager ton retour d’expérience en commentaire ou sur les réseaux !
🎨 Pack d'icônes SVG dessinées à la main
Ajoute une touche unique et créative à ton site grâce à ma collection d'icônes vectorielles personnalisables.
✨ Découvre la collection
Commentaires
Aucun commentaire pour cet article.
Veuillez vous connecter pour laisser un commentaire.