Convertir SVG en arrière-plan CSS

Non. La conversion se fait entièrement dans votre navigateur. Le fichier ne quitte jamais votre appareil – aucun serveur ne peut le voir. Une fois la page chargée, l'outil fonctionne même hors ligne.

Une règle : .votre-classe { width; height; background-image: url("data:image/svg+xml,…"); background-repeat: no-repeat; background-size: contain; }. width et height sont la taille propre du SVG en pixels – modifiez-les ou supprimez-les à votre guise ; avec background-size: contain, l'icône s'adapte à toute boîte que vous lui donnez.

Aux icônes monochromes qui doivent suivre la couleur du texte. La règle définit background-color: currentColor et utilise le SVG comme mask-image (avec le préfixe -webkit- pour les anciens Safari) : l'icône est dessinée dans la color de l'élément et change au survol ou en mode sombre avec une seule propriété CSS. Seule la forme du SVG compte – ses propres remplissages sont ignorés. Les graphiques multicolores nécessitent la variante arrière-plan normale.

Du nom du fichier, sauf si vous en saisissez un : « Fleche Gauche.svg » devient .fleche-gauche. Les noms passent en minuscules, les caractères non autorisés deviennent des tirets et un chiffre initial reçoit le préfixe « svg- », pour que le sélecteur soit toujours valide.

Les scripts et références externes sont toujours retirés, le prologue XML et les commentaires supprimés et, sauf si vous désactivez « Optimiser d'abord », le SVG est minifié. Le dessin lui-même reste identique.