Appliquer des styles CSS à SVG : le guide complet

Raphael - Alsacreations - 10/04

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 <img>, background-image ou autres méthodes (limité en terme de stylisation),
  3. SVG via l'élément <use> : 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

<svg width="100" height="100" viewBox="0 0 100 100"> <circle cx="50" cy="50" r="40" fill="tomato" class="circle" /> </svg> .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 aut...
[Courte citation de 8% de l'article original]