Code SVG
<svg>X</svg>
CSS
url(data:image/svg...)
Outils de design
SVG vers arrière-plan CSS — URL de données / Base64
SVG en ligne dans une image d'arrière-plan CSS : chaîne url(...) en utilisant l'encodage URI ou Base64. Utile pour les petites icônes que vous souhaitez conserver en CSS au lieu de fichiers d'actifs séparés.
ConceptionCSSSVGFront-end
Accès rapide:Calculateur de rapport d’aspect
Ajouter cet outil aux favoris
Aucun mode de stockage des favoris n’a été sélectionné.
Actions rapides
Copiez l’URL de cet outil ou ouvrez la feuille de partage du système sur un appareil compatible.
设计配色
SVG vers arrière-plan CSS
1. Raw SVG Code
3. Live Render Background Preview
-
等待输入 SVG。
Cas d’usage
- Insérez une petite icône Figma dans le composant CSS sans fichier d'actifs séparé
Mode d’emploi
- Collez le balisage SVG complet à gauche ; examinez la sortie d'une ligne échappée et l'aperçu en direct sur la droite
Exemples d’entrée et de sortie
FAQ
L'encodage Base64 ou URI est-il meilleur ?
L'encodage URI (sans Base64) est généralement plus petit après l'échappement et reste plus lisible dans DevTools.
Outils
Outils associés
Poursuivez avec un autre outil traduit pour une tâche proche.
Calculateur de rapport d’aspect
Calculateur de rapport d’aspect en ligne
Verrouillez un rapport puis calculez la largeur ou la hauteur correspondante. Le traitement s’effectue directement dans votre navigateur afin que vos données restent sur la page.
Ratio Taille Conception