LocalToolsCollection d’outils de navigateur hors ligne

Catégorie: Développement

SVG vers arrière-plan CSS

Idée interneUn outil manque ?

Transformez un balisage SVG en URI de données background-image

Collez un balisage SVG et obtenez une URI de données background-image CSS, ainsi que les lignes background-repeat, background-size et background-position, avec un aperçu en direct pour vérifier avant de copier.

Sortie
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230f766e' stroke-width='2'%3E %3Ccircle cx='12' cy='12' r='9' /%3E %3Cpath d='M8 12h8M12 8v8' /%3E %3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
background-position: center;

Le SVG ne quitte jamais le navigateur ; il est encodé directement dans la valeur CSS.

Tout sur cette page est traité dans votre navigateur. Rien n'est envoyé.

À quoi sert cet outil

Une petite icône ou un motif SVG est souvent plus léger en URI de données CSS intégrée qu'en requête d'image séparée, mais encoder le balisage à la main pour qu'il survive dans une valeur url(...) est source d'erreurs : guillemets, chevrons et sauts de ligne demandent tous un échappement soigné. Cet outil fait cet encodage pour vous, en gardant le résultat court et lisible plutôt que de se rabattre sur du base64, et affiche un aperçu en direct de l'arrière-plan aux réglages de répétition et de taille que vous choisissez.

Mode d'emploi

  1. Collez le balisage SVG que vous voulez utiliser comme arrière-plan.
  2. Choisissez comment il doit se répéter et se redimensionner.
  3. Copiez la déclaration CSS et collez-la dans votre feuille de style.

Confidentialité

Cet outil fonctionne entièrement dans votre navigateur. Ce que vous saisissez n'est jamais envoyé, stocké ni partagé : fermer l'onglet suffit à tout effacer.

Questions fréquentes

Est-ce la même chose qu'un encodage base64 du SVG ?
Non. L'outil n'échappe que la poignée de caractères qui casseraient sinon une valeur CSS, ce qui garde l'URI de données nettement plus courte et toujours lisible, contrairement à un bloc base64.
Le SVG est-il envoyé quelque part ?
Non. L'encodage se fait par simple remplacement de chaînes de caractères dans l'onglet de votre navigateur ; le balisage que vous collez ne quitte jamais la page.
Puis-je utiliser currentColor ou des variables CSS à l'intérieur du SVG ?
currentColor fonctionne car il est résolu par le navigateur au moment de l'affichage, mais les propriétés personnalisées CSS référencées dans les attributs du SVG lui-même ne le sont pas, car une URI de données background-image est un balisage statique, pas une feuille de style vivante.

Revenir à tous les outils