Comment ça marche
Il convertit le code d'un SVG en un Data URI prêt à utiliser en CSS, de sorte que vous puissiez intégrer l'icône directement dans la feuille de style sans fichier séparé ni requête HTTP supplémentaire.
Il propose deux encodages : URL-encoded (percent-encoding), plus court et lisible, recommandé pour le SVG ; et Base64, un peu plus long mais universellement compatible.
Le résultat peut être généré comme background-image, comme mask-image (pour colorer l'icône avec CSS) ou comme variable CSS réutilisable. Minifier le SVG au préalable réduit encore la taille.
Exemples
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">…</svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'…%3C/svg%3E");L'encodage URL garde le SVG presque lisible et est généralement plus court que Base64.-webkit-mask-image: url("data:image/svg+xml,…");
mask-image: url("data:image/svg+xml,…");En tant que mask-image, la couleur de l'icône est contrôlée par la propriété background-color de l'élément.Cas d'usage
- Intégrer des icônes SVG comme background-image sans ajouter de requêtes HTTP à la page.
- Utiliser un SVG comme masque (mask-image) pour le recolorer depuis le CSS selon le thème ou l'état.
- Stocker une icône dans une variable CSS et la réutiliser dans plusieurs sélecteurs.
- Réduire le poids des icônes inline en minifiant le SVG avant de l'intégrer.
Questions fréquentes
URL-encoded ou Base64, lequel est préférable ?
Pour le SVG, URL-encoded est généralement la meilleure option : il produit un Data URI plus court et lisible car le SVG est du texte. Base64 offre une compatibilité maximale, mais ajoute environ 33 % de taille.
Pourquoi utiliser mask-image au lieu de background-image ?
Avec background-image, l'icône conserve ses couleurs originales. Avec mask-image, le SVG ne définit que la forme et le CSS fournit la couleur, idéal pour les icônes monochromes qui changent avec le thème.
Que fait l'option de minification ?
Elle supprime les commentaires et réduit les espaces blancs du SVG avant de l'encoder, de sorte que le Data URI final soit plus petit sans changer le dessin.
Mon SVG est-il envoyé sur un serveur ?
Non. La conversion se fait entièrement dans votre navigateur ; le SVG ne quitte jamais votre ordinateur.