Color, Alpha, variables CSS & Design System²

What about SVG?

L’implémentation du format SVG et de CSS dans les navigateurs a beaucoup évolué au fil des années. Leur manipulation est complexe mais très puissante.

Il y a plusieurs méthodes pour modifier la couleur d’une image ou d’un élément SVG via CSS, selon que le SVG soit un élément du DOM ou qu’il soit en Background d’un élément.

Inline SVG

Un SVG peut être un noeud dans le DOM, un élément HTML/CSS à partir entière, sur lequel on peut agir au même titre qu’un autre élément HTML. 

Quand vous visualisez le code d’une page, un SVG embedded montre le détail de sa hiérarchie.

Si le SVG fait parti du DOM on peut employer la propriété CSS ‘fill’ qui permet de modifier le ‘fill’ contenu dans le SVG en ciblant l’élément SVG lui-même et non son container.

.myLogo svg {fill:#fff}

SVG in background

Si le SVG est un background, c’est plus complexe mais possible.

Il faut pour cela utiliser la technique du filtre SVG et modifier les contrôles de couleur en partant de la couleur de départ vers la couleur de destination en modifiant ses valeurs chromatiques. 

Dans l’idéal, il vaut mieux partir d’un SVG avec une définition monochrome (noire ou blanc), c’est plus simple, mais il est possible de le faire à partir de n’importe quelle couleur, et sur des calques’ de l’élément SVG.

On utilisera la propriété CSS ‘filter‘ pour appliquer un filtre SVG de conversion de la couleur de l’image SVG.

Note : Ce filtre svg peut être appliqué à n’importe quel élément HTML, attribut ou sélecteur), dont la ‘couleur’ se modifiera en fonction du réglage), de même peut s’appliquer aux images autres que SVG (JPG, PNG, Gif)

Dans l’exemple ci-après, le filtre fait un négatif, puis applique des valeurs de saturation, contraste, luminosité, et la rotation sur le cercle de couleur.

div.background { 
filter : invert(100%) sepia(97%) saturate(151%) hue-rotate(358deg) brightness(116%) contrast(97%);
}

Évidemment, il est un peu difficile de calculer ces transformations de tête.

Je vous invite à consulter ce service (css-color-filter-generator) , ou d’autres, qui vous permet de calculer ces valeurs en fonction des couleurs de départ et d’arrivée.

Nous avons désormais la base pour aborder la seconde partie de cet article où nous aborderons l’utilisation des variables CSS, pour gérer les couleurs, leurs transformations, en contexte.

À bientôt 🙂 !