Comment puis-je personnaliser les couleurs et les styles d un SVG
Tu utilises des icônes SVG sur ton site ou dans tes projets graphiques ? Tu aimerais pouvoir adapter leurs couleurs, leurs styles ou même les rendre interactifs ?
Le format SVG est une vraie pépite pour créer des éléments graphiques légers et ultra-flexibles sur le web. Tu peux les adapter à volonté, et bonne nouvelle : il existe plusieurs façons de personnaliser leurs couleurs et styles.
Cet article va t’expliquer, étape par étape, comment personnaliser un SVG pour qu’il colle parfaitement à ton identité visuelle ou à celle de tes clients.
Pourquoi personnaliser un SVG ?
Le SVG est aujourd’hui le format incontournable pour les icônes et illustrations web : il est léger, redimensionnable à l’infini sans perte de qualité, et surtout, il se personnalise très facilement. Modifier les couleurs ou les styles d’un SVG te permet de :
- Respecter la charte graphique d’un projet
- Adapter une icône à un thème sombre ou clair
- Créer des effets d’interaction (hover, clic)
- Optimiser l’accessibilité
1 Modification directe des attributs SVG : fill, stroke et opacité
La méthode la plus simple et immédiate, c’est de modifier les attributs dans le code SVG lui-même. Pour changer la couleur d’un SVG, deux attributs sont essentiels : fill et stroke.
fill: définit la couleur de remplissage d’une formestroke: définit la couleur du contourstroke-width: définit l’épaisseur du contour
Par exemple :
<svg width="100" height="100" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" fill="tomato" stroke="black" stroke-width="2"></circle>
</svg>Tu peux aussi jouer sur l’opacité :
<svg width="100" height="100" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" fill="#ff6600" stroke="#333" stroke-width="4" fill-opacity="0.7"></circle>
</svg>2 Personnalisation via le CSS
Encore mieux : tu peux insérer ton SVG directement dans le HTML et le cibler via une classe ou un ID en CSS.
Exemple :
<svg width="100" height="100" viewBox="0 0 100 100">
<circle class="svg-demo-circle" cx="50" cy="50" r="40" fill="#ff6600" stroke="#333" stroke-width="4"></circle>
</svg>Et le CSS correspondant :
.svg-demo-circle {
fill: #ff6600;
stroke: #333;
stroke-width: 4;
transition: fill 0.3s;
}
.svg-demo-circle:hover {
fill: #33cc99;
}3 Utiliser des variables CSS
Si tu veux rendre ton SVG encore plus flexible et dynamique, tu peux utiliser des variables CSS :
:root {
--main-fill: #ff6600;
--main-stroke: #333;
}
.svg-demo-circle {
fill: var(--main-fill);
stroke: var(--main-stroke);
}4 Utiliser les propriétés currentColor
Autre astuce pratique : en attribuant la valeur currentColor à fill et stroke, ton SVG héritera de la couleur du texte parent.
<div style="color: #e63946;">
<svg class="icone" width="50" height="50" viewBox="0 0 50 50">
<circle cx="25" cy="25" r="20" fill="currentColor"></circle>
</svg>
</div>5 Animation CSS sur SVG
Eh oui, tu peux aussi animer tes SVG avec du CSS ! Exemple d’un cercle qui pulse :
.pulse-circle {
fill: #ff6600;
stroke: #333;
stroke-width: 4;
transition: fill 0.3s;
animation: pulse 1.5s infinite;
}
.pulse-circle:hover {
fill: #33cc99;
}
@keyframes pulse {
0% { fill: #ff6600; }
50% { fill: #33cc99; }
100% { fill: #ff6600; }
}Conclusion
Avec ces différentes techniques, tu as toutes les clés en main pour personnaliser et animer tes SVG comme un pro. Que ce soit via les attributs directement, avec du CSS ou en exploitant les variables et animations, le SVG est un formidable terrain de jeu pour tes projets créatifs ✨
Alors, prêt à tester ça sur ton prochain projet ?
🎨 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.