SVG vers data URI (CSS et HTML)
Convertissez du code SVG en data URI optimisé pour le CSS (background-image, mask) et le HTML, avec un encodage URL plus court que le Base64 et un aperçu de l’image.
Mode d’emploiCollez le code SVG.
Disponible en: 
SVG vers data URI (CSS et HTML): à quoi ça sert
Collez le code SVG et choisissez le format de sortie. L’outil supprime les espaces superflus, remplace les guillemets et n’encode que les caractères nécessaires, ce qui produit un data URI plus petit que le Base64 ; il affiche l’aperçu de l’image et la taille finale.
Mode d’emploi
- Collez le code SVG.
- Choisissez CSS, data URI, img ou Base64.
- Copiez le résultat.
Quand l’utiliser
- Intégrer des icônes dans le CSS sans fichiers supplémentaires.
- Utiliser du SVG dans mask-image.
- Réduire les requêtes de la page.
Questions fréquentes
Pourquoi ne pas utiliser le Base64 ?
Pour le SVG, l’encodage URL donne en général un résultat plus petit que le Base64, car le SVG est déjà du texte. Seuls les caractères spéciaux, comme <, >, # et les guillemets, doivent être encodés.
Comment l’utiliser en CSS ?
Copiez le résultat au format background-image: url("data:image/svg+xml,..."). Cela fonctionne aussi avec mask-image, list-style-image et l’attribut src d’une balise img.
Vraiment gratuit ?
Oui, 100 % gratuit. Sans inscription, sans abonnement et sans limite d’utilisation. Tous les outils de Tools123 sont gratuits.