Appliquer des styles CSS à SVG : le guide complet

Les images SVG (Scalable Vector Graphics) offrent de nombreux avantages : légèreté, agrandissement infini et possibilité de manipulation via CSS. Cependant, leur stylisation peut s'avérer complexe selon la méthode d'intégration choisie. Ce guide vous explique comment appliquer efficacement des styles CSS sur vos SVG selon différents scénarios.

Comprendre le contexte des SVG

Les SVG fonctionnent dans leur propre espace de nommage XML. Cette particularité explique pourquoi les interactions entre le CSS de votre page et les éléments SVG ne sont pas toujours évidentes. Deux mondes coexistent :

• Le document HTML principal avec son CSS
• Le document SVG avec son propre contexte de style

Les méthodes d'intégration des SVG

La façon dont vous intégrez un SVG détermine comment vous pourrez le styliser :

1. SVG inline : intégré directement dans le HTML (entièrement manipulable via CSS)
2. SVG externe : référencé via une balise , background-image ou autres méthodes (limité en terme de stylisation),
3. SVG via l'élément  : approche hybride permettant réutilisation et stylisation.

1. Styliser des SVG inline

Les SVG inline (insérés directement dans le HTML) sont les plus flexibles en termes de stylisation, car ils font partie intégrante du DOM.

Exemple de base

.circle {
  fill: pink; /* Change la couleur de remplissage */
  stroke: black; /* Ajoute un contour */
  stroke-width: 2px; /* Définit l'épaisseur du contour */
  transition: fill 0.3s; /* Ajoute une transition */

  &:hover {
    fill: hotpink; /* Change la couleur au survol */
  }
}

currentColor fait généralement le job

La valeur currentColor fait office de "variable" en CSS puisqu'elle adopte automatiquement la couleur de texte environnante. En clair, elle copie la valeur de color du parent, même si celle-ci change. Idéalement, elle peut être appliquée aux attributs SVG fill et strokepar exemple :

.circle {
  color: pink; /* Définit la couleur du cercle */

  &:hover {
    color: hotpink; /* Change la couleur au survol */
  }
}

Bonnes pratiques pour les SVG inline

• Utilisez currentColor pour que les éléments SVG héritent automatiquement de la couleur du texte parent (utilisez fill="currentColor" et/ou stroke="currentColor" pour les icônes qui doivent s'adapter à la couleur du texte),
• Nettoyez vos SVG des attributs de style superflus (voir outils en fin d'article),
• Ajoutez des classes pertinentes aux éléments que vous souhaitez cibler.

2. Styliser des SVG externes

Les fichiers SVG externes (balise ou background-image) sont naturellement plus capricieux à styliser du fait de leur principe de compartimentage : rien n'entre ni ne sort d'un SVG, ou presque.

Cas 1 : SVG externe modifiable

Si vous avez accès au fichier SVG, vous pouvez y incorporer des styles directement via l'élément

Limitations importantes :

• Les valeurs doivent être stipulées en dur (pas de currentColor, ni de var(--ma-couleur))
• Les interactions comme :hover fonctionnent uniquement dans certains contextes (SVG dans