SVG en background-image CSS

Intégrez n'importe quel SVG dans votre feuille de style sous forme de data URI encodé.

ou déposez un fichier / collez du code ci-dessous
Règle CSS
La sortie s'affiche ici

Fonctionnement

  1. 1Collez du code SVG ou déposez un fichier .svg.
  2. 2L'outil l'encode en URL au sein d'une règle background-image.
  3. 3Copiez l'extrait CSS directement dans votre feuille de style.

Gratuit, sans inscription, sans filigrane — tout s'exécute localement dans votre navigateur, vos fichiers ne quittent donc jamais votre machine.

Questions fréquentes

Pourquoi encoder en URL plutôt qu'en base64 ?

Le SVG encodé en URL est plus léger et reste lisible dans votre CSS ; le base64 est aussi disponible si vous le préférez.

Quand intégrer un SVG dans le CSS ?

Pour les petites icônes décoratives et les motifs — cela économise une requête HTTP. Les grandes illustrations restent mieux en fichier.

Outils associés