Retour aux articles

Gérer la couleur des illustrations SVG avec des variables CSS

16 février 2022

Pour mettre en place un design attirant et moderne sur un site internet, une bonne solution est d’utiliser des librairies d’illustration vectorielles (SVG). Certaines sont totalement gratuites. undraw est l’une des plus populaires. Nous allons voir comment intégrer une librairie d’illustrations SVG à un site web et comment définir et manipuler leurs design de manière centralisée avec CSS et Javascript.

Intégrer les illustrations SVG

Remarque : Il peut être utile de bien se documenter sur les fichiers SVG pour comprendre comment ils sont construits et ce qu’ils contiennent.

Pour inclure un fichier SVG sur une page, il y a plusieurs options : les balises <img/>, <iframe/>, <object/> ou intégrer directement le code XML du fichier dans le code HTML (inline SVG). Il n’y a qu’avec la dernière solution que l’on peut ensuite manipuler les éléments du SVG avec CSS et Javascript.

On intègre donc le contenu du SVG dans le code HTML : 

<div class="svg-container">
<svg width="123" height="123" viewBox="0 0 123 123" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="122.527" height="122.523" fill="black" fill-opacity="0"/>
<circle cx="61" cy="62" r="60" fill="white"/>
<rect width="122.527" height="122.523" fill="black" fill-opacity="0"/>
<rect width="122.527" height="122.523" fill="black" fill-opacity="0"/>
<rect width="122.527" height="122.523" fill="black" fill-opacity="0"/>
<path d="M8.70801 61.26C8.70801 82.062 20.797 100.039 38.327 108.558L13.258 39.872C10.342 46.408 8.70801 53.641 8.70801 61.26Z" fill="#464342"/>
<path d="M96.74 58.608C96.74 52.113 94.407 47.615 92.406 44.114C89.742 39.785 87.245 36.119 87.245 31.79C87.245 26.959 90.909 22.462 96.07 22.462C96.303 22.462 96.524 22.491 96.751 22.504C87.401 13.938 74.944 8.70801 61.262 8.70801C42.902 8.70801 26.749 18.128 17.352 32.396C18.585 32.433 19.747 32.459 20.734 32.459C26.231 32.459 34.74 31.792 34.74 31.792C37.573 31.625 37.907 35.786 35.077 36.121C35.077 36.121 32.23 36.456 29.062 36.622L48.2 93.547L59.701 59.054L51.513 36.62C48.683 36.454 46.002 36.119 46.002 36.119C43.17 35.953 43.502 31.623 46.334 31.79C46.334 31.79 55.013 32.457 60.177 32.457C65.673 32.457 74.183 31.79 74.183 31.79C77.018 31.623 77.351 35.784 74.52 36.119C74.52 36.119 71.667 36.454 68.505 36.62L87.497 93.114L92.739 75.597C95.011 68.328 96.74 63.107 96.74 58.608Z" fill="#464342"/>
<path d="M62.184 65.857L46.416 111.676C51.124 113.06 56.103 113.817 61.262 113.817C67.382 113.817 73.251 112.759 78.714 110.838C78.573 110.613 78.445 110.374 78.34 110.114L62.184 65.857Z" fill="#464342"/>
<path d="M107.376 36.046C107.602 37.72 107.73 39.517 107.73 41.45C107.73 46.783 106.734 52.778 103.734 60.274L87.681 106.687C103.305 97.576 113.814 80.649 113.814 61.261C113.815 52.124 111.481 43.532 107.376 36.046Z" fill="#464342"/>
<path d="M61.262 0C27.483 0 0 27.481 0 61.26C0 95.043 27.483 122.523 61.262 122.523C95.04 122.523 122.527 95.043 122.527 61.26C122.526 27.481 95.04 0 61.262 0ZM61.262 119.715C29.032 119.715 2.809 93.492 2.809 61.26C2.809 29.03 29.031 2.809 61.262 2.809C93.491 2.809 119.712 29.03 119.712 61.26C119.712 93.492 93.491 119.715 61.262 119.715Z" fill="#464342"/>
</svg>
</div>

Le code HTML risque de devenir un peu indigeste, mais si vous travaillez avec PHP : 

<div class="svg-container">
    <?php echo file_get_contents('path/to/file.svg') ?>
</div>

Il est possible également de faire cela en Javascript, au chargement de la page, avec des méthode asynchrones : 

const svg_container = document.querySelector('.svg-container');
fetch('path/to/file.svg').
then(response => response.text()).
then(svgCode => svg_container.innerHTML = svgCode);

Définir les variables CSS

On définit ensuite les variables (custom properties) et classes CSS qui vont nous permettre d’ajouter de la couleur à nos SVG :

:root {
  --svg_primary: red;
  --svg_secondary: blue;
}
.svg-primary {
  fill: var(--svg_primary);
}
.svg-secondary {
  fill: var(--svg_secondary);
}

Appliquer les classes CSS aux composants du SVG

Il ne reste plus qu’à modifier le code du fichier SVG (avec VSCode par exemple) pour ajouter les classes .svg-primary et .svg-secondary aux éléments dont on veut pouvoir maîtriser la couleur. Retirez également les propriétés fill si elles sont déjà appliquées à certains éléments. Par exemple, pour un élément de type <path> : 

<path 
d="M61.262 0C27.483 0 0 27.481 0 61.26C0 95.043 27.483 122.523 61.262 122.523C95.04 122.523 122.527 95.043 122.527 61.26C122.526 27.481 95.04 0 61.262 0ZM61.262 119.715C29.032 119.715 2.809 93.492 2.809 61.26C2.809 29.03 29.031 2.809 61.262 2.809C93.491 2.809 119.712 29.03 119.712 61.26C119.712 93.492 93.491 119.715 61.262 119.715Z" 
fill="#464342"
/>

Devient :

<path 
d="M61.262 0C27.483 0 0 27.481 0 61.26C0 95.043 27.483 122.523 61.262 122.523C95.04 122.523 122.527 95.043 122.527 61.26C122.526 27.481 95.04 0 61.262 0ZM61.262 119.715C29.032 119.715 2.809 93.492 2.809 61.26C2.809 29.03 29.031 2.809 61.262 2.809C93.491 2.809 119.712 29.03 119.712 61.26C119.712 93.492 93.491 119.715 61.262 119.715Z" 
class="svg-primary"
/>

Et voila ! Les illustrations SVG sont unies et si le design system évolue, il suffira de changer la valeur des propriétés CSS pour mettre à jour la couleurs de toutes les illustrations.