Guillaume Duverger - Développement & Graphisme - Blog

Introduction

Avez-vous déjà tenté de changer la couleur d'un élément SVG (via l'attribut de remplissage fill) qui se trouve dans un arrière-plan CSS (via la propriété background-image) ?

div{

background-image:url(image.svg)

}

Si vous n'avez pas réussi... c'est normal ! Vous avez certainement essayé, en vain, quelques tours de passe-passe. En effet, il est possible de changer la couleur en CSS avec la propriété fill sur un SVG en ligne, mais lorsqu'il s'agit d'un arrière-plan, c'est (pour l'instant) impossible car en tant qu'image de fond, le SVG ne fait pas partie du DOM.

Ci-desous un exemple avec un arrière-plan et un SVG inline :

Cela fonctionne très bien sur le SVG en ligne mais pas sur l'arrière-plan. Le constat est posé, reste les solutions.

Méthode avec les masques CSS

Si vous ne connaissez pas encore les masques en CSS, je vous invite à vous renseigner sur ce blog en lisant cet article.

div {

    background-color: red;
    -webkit-mask-image: url(image.svg);
    mask-image: url(image.svg);
}	

L'astuce est très simple. On applique un masque sur l'image qui laisse apparaître la couleur de l'arrière-plan. Hormis le manque de compatibilité, il s'agit de la méthode la plus efficace à mettre en place.

Méthode avec les filtres CSS

Cette méthode convient également pour changer la couleur d'un arrière-plan SVG, mais il faut prendre conscience que le rendu des filtres CSS sera plus ou moins bon selon les navigateurs. De plus, il faut avouer que c'est assez compliqué de trouver la combinaison adéquate de filtres pour arriver à la couleur souhaitée.

Ci-dessous, un exemple avec les fonctions hue-rotate() qui permet appliquer une rotation de teinte et saturate()

div {

 background-image:url(image.svg);
 filter: hue-rotate(70deg) saturate(2);
}	

Méthode avec URI de données

Une URI est une chaîne de caractères qui fait référence à une ressource (comme par exemple une URL). Ainsi, va t-on pouvoir utiliser des URI de données pour SVG.

Ce qui donne ceci :

div {
  background-image: url('data:image/svg+xml;utf8,<svg> ... </svg>');
}

On informe le type d'image dont il s'agit ainsi que l'encodage à utiliser puis le SVG tel quel. On peut également le faire avec la balise img mais ce n'est pas le but ici.

Quelques conseils à prendre en compte en utilisant du SVG comme URI de données.

Cette méthode n'est pas très intuitive et, il faut l'avouer, assez casse-pieds à mettre en place. De plus, si vous souhaitez accumuler les images, il faudra passer par un sprite comme dans cet exemple.

div{

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 53.867 53.867'%3E%3Cpath fill='%23ff0000' d='M26.934 1.318l8.322 16.864 18.611 2.705L40.4 34.013l3.179 18.536-16.645-8.751-16.646 8.751 3.179-18.536L0 20.887l18.611-2.705z'%3E%3C/path%3E%3C/svg%3E");
	
	}