Arrière-plan CSS
Gratuit, sans inscription, fonctionne dans votre navigateur.
Le même SVG, encodé en pourcentage dans une URI de données de `background-image`. À utiliser quand vous ne pouvez pas ajouter d'élément à la page et devez décorer un élément existant — une section, une carte, un en-tête dont vous ne maîtrisez pas le balisage.
Un export Arrière-plan CSS, réduit aux premières lignes
.shape {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M100 38L153.69 69L153.69 131L100 162L46.31 131L46.31 69Z' fill='%234f46e5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}Ce qu'il faut savoir
- Aucun élément supplémentaire et aucune requête réseau : la forme voyage dans la feuille de style.
- Encodée en pourcentage plutôt qu'en base64, ce qui est environ un tiers plus léger à image égale.
- Chaque `#` est encodé, et c'est la différence entre un arrière-plan qui se peint et un qui, silencieusement, ne se peint pas.
- Plus lourde que le SVG brut, parce que l'échappement coûte trois caractères pour chacun qu'il remplace.
Compatibilité des navigateurs
Universelle. Les URI de données dans `background-image` fonctionnent partout. Le seul piège de compatibilité est l'encodage, pas la prise en charge — et il est traité dans la sortie plutôt que laissé à votre charge.
Taille sur l'ensemble des préréglages
Tous les préréglages que ce format peut exprimer, mesurés tels que le générateur les émet. Le plus léger est Hexagone à 312 octets ; le plus lourd est Vagues superposées à 1 071 octets. C'est le nombre de points qui fait la différence — chaque point supplémentaire ajoute un segment cubique entier de coordonnées.
| Format | Taille |
|---|---|
| Hexagone | 312 B |
| Cristal | 317 B |
| Gemme facettée | 343 B |
| Triangle arrondi | 378 B |
| Pics de montagne | 392 B |
| Balayage | 407 B |
| Zigzag net | 425 B |
| Vague profonde | 443 B |
| Galet | 455 B |
| Bord de nuage | 456 B |
| Arches découpées | 480 B |
| Vague douce | 483 B |
| Blob doux | 491 B |
| Marches | 519 B |
| Festons | 543 B |
| Blob organique | 563 B |
| Étincelle | 569 B |
| Vague organique | 639 B |
| Étoile | 712 B |
| Vague de pied de page | 718 B |
| Fleur | 718 B |
| Bulle | 720 B |
| Bord pixelisé | 740 B |
| Éclaboussure | 802 B |
| Ondulation | 816 B |
| Vagues superposées | 1 071 B |
Plus en détail
C'est l'export qui comporte un vrai piège. Un `#` non encodé dans une URI de données met fin à l'URL : le navigateur traite tout ce qui suit comme un identifiant de fragment, le SVG est malformé, et l'arrière-plan n'apparaît tout simplement pas — sans erreur en console ni entrée réseau à rechercher. Comme chaque couleur du balisage est un littéral hexadécimal, le tout premier remplissage tronque l'ensemble. Certains générateurs esquivent le problème en repliant sur du base64, ce qui est correct mais inutilement plus lourd. Ici le `%` est échappé en premier et le `#` juste après, seul ordre qui fonctionne.
Questions
Quelles formes fonctionnent en Arrière-plan CSS ?
Ce format couvre Vague, Blob. C'est une contrainte réelle et non une limite de cet outil : lorsqu'un générateur manque à cette liste, le format est véritablement incapable de l'exprimer, et le proposer quand même vous remettrait quelque chose qui dessine silencieusement la mauvaise forme.
Quelle taille fait un export Arrière-plan CSS ?
Entre 312 et 1 071 octets sur les 26 préréglages qui le prennent en charge. Moins de points est le levier qui compte ; la douceur et la couleur ne coûtent rien.
Puis-je le modifier à la main ensuite ?
Oui. La sortie est du texte brut sans commentaire de générateur, sans balisage identifiant et sans lien de retour vers ce site. Changez les couleurs, renommez la classe, ou collez le tracé dans votre propre SVG — rien en aval ne dépend de son état d'origine.
Chaque chiffre et chaque forme de cette page ont été produits en exécutant le générateur au moment de la compilation : ils décrivent donc l'outil que vous vous apprêtez à utiliser, et non une version qui a existé un jour.