Encodage Scalable Vector Graphics pour Cascading Style Sheets

Convertisseur en ligne de Scalable Vector Graphics pour intégration directe dans des fichiers Cascading Style Sheets.

jeudi 29 octobre 2026

Dans l'optique de « partage », les fichiers soumis sont enregistrés de manière anonyme et accessibles à tout le monde. Si vous ne souhaitez pas que votre fichier soit accessible, vous pouvez en demander la suppression par le formulaire de contact. Retrouvez toutes les sources disponibles sur cette page.

Performance et intégration des pictogrammes dans Hyper Text Language Markup et Cascading Style Sheets ?
En savoir plus

Conversion SVG

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

Pensez à adapter votre SVG pour qu'il soit « responsive ».
Comment ? Regardez ici…

Code à convertir

Coller le code svg ici ou glisser un fichier sur la page

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.

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 Cascading Style Sheets nous pouvons le faire également en encodant en base64 le contenu du Scalable Vector Graphics au détriment d'un surpoids d'environ 30%.

On en parle sur UX Planet.

Une alternative CSS consiste à encoder le contenu Extensible Markup Language du Cascading Style Sheets 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).

Boite de dialogue d'export SVG Illustrator

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 : intégration des pictogrammes dans HTML et CSS ?
En savoir plus

Licence Creative commons CC BY-NC-SA 4.0

Lien vers la licence : Creative commons CC BY-NC-SA 4.0

Les sources proposées sur Kortic Anthony Ladeuil sont mises à disposition selon les termes suivants :

Pas d’utilisation commerciale: Vous n'êtes pas autorisé à faire un usage commercial de cette Œuvre, tout ou partie du matériel la composant.
Bien entendu, la probabilité est faible pour que ce point soit respecté. En cas de sursaut d'honnêteté, vous pouvez payer un café, cette page soulagera votre conscience.
Attribution: Vous devez créditer l'Œuvre, intégrer un lien vers la licence et indiquer si des modifications ont été effectuées à l'Œuvre. Vous devez indiquer ces informations par tous les moyens raisonnables, sans toutefois suggérer que l'Offrant vous soutient ou soutient la façon dont vous avez utilisé son Œuvre.
Partage dans les mêmes conditions: Dans le cas où vous effectuez un remix, que vous transformez, ou créez à partir du matériel composant l'Œuvre originale, vous devez diffuser l'Œuvre modifiée dans les mêmes conditions, c'est-à-dire avec la même licence avec laquelle l'Œuvre originale a été diffusée.
Pas de restrictions complémentaires Vous n'êtes pas autorisé à appliquer des conditions légales ou des mesures techniques qui restreindraient légalement autrui à utiliser l'Œuvre dans les conditions décrites par la licence.

Note : Vous n'êtes pas dans l'obligation de respecter la licence pour les éléments ou matériel appartenant au domaine public ou dans le cas où l'utilisation que vous souhaitez faire est couverte par une exception.

Aucune garantie n'est donnée. Il se peut que la licence ne vous donne pas toutes les permissions nécessaires pour votre utilisation. Par exemple, certains droits comme les droits moraux, le droit des données personnelles et le droit à l'image sont susceptibles de limiter votre utilisation.

À défaut de tout ça, un petit message et une référence à Kortic restent les bienvenus.

Limitation de responsabilité

Le code est fourni « tel quel », sans garantie d'aucune sorte, expresse ou implicite. En aucun cas l’auteur ou les détenteurs du copyright ne seront responsables de toute réclamation, dommage ou autre responsabilité, que ce soit dans une action contractuelle, délictuelle ou autre, résultant de, en dehors ou en relation avec le logiciel ou l'utilisation ou d'autres transactions.

Vous aimez cette page ?
Dites-le !