Convertir un SVG en fond CSS
Collez un SVG et obtenez directement une règle CSS background-image prête à coller dans votre feuille de style, sans avoir à héberger de fichier image séparé.
Pourquoi utiliser un SVG en fond CSS plutôt qu'un fichier image ?
Encoder un SVG directement dans la feuille de style sous forme de data URI évite une requête HTTP supplémentaire pour charger un fichier image séparé, ce qui peut accélérer légèrement l'affichage pour de petites icônes. C'est aussi pratique pour des composants autonomes (un seul fichier CSS contient déjà son icône).
Pourquoi le SVG est-il encodé en URL plutôt qu'en base64 ?
L'encodage en URL (avec quelques caractères échappés comme #, < et >) produit généralement un data URI plus court et plus lisible que le base64 pour du texte comme le SVG, ce qui réduit légèrement le poids final du CSS.
Puis-je changer la couleur de l'icône après l'avoir intégrée en fond CSS ?
Non, une fois encodée en background-image, la couleur du SVG est figée dans le data URI : pour changer de couleur, modifiez la couleur dans le SVG source avant de régénérer le CSS (par exemple avec notre outil de remplacement de couleur SVG).
Traitement 100% local : l'encodage s'effectue entièrement dans votre navigateur, votre SVG n'est jamais envoyé à un serveur.