Couleur d'arrière-plan SVG – l'ajouter ou la changer

Pourquoi définir une couleur d’arrière-plan SVG

SVG est un langage XML pour les graphiques vectoriels 2D et les contenus mixtes vectoriels-raster. Il est indépendant de la résolution, facile à modifier et adapté aux logos, icônes, graphiques simples et animations. Une couleur d’arrière-plan améliore la lisibilité, garantit une cohérence visuelle et aide l’accessibilité lorsque le SVG est placé sur des fonds de page variables. Pour le standard, consultez la spécification W3C SVG.

Réponse rapide : SVG n’a pas de propriété native background-color pour le canvas de dessin. La méthode la plus fiable consiste à placer un <rect> comme premier enfant de <svg>, à définir width="100%" et height="100%", puis à appliquer la couleur avec fill.

1<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
2  <rect width="100%" height="100%" fill="aliceblue" />
3  <circle cx="100" cy="100" r="70" fill="teal" />
4</svg>

Cette guide explique ce qu’est un fond SVG, pourquoi background-color sur <svg> peut être trompeur, et comment définir un fond avec un rectangle, du CSS en ligne, du CSS interne ou JavaScript.

Qu’est-ce qu’un arrière-plan SVG ?

Un arrière-plan SVG est une couche visuelle située derrière les autres éléments. Contrairement à HTML, le contenu SVG n’a pas de couche de fond propre. On ajoute donc généralement un <rect> qui couvre tout le canvas SVG et qui se place comme premier enfant pour être rendu derrière le reste.

Méthode	Description	Cas d’usage
`fill="..."`	Attribut de présentation SVG	Fond simple, lisible et statique
`style="fill:..."`	Déclaration CSS en ligne	SVG qui stocke déjà ses styles dans `style`

Si fill et style="fill:..." existent sur le même élément, le style en ligne l’emporte généralement dans la cascade CSS.

Comment ajouter une couleur d'arrière-plan SVG

Ajoutez un <rect> comme premier enfant de <svg>.
Définissez width="100%" et height="100%", ou utilisez les dimensions du viewBox.
Définissez la couleur avec fill, par exemple fill="aliceblue" ou fill="#f0f0f0".
Placez le reste du dessin après le rectangle pour qu’il soit rendu au-dessus.
Utilisez CSS ou JavaScript seulement si le fond doit suivre un système de styles ou changer dynamiquement.

Changer la couleur d’arrière-plan SVG

Utiliser un rectangle comme fond SVG

Méthode recommandée : un <rect> en premier enfant est le modèle le plus fiable, car le fond devient une partie réelle du dessin SVG.

1<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
2  <!-- Background rectangle -->
3  <rect width="100%" height="100%" fill="aliceblue" />
4  <!-- Other SVG content -->
5  <circle cx="100" cy="100" r="70" fill="teal" stroke="salmon" stroke-width="10" />
6</svg>

La figure illustre ce fragment :

Cercle SVG sur un rectangle pleine taille utilisé comme fond SVG fiable

Pour des exemples C# qui ajoutent ou modifient des éléments de fond dans des SVG existants, consultez Changer la couleur d’arrière-plan SVG – exemples C#.

Pourquoi background-color ne fonctionne pas comme fond du contenu SVG

La spécification SVG ne définit pas background-color comme couche de peinture pour le contenu SVG. Sur l’élément <svg>, cette propriété peut colorer l’espace occupé par le SVG dans le navigateur, mais elle ne crée pas de fond dans le balisage SVG. Ce comportement peut disparaître ou changer lors d’une conversion, d’un export ou d’un rendu par un autre outil.

1<svg width="200" height="200" style="background-color: lightsteelblue" xmlns="http://www.w3.org/2000/svg">
2  <rect width="100%" height="100%" fill="aliceblue" />
3  <circle cx="100" cy="100" r="70" fill="teal" stroke="salmon" stroke-width="10" />
4</svg>

background-color sur l’élément svg comparé à un vrai fond rectangle

Recommandation : utilisez un <rect> interne pour un fond cohérent dans les navigateurs, les conversions et les outils de rendu.

CSS en ligne pour le fond SVG

1<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
2  <rect style="width: 100%; height: 100%; fill: aliceblue;" />
3  <circle cx="100" cy="100" r="70" fill="teal" stroke="salmon" stroke-width="10" />
4</svg>

Le CSS en ligne est portable et précis, mais devient répétitif si plusieurs éléments partagent le même style.

CSS interne pour le fond SVG

1<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
2  <style>.background { fill: aliceblue; }</style>
3  <rect width="100%" height="100%" class="background" />
4  <circle cx="100" cy="100" r="70" fill="teal" stroke="salmon" stroke-width="10" />
5</svg>

Le CSS interne centralise les styles et simplifie leur réutilisation.

JavaScript pour des fonds SVG dynamiques

JavaScript peut changer un fond SVG quand le contexte d’intégration autorise les scripts. Réservez-le aux graphiques interactifs; pour icônes et logos statiques, préférez un <rect> avec fill.

 1<svg id="mySvg" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
 2  <rect width="100%" height="100%" fill="aliceblue" />
 3  <circle cx="100" cy="100" r="50" fill="#f3622a" />
 4  <script type="text/javascript">
 5    document.getElementById("mySvg").addEventListener("click", function() {
 6      var rect = document.querySelector("#mySvg rect");
 7      rect.setAttribute("fill", rect.getAttribute("fill") === "aliceblue" ? "mistyrose" : "aliceblue");
 8    });
 9  </script>
10</svg>

Erreurs courantes et corrections

Problème	Cause	Correction
Le fond est transparent	Aucun `<rect>` n’a été ajouté	Insérez un `<rect>` couvrant `100%` en premier enfant
`background-color` fonctionne seulement dans un navigateur	La propriété colore le conteneur, pas le canvas SVG	Utilisez un fond `<rect>`
Les styles en ligne entrent en conflit	Plusieurs définitions de `fill`	Regroupez les styles avec CSS interne ou classes
JavaScript ne change pas la couleur	Mauvais sélecteur, `id` absent ou scripts désactivés	Vérifiez le sélecteur et le contexte d’exécution
Le fond ne suit pas le viewBox	Dimensions fixes en pixels	Utilisez `width="100%" height="100%"` ou les dimensions du `viewBox`

Recettes rapides

Fond solide avec <rect>

1<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
2  <rect width="100%" height="100%" fill="#f0f0f0"/>
3</svg>

Fond au survol avec CSS

1<svg class="hover-bg" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
2  <style>.hover-bg:hover rect { fill: #ffebcd; }</style>
3  <rect width="100%" height="100%" fill="aliceblue"/>
4  <circle cx="100" cy="100" r="70" fill="teal"/>
5</svg>

FAQ – couleur d'arrière-plan SVG

SVG peut-il avoir une propriété background-color ?

Pas comme un élément HTML. background-color peut colorer l’espace du navigateur autour du SVG, mais ne crée pas une couche de fond dans le dessin. Utilisez un <rect> en premier enfant.

Comment rendre le fond SVG transparent ?

N’ajoutez pas de rectangle de fond, ou supprimez l’élément existant. SVG est transparent par défaut.

Pourquoi background-color fonctionne dans le navigateur mais pas après export ?

Le navigateur peut peindre l’espace de l’élément <svg>, tandis que les moteurs d’export s’appuient sur le contenu SVG réel. Un <rect> fait partie du balisage et reste prévisible.

Faut-il utiliser fill ou style pour un rectangle de fond ?

Utilisez fill pour un fond statique simple. Utilisez style="fill:..." ou une classe CSS si le SVG centralise déjà ses styles.

Ressources associées

Qu’est-ce qu’un fichier SVG ? explique structure SVG, XML, scalabilité et usages.
Couleur SVG couvre fill, stroke, opacité, HEX, RGB et HSL.
Modifier des fichiers SVG montre comment ajouter des éléments SVG et mettre à jour leurs attributs en C#.
Changer la couleur d’arrière-plan SVG fournit des exemples C# avec Aspose.SVG for .NET.
Utilisez Color Mixer pour choisir ou prévisualiser une couleur de fond.

Couleur SVG Contenu SVG incorporé