Convertisseur SVG vers Data URI — SVG en ligne comme arrière-plan CSS
Convertissez du code SVG en data URI pour une utilisation dans background-image CSS, des balises img HTML ou une intégration en ligne. Choisissez entre le format encodé en URL (plus petit) ou Base64. Prévisualisez votre SVG et copiez des extraits de code prêts à l'emploi.
Pourquoi convertir du SVG en data URI ?
Les data URI SVG vous permettent d'intégrer des graphiques vectoriels directement dans du CSS ou du HTML sans requêtes HTTP distinctes. C'est particulièrement utile pour les petites icônes, les logos et les éléments d'interface où la surcharge d'une requête HTTP dépasse le temps de transfert du fichier.
Il existe deux méthodes d'encodage : l'encodage en URL (recommandé pour le SVG) préserve la lisibilité et est généralement plus petit, tandis que l'encodage Base64 produit une chaîne plus longue mais évite d'éventuels problèmes d'analyse liés aux caractères spéciaux dans certains contextes.
Avantages de l'encodage en URL
- Généralement 20 à 30 % plus petit que Base64 pour les fichiers SVG
- Partiellement lisible par l'humain — vous pouvez encore voir la structure du SVG
- Recommandé par la plupart des guides d'optimisation des performances
Bonnes pratiques
- Minifiez votre SVG avant la conversion (supprimez les commentaires, les espaces, les métadonnées d'éditeur)
- Utilisez des data URI pour les petits SVG de moins de 10 Ko — les fichiers plus volumineux devraient être externes
- Définissez toujours xmlns='http://www.w3.org/2000/svg' dans votre SVG pour la compatibilité des data URI
FAQ
Dois-je utiliser l'encodage en URL ou Base64 pour les data URI SVG ?
L'encodage en URL est recommandé pour le SVG. Il produit une sortie plus petite (généralement 20 à 30 % plus petite que Base64) et garde le SVG partiellement lisible. N'utilisez Base64 que si vous rencontrez des problèmes d'analyse liés aux caractères spéciaux dans votre contexte spécifique.
Pourquoi mon SVG ne s'affiche-t-il pas dans le data URI ?
Assurez-vous que votre SVG inclut l'attribut xmlns (xmlns='http://www.w3.org/2000/svg'). Vérifiez aussi qu'il n'y a pas de caractères spéciaux non échappés comme # dans les valeurs de couleur, et que le SVG est du XML bien formé.
Quelle est la taille maximale des data URI SVG ?
Il n'y a pas de limite stricte dans les navigateurs modernes, mais les performances se dégradent avec les data URI volumineux. Gardez les data URI SVG sous 10 Ko pour de meilleurs résultats. Pour les SVG plus volumineux, utilisez un fichier externe servi via un CDN.
Puis-je utiliser des data URI SVG dans des propriétés personnalisées CSS ?
Oui. Vous pouvez stocker un data URI SVG dans une propriété personnalisée CSS (variable) et l'utiliser avec url(). C'est un excellent modèle pour la gestion des thèmes, qui vous permet de remplacer des icônes en modifiant la valeur d'une seule variable.
Outils associés
Encodeur et décodeur Base64 en ligne
Encodez ou décodez des chaînes Base64 directement dans votre navigateur
Encodeur et décodeur de texte
Convertissez du texte en Base64 ou décodez Base64 en texte brut
Image vers Base64
Convertissez des images en chaînes encodées Base64
Base64 vers image
Décodez des chaînes Base64 en images visibles
Fichier vers Base64
Encodez n'importe quel fichier en chaîne Base64
Base64 vers fichier
Décodez n'importe quelle chaîne Base64 vers son fichier d'origine
Base64 vers PDF
Décodez des chaînes Base64 en documents PDF
Décodeur JWT
Décodez et inspectez les tokens JWT
Encodeur/Décodeur URL
Encodez ou décodez des URLs avec l'encodage pourcent
Encodeur/Décodeur Entités HTML
Convertissez les caractères spéciaux en entités HTML
Convertisseur Hex ↔ Base64
Convertissez entre les formats hex et Base64
Base64 vers texte
Décodez des chaînes Base64 en texte lisible
Validateur Base64
Vérifiez si une chaîne est un encodage Base64 valide
Base64 vers JSON
Décodez du Base64 et affichez-le formaté en JSON
Générateur de Data URI
Générez des Data URI Base64 à partir de texte ou de fichiers
Base64 vers hexadécimal
Convertissez des chaînes Base64 en hexadécimal et inversement
Encodeur et décodeur UTF-8
Encodez du texte en octets UTF-8 ou décodez des octets en texte