SVG
Gratuit, sans inscription, fonctionne dans votre navigateur.
La version simple : un élément `<svg>` avec un tracé par couche. Collez-le dans votre balisage, ou téléchargez-le en fichier et traitez-le comme n'importe quelle ressource. C'est l'export à utiliser quand vous pouvez ajouter un élément à la page.
Un export SVG, réduit aux premières lignes
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path d="M100 38L153.69 69L153.69 131L100 162L46.31 131L46.31 69Z" fill="#4f46e5"/></svg>Ce qu'il faut savoir
- Fonctionne partout, sans réserve de compatibilité qui vaille la peine d'être mentionnée.
- Chaque couche est un `<path>` distinct : vous pouvez les restyler individuellement après collage.
- Les vagues portent `preserveAspectRatio="none"` pour s'étirer à toute largeur ; les blobs gardent leurs proportions.
- Aucun commentaire de générateur, aucun balisage identifiant, aucun lien de retour vers ce site.
Compatibilité des navigateurs
Universelle. SVG est pris en charge dans tous les navigateurs encore testés depuis bien plus d'une décennie, et rien dans cette sortie n'utilise une fonctionnalité récente — ce sont des tracés et des remplissages.
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 à 151 octets ; le plus lourd est Vagues superposées à 898 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 | 151 B |
| Cristal | 156 B |
| Gemme facettée | 182 B |
| Triangle arrondi | 217 B |
| Pics de montagne | 231 B |
| Balayage | 246 B |
| Zigzag net | 264 B |
| Vague profonde | 282 B |
| Galet | 294 B |
| Bord de nuage | 295 B |
| Arches découpées | 319 B |
| Vague douce | 322 B |
| Blob doux | 330 B |
| Marches | 358 B |
| Festons | 382 B |
| Blob organique | 402 B |
| Étincelle | 408 B |
| Vague organique | 478 B |
| Vague de pied de page | 551 B |
| Étoile | 551 B |
| Fleur | 557 B |
| Bulle | 559 B |
| Bord pixelisé | 579 B |
| Éclaboussure | 641 B |
| Ondulation | 655 B |
| Vagues superposées | 898 B |
Plus en détail
Le seul attribut qui mérite d'être compris est `preserveAspectRatio`. Sur une vague il vaut `none`, ce qui laisse la forme s'étirer horizontalement jusqu'à la largeur de son conteneur — c'est ce qui permet à un même séparateur de fonctionner sur un téléphone et sur un écran large sans bandes. Sur un blob on n'y touche pas, parce qu'un blob étiré aux proportions d'un conteneur n'est qu'une ellipse avec des étapes en plus.
Questions
Quelles formes fonctionnent en SVG ?
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 SVG ?
Entre 151 et 898 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.