Vous êtes dans la zone de contenu principal de la page

Encodage SVG pour CSS

Conseil : voyant passer certains fichiers assez lourds, il est fortement recommandé de vérifier avant de convertir vos sources que votre fichier ne contient pas de code du type data:img/png;base64. Dans ce cas là, votre image n'est pas vectorielle. A propos du partage

On en parle sur UX Planet

Conversion SVG

Glisser un fichier SVG sur la page ou coller le code dans le champ
nb: si la prévisualisation ne fonctionne pas, ne pas hûrler ! Il s'agit probablement d'un bug sur le SVG initial. Vérifier le code ici.

Comment ça marche ?

L'intégration de pictogrammes et autres logos dans un site web s'effectue de différentes manières : svg inline, img src="path/to/image", etc… Pour l'intégration via CSS nous pouvons le faire également en encodant en base64 le contenu du SVG 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 comme SASS.

Et pour les gros volumes de SVG et un peu plus de performance web, une autre option (pour aller) un plus loin

Exemple

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

Exemples en vrac

Exporter des SVG « propres »

Ci-dessous, le code d'un SVG qui a été soumis au convertisseur.

Ce code est relativement propre mais peut aisément être optimisé. En l'état, le SVG a un poids de 1673 octets. Mais à bien y regarder, on trouve des attributs dont on peut se passer sans nuire au résultat graphique.

On peut retirer les attributs de taille width="35" height="35" et de mise en forme fill="none".
Pour qu'il soit encore plus sympa à utiliser, on ajoute un viewBox="0 0 35 35". Et hop, un SVG bien responsive ! Mais ce n'est pas tout… Le path du SVG précise un fill="#000".
En l'état, ce n'est pas gênant mais ça ne sert à rien. Un path sans notion de couleur spécifiée est noir, quoi qu'il arrive. Aller hop, on l'enlève aussi, ce fill.
Très bien, mais ensuite ? Et bien on ouvre son Illustrator et on va exporter ce fichier mais en configurant un peu les paramètres.

Sélectionner le menu « Fichier › Exporter… › Exporter pour les écrans » (retenir le raccourci clavier me parait utile).

Dans cette boite de dialogue, sélectionner la molette d'options au niveau de « Format ».
La boite de configuration propose les différentes options pour chaque format d'export possible. Dans la partie SVG, mettre les paramêtres comme ci-dessous.
Cette configuration permet d'exporter des SVG optimisés au mieux.

Une fois le fichier exporté, il reste une dernière étape : passer le code en revue dans un IDE de votre choix.
Pour le fichier traité ici, on obtient un code qui ressemble maintenant à ça.

En l'état, nous avons toujours le même visuel, mais en version responsive et bien plus léger (922 octets).
Il ne reste plus qu'à enlever (ou pas) le <title>sample-clean</title> et le tour est joué.

Là, j'entends des grincheux au fond de la classe qui disent « - Eh mais il est noir ton truc ! Je le veux en couleur ! ». Mais bien sûr qu'on va le faire en couleur, en lisant le petit tuto sur les SVG… Et-c-est-tout !

Utilisation des sources
Les sources de « Encodage SVG pour CSS » proposées par sont mises à disposition selon les termes de la licence Creative Commons CC BY-NC-SA 4.0 (licence Creative Commons CC BY-NC-SA 4.0 : Attribution - Pas d'utilsation commerciale - Partage dans les mêmes conditions).
Si vous souhaitez participer, même modestement, au maintien du site et pour son usage, vous pouvez cliquer sur le joli bouton…
Un petit sou avec