Encodeur de Data URI pour SVG | Data URIs CSS ≈30% plus légères que base64

Cet outil convertit un SVG en data:image/svg+xml URI via un encodage pourcent minimal — seuls les caractères qui casseraient url(...) sont échappés — et produit un fragment background-image: url(...) prêt à coller. Comme base64 ajoute mécaniquement environ 33 % à la charge utile, le pourcent-encoding gagne typiquement 20 à 35 % sur une icône standard.

💡 À propos de cet outil

Le cas typique : intégrer une icône SVG isolée dans une feuille de style sans installer un loader SVG côté Webpack ou Vite. On économise une requête HTTP, on évite le « flash d'icône absente », et changer d'icône au survol devient une simple règle CSS.

Base64 fonctionne aussi mais alourdit toujours la charge de 33 % (trois octets en entrée donnent quatre caractères en sortie). Un SVG, lui, est déjà du texte et la majorité des caractères sont sûrs dans une URL : seuls <, >, #, % et la guillemet (" ou ') qui entre en collision avec l'enveloppe extérieure de url(...) doivent vraiment être échappés. C'est la stratégie qu'a popularisée le url-encoder de Yoksel à l'époque où les SVG remplaçaient les icon fonts.

L'écrasement de fill est pratique pour les icônes monochromes (<svg ... fill="currentColor">) : on peut produire des variantes précolorées — par exemple un état :hover rose et un :active mint — sans dupliquer le SVG trois fois.

🧐 Questions fréquentes

Vaut-il mieux choisir url("...") ou url('...') ? Le guillemet simple est plus sûr si la data URI s'insère dans PostCSS, Sass ou un template JS qui utilise déjà les doubles. En CSS pur, la version à guillemet double demande un échappement de moins, donc quelques octets de gagné.

L'écrasement de fill modifie-t-il aussi fill="currentColor" ? Oui. Il remplace chaque attribut fill= rencontré. Si vous souhaitez conserver le comportement de currentColor, laissez le champ vide.

Base64 peut-il s'avérer plus léger ? Parfois. Les SVG très imbriqués (beaucoup de <), ceux qui contiennent de nombreux " dans des styles en ligne, ou ceux exportés par des outils comme Sketch avec déclaration XML et commentaires, peuvent dépasser les 33 % d'overhead de base64 une fois pourcent-encodés. Les trois cartes de taille permettent de trancher au cas par cas plutôt que de se fier à la moyenne.

L'attribut xmlns est-il indispensable ? Pour une consommation via background-image: url(...), oui. Le navigateur fait transiter la data URI par son décodeur d'image, qui exige un namespace explicite. L'outil n'en ajoute jamais ; il encode exactement ce que vous collez.

Et les icônes au-delà de 256 Ko ? Le sélecteur de fichiers limite à 256 Ko, mais en pratique tout SVG au-delà d'environ 10 Ko gagne à être servi comme fichier séparé : la feuille de style reste légère et bénéficie du cache navigateur.

📚 Le saviez-vous

L'astuce du « pourcent-encoding minimal limité aux caractères qui cassent url() » s'est diffusée à partir du url-encoder de Yoksel vers 2015-2016, au moment où les SVG ont commencé à supplanter les icon fonts. La syntaxe de background-image arbitraire de Tailwind (bg-[url('data:image/svg+xml,…')]) en est l'héritière directe : même encodage, même esprit mono-fichier, simplement habillé d'utility classes.