Convertisseur d'arrière-plan SVG en CSS Encodez le code SVG comme une image d'arrière-plan CSS à l'aide de l'encodage URI de données.

🎨

SVG en arrière-plan CSS

Encodez le code SVG comme une image d'arrière-plan CSS à l'aide de l'encodage URI de données.

Collez le code SVG

Entrez ou collez votre balise SVG dans le champ de saisie.

Définissez les propriétés de l'arrière-plan

Configurez les paramètres taille, répétition et position de l'arrière-plan.

Copiez le CSS

Prévisualisez le SVG en tant qu'arrière-plan et copiez le code CSS.

Loading tool...

What Is SVG en arrière-plan CSS?

L'outil SVG vers CSS Background convertit le code SVG en une image de fond CSS à l'aide d'un codage URI de données. Cette technique intègre directement le SVG dans votre CSS sans nécessiter des fichiers d'image séparés ou des requêtes HTTP. Il suffit de coller votre code SVG, de configurer la taille de l'arrière-plan, la répétition et la position, et l'outil génère le CSS codé. Le codage URI de données remplace les caractères spéciaux (comme <, >, #) par des équivalents sûrs pour URL afin que le SVG puisse être intégré en toute sécurité dans une fonction url() CSS. L'aperçu montre le SVG appliqué comme arrière-plan sur un élément d'exemple. Cette approche est idéale pour les petits icônes, les motifs et les éléments décoratifs que vous souhaitez inclure dans votre CSS sans dépendances de fichiers externes.

Why Use SVG en arrière-plan CSS?

Pas besoin de fichiers d'image séparés - le SVG est intégré directement dans le CSS
Élimine les requêtes HTTP pour les petits actifs SVG
Taille, répétition et position de l'arrière-plan configurables
La prévisualisation en direct montre le SVG comme un arrière-plan CSS

Common Use Cases

Arrière-plans d'icônes

Intégrez des icônes SVG petites directement dans le CSS pour les boutons et les marqueurs de liste.

Arrière-plans de motifs

Encodez des motifs SVG répétitifs en tant qu'arrière-plans CSS sans fichiers d'image.

Éléments décoratifs

Ajoutez des décorations SVG aux pseudo-éléments via les arrière-plans CSS.

Modèles de courriels

Intégrez des graphiques SVG dans le CSS pour les modèles de courriels où les images externes peuvent être bloquées.

Technical Guide

Les URI de données SVG utilisent le format : url("data:image/svg+xml,<encoded-svg>"). Le contenu SVG est encodé en URL en remplaçant les caractères spéciaux : < devient %3C, > devient %3E, # devient %23 et les guillemets sont convertis en guillemets simples. Ce codage est plus efficace que le Base64 pour les SVG car il maintient la lisibilité et est généralement plus petit. La propriété background-image accepte l'URI de données, et les propriétés d'arrière-plan standard (taille, répétition, position) contrôlent le rendu. Pour les grands SVG, envisagez d'utiliser des fichiers externes à la place, car les grandes URI de données augmentent la taille du fichier CSS et ne peuvent pas être mises en cache indépendamment. La propriété background-size : contain ajuste le SVG pour qu'il soit contenu dans l'élément tout en maintenant le rapport d'aspect. La propriété background-size : cover remplit l'élément, éventuellement en coupant le SVG. Des valeurs spécifiques en pixels ou en pourcentage offrent un contrôle précis.

Tips & Best Practices

1
Utilisez le codage URL (et non base64) pour une taille de fichier plus petite avec le SVG
2
Supprimez les attributs SVG inutiles pour minimiser la taille encodée
3
Gardez les SVG petits - les URI de données grandes gonflent le CSS et ne peuvent pas être mises en cache séparément
4
Utilisez des guillemets simples dans le SVG pour éviter les problèmes d'échappement dans le CSS

Related Tools

Modèle d'arrière-plan CSS

Créez des modèles d'arrière-plan CSS répétitifs, y compris des rayures, un damier, des points et bien plus encore.

🎨 CSS & Design

Recherche d'icônes

Recherchez et personnalisez des icônes SVG open-source avec une taille, une couleur et un trait ajustables.

🎨 CSS & Design

Générateur de Variables CSS

Générer des propriétés personnalisées CSS (variables) pour les couleurs, les espacements et la typographie.

🎨 CSS & Design

Générateur de motifs SVG

Générer des motifs répétitifs basés sur SVG pour les arrières-plans CSS avec différentes formes.

🎨 CSS & Design

Frequently Asked Questions

Q L'encodage URI de données est-il meilleur que base64 pour le SVG ?

Oui, le SVG encodé en URL est généralement plus petit que base64 et reste lisible par l'homme dans le CSS.

Q Puis-je utiliser n'importe quel SVG ?

Oui, tout code SVG valide peut être encodé. Supprimez les attributs et les espaces inutiles pour une taille optimale.

Q Cela fonctionne-t-il sur tous les navigateurs ?

Oui, les URI de données SVG dans les arrière-plans CSS sont pris en charge par tous les navigateurs modernes.

Q Et pour les grands SVG ?

Pour les grands ou complexes SVG, utilisez des fichiers SVG externes à la place. Les URI de données ne peuvent pas être mises en cache indépendamment du CSS.

Q Puis-je utiliser des SVG URI de données dans les balises <img> ?

Oui, le même format d'URI de données fonctionne dans les attributs src img et background-image CSS.

About This Tool

SVG en arrière-plan CSS is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.