Convertisseur SVG vers URI de données CSS
Collez du balisage SVG brut pour obtenir un URI de données encodé en URL à insérer directement dans un background-image CSS, plus un aperçu en direct du SVG rendu.
Aperçu en direct
Votre aperçu SVG apparaîtra ici
URI de données
Extrait CSS
Questions fréquentes
Pourquoi utiliser un URI de données plutôt qu'un fichier SVG externe ?
Un URI de données intègre le SVG directement dans votre CSS ou HTML, économisant une requête HTTP supplémentaire. C'est particulièrement pratique pour les petites icônes utilisées purement comme background-image, où garder tout dans une seule feuille de style est plus simple que gérer un fichier séparé.
Pourquoi est-il encodé en URL plutôt qu'en base64 ?
Les URI de données SVG encodés en URL sont généralement plus petits que l'équivalent base64 et restent lisibles par un humain, ce qui les rend plus faciles à réviser ou modifier directement dans votre CSS. Les navigateurs supportent les deux, cet outil utilise l'option la plus compacte et lisible.
Est-ce sûr de coller du SVG provenant d'une source non fiable ?
L'aperçu affiche votre SVG comme une '<img>', pas injecté comme HTML actif, donc les scripts intégrés dans un SVG malveillant ne s'exécuteront pas dans l'aperçu. Néanmoins, traitez les fichiers SVG comme n'importe quel autre fichier, et ne collez que du balisage auquel vous faites confiance.