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

Conversion SVG

Glisser un fichier SVG sur la page ou coller le code dans le champ

Code à convertir

Résultat SVG encodé

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%.

On en parle sur UX Planet

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

<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 un pictogramme "+" 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");

Exporter des SVG « propres »

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

<svg width="35" height="35" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill="#000" d="M33.9437 10.502C33.3224 8.9914 32.3444 7.65376 31.0933 6.60358C30.9089 6.45054 30.723 6.30843 30.5358 6.17451C31.0403 4.81847 31.3472 3.39696 31.4473 1.95358L31.4923 0.946514L30.5358 0.633599C30.3035 0.558445 24.8788 -1.16327 21.1689 1.40837C19.1397 2.81307 18.1299 5.14559 17.6366 7.01214L17.5 7.11053C17.3552 6.99711 17.2035 6.88233 17.0463 6.76755C15.1675 5.40111 12.9784 4.48423 11.1898 4.31889C10.9425 4.29703 10.6801 4.28473 10.4123 4.28473C9.30136 4.28609 6.43183 4.51429 3.90665 6.60358C2.12481 8.08343 0 10.9666 0 16.2957C0 18.9999 0.956508 21.685 2.85313 24.2771C4.21957 26.1532 6.09432 27.9925 8.41454 29.7429C10.8319 31.5509 13.4275 33.1076 16.1609 34.3888L17.5 34.9859L18.8391 34.3874C21.5725 33.1062 24.1681 31.5495 26.5855 29.7415C28.9084 27.9911 30.7777 26.1519 32.1469 24.2757C34.0394 21.6795 35 18.9986 35 16.2944C35 14.1122 34.6447 12.1664 33.9437 10.502ZM22.6774 3.58921C24.5153 2.31705 27.2031 2.60537 28.6665 2.89916C28.4206 4.37491 27.7387 6.99848 25.9145 8.26517C24.0767 9.53732 21.3903 9.24764 19.9268 8.94839C20.1714 7.47946 20.8532 4.8518 22.6774 3.58921ZM17.5 31.3976C17.5 31.3976 3.27946 25.0396 3.27946 16.2957C3.27946 8.81721 8.16175 7.56555 10.4123 7.56555C10.5885 7.56555 10.7484 7.57375 10.8892 7.58605C13.3488 7.81288 17.5 10.5512 17.5 12.6829C17.5 12.2114 17.7036 11.7113 18.0466 11.2153H18.0616C19.4406 11.6281 20.8717 11.8412 22.3112 11.848C23.9715 11.848 25.8517 11.5296 27.4258 10.4405C27.9848 10.0503 28.4866 9.58393 28.9166 9.05497C30.4552 10.2848 31.7219 12.4834 31.7219 16.2971C31.7205 25.0396 17.5 31.3976 17.5 31.3976Z"/>
</svg>

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.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35 35">
<title>sample-clean</title>
<path d="M33.94,10.5a10.12,10.12,0,0,0-2.85-3.9l-.55-.43A15.15,15.15,0,0,0,31.45,2l0-1L30.54.63c-.24-.07-5.66-1.79-9.37.78A9.7,9.7,0,0,0,17.64,7l-.14.1-.45-.34a12.58,12.58,0,0,0-5.86-2.45c-.25,0-.51,0-.78,0A10.48,10.48,0,0,0,3.91,6.6C2.12,8.08,0,11,0,16.3a13.51,13.51,0,0,0,2.85,8,27,27,0,0,0,5.56,5.46,44.46,44.46,0,0,0,7.75,4.65l1.34.6,1.34-.6a44.46,44.46,0,0,0,7.75-4.65,27,27,0,0,0,5.56-5.46,13.51,13.51,0,0,0,2.85-8A14.91,14.91,0,0,0,33.94,10.5ZM22.68,3.59c1.84-1.27,4.52-1,6-.69-.25,1.47-.93,4.1-2.76,5.37s-4.52,1-6,.68C20.17,7.48,20.85,4.85,22.68,3.59ZM17.5,31.4S3.28,25,3.28,16.3c0-7.48,4.88-8.73,7.13-8.73a3.54,3.54,0,0,1,.48,0c2.46.22,6.61,3,6.61,5.09a2.58,2.58,0,0,1,.55-1.46h0a15.29,15.29,0,0,0,4.25.63,9,9,0,0,0,5.12-1.41,7.55,7.55,0,0,0,1.49-1.39c1.54,1.23,2.8,3.43,2.8,7.25C31.72,25,17.5,31.4,17.5,31.4Z"/>
</svg>

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 Kortic 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 ™

Dernière modification mardi 06 avril 2021