Encodez du balisage SVG en data URI URL-encodé ou base64, avec des lignes CSS background-image et <img> prêtes à coller. Minification facultative.
— la sortie apparaît ici —
— la sortie apparaît ici —
— la sortie apparaît ici —
À propos de cet outil
Collez du balisage SVG brut et obtenez un data URI que vous pouvez déposer directement dans du CSS ou du HTML. Il produit deux encodages et tout est généré dans votre navigateur, si bien que rien n'est envoyé.
La sortie URL-encodée remplace les guillemets doubles par des guillemets simples, exécute encodeURIComponent, puis restaure quelques caractères sûrs (espace, deux-points, barre oblique, égal) pour la garder compacte et lisible. La sortie base64 encode le SVG en UTF-8 et le passe dans btoa, ce qui donne data:image/svg+xml;base64,… . Une comparaison en octets montre quel encodage est le plus petit ; pour la plupart des icônes, la forme URL-encodée l'emporte.
Activez la minification pour retirer les commentaires et réduire les espaces entre les balises avant l'encodage. Copiez la ligne background-image pour le CSS ou la ligne <img src> pour le HTML. Notez que les guillemets à l'intérieur du SVG sont normalisés en guillemets simples afin que le data URI puisse être entouré de guillemets doubles en toute sécurité.
Foire aux questions
URL-encodé ou base64 — lequel utiliser ?
L'URL-encodé est généralement plus petit et reste lisible, ce qui aide au débogage. Le base64 est plus opaque mais universellement accepté ; la comparaison de taille vous indique lequel est le plus petit ici.
Pourquoi mes guillemets doubles ont-ils été changés en guillemets simples ?
Les guillemets d'attributs sont convertis en guillemets simples afin que tout le data URI puisse tenir dans un url("…") ou un src="…" entre guillemets doubles sans échappement. Les deux sont valides en SVG.
La minification change-t-elle l'apparence du SVG ?
Non. Elle ne fait que retirer les commentaires et réduire les espaces entre et à l'intérieur des balises ; le vecteur rendu est identique, seulement plus petit.
Mon SVG est-il envoyé quelque part ?
Non. L'encodage s'exécute entièrement dans votre navigateur avec encodeURIComponent et btoa ; le balisage ne quitte jamais votre appareil.