Kortic, Anthony Ladeuil

Encodage SVG pour CSS

Problématique

L'intégration d'icônes et autres logos dans un site web s'effectue de différentes manières : svg inline, <img src="path/to/image" alt="" />, etc…

Pour l'intégration via CSS nous pouvons le faire également par le biais d'encodage en base64 au détriment d'un surpoids d'environ 30%.

Une alternative CSS consiste à encoder le contenu XML du SVG de telle sorte que l'on puisse utiliser directement ce code dans un background-image en variabilisant les attributs de type fill compatibles avec un préprocesseur de type SASS.

Exemple

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"> <path fill="rgb(255,69,0)" d="M27,14H18V5a2,2,0,0,0-4,0v9H5a2,2,0,0,0,0,4h9v9a2,2,0,0,0,4,0V18h9a2,2,0,0,0,0-4Z"/> </svg>

Ce code affichera une icône "+" orange. Une fois encodé, le XML fournira une chaine de caractères exploitable dans un background-image CSS, ce qui donnera :

background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E %3Cpath fill='rgb(255,69,0)' d='M27,14H18V5a2,2,0,0,0-4,0v9H5a2,2,0,0,0,0,4h9v9a2,2,0,0,0,4,0V18h9a2,2,0,0,0,0-4Z'/%3E %3C/svg%3E");