Choisissez un générateur, réglez les contrôles, regardez l’aperçu se redessiner, puis livrez la ressource dans le format dont votre projet a besoin — c’est tout le cycle du Générateur SVG. Dix-neuf générateurs couvrent les ressources les plus utiles aux concepteurs web : motifs d’arrière-plan sans couture, formes organiques de héros, séparateurs de vagues superposées, dégradés mesh et granuleux, et ressources UI prêtes à l’emploi, des placeholders aux chargeurs animés. Tout est produit par un petit moteur pur qui vit sur la page, tout est déterministe quand vous fixez une graine, et rien n’est envoyé sur un serveur.
Quatre familles, dix-neuf générateurs
Motifs — les mosaïques sans couture passent par l’élément <pattern> de SVG avec patternUnits="userSpaceOnUse" : points, grilles, rayures, zigzags, hachures croisées, nids d’abeille hexagonaux, nuage de triangles low-poly et le classique quadrillage de cercles entrelacés. Réglez la taille du motif, l’opacité du premier plan, l’épaisseur du trait et la rotation : la mosaïque reste sans couture à toutes les combinaisons. Formes génèrent les indispensables des visuels de héros : le blob organique façon blobmaker (courbes quadratiques passant par des points jitterés sur un cercle), les étoiles à nombre de branches et rayon interne réglables, les rayons de soleil avec variation de longueur par branche, et les vagues simples ou superposées interpolées entre deux couleurs — lissées par Catmull-Rom, avec un débordement d’un pixel pour que les raccords ne montrent jamais de couture.
Dégradés et textures offrent les créateurs de look modernes : un dégradé linéaire ou radial multi-stops avec angle réglable, l’approximation du dégradé mesh (cercles de couleurs floutés composés à travers un filtre sRGB — exactement la technique des outils de design, puisque le <mesh> de SVG 2 n’est implémenté dans aucun navigateur), et le dégradé granuleux — une chaîne de bruit feTurbulence en quatre étapes, avec contrôles de mode de fusion. Ressources UI complètent l’ensemble : placeholders cotés avec lignes croisées et libellé centré, avatars identicon symétriques (l’algorithme GitHub à grille miroir), et spinners animés — anneau, points ou barres — en SMIL, qui s’anime encore dans tous les navigateurs actuels, y compris dans les balises <img> et les arrière-plans CSS.
Un aléatoire déterministe, fiable
Chaque générateur stochastique tourne sur un PRNG mulberry32 avec graine. Fixez la graine et la sortie est identique à l’octet près sur toutes les machines, pour toujours — exactement ce qu’il faut quand un coéquipier rouvre votre lien de partage ou quand un build régénère une ressource. Appuyez sur Aléatoire pour une graine fraîche, ou tapez un nombre et explorez le voisinage d’une forme qui vous plaît presque. La graine voyage dans le lien de partage, avec tous les autres contrôles, dans le fragment d’URL.
Un espace de travail pensé pour l’exploration
La bibliothèque de générateurs est visuelle : dix-neuf cartes, groupées par famille, chacune portant une vignette rendue par le même moteur que l’aperçu — vous choisissez un rendu, pas un nom. Les cartes sont de vrais boutons avec navigation au clavier par flèches, et chaque rangée de famille défile horizontalement. Douze palettes sélectionnées se trouvent en dessous : un clic recolore fond, premier plan et accent d’un coup, et une couleur personnalisée désélectionne simplement la pastille. Pour les générateurs granulés, une bande de variantes à côté de l’aperçu montre six graines voisines en vignettes — cliquez pour l’adopter, et la fenêtre avance, donnant une direction à l’espace des graines.
Les rendus à comparer ou garder se enregistrent dans une petite galerie (jusqu’à douze, conservée dans ce navigateur uniquement) et se restaurent d’un clic. L’aperçu s’est doté d’une barre d’outils : surfaces commutables (damier, clair, sombre), zoom ajusté ou 1:1 avec une échelle de paliers et ctrl-roulette, et plein écran pour examiner de près. Les préréglages de canevas accueillent les tailles sociales — Open Graph 1200 × 630, Full HD 1920 × 1080, carré HD 1080 × 1080 et icône 256 × 256 — plus une permutation largeur/hauteur en un clic, et un bouton Surprenez-moi qui relance générateur, palette et graine d’un coup.
Exportez au format dont vous avez besoin
Le panneau de code affiche le document en direct, indenté ou minifié avec les réglages sûrs de SVGO v4 : nombres arrondis et zéros non significatifs supprimés, couleurs hexadécimales raccourcies, aucun attribut de présentation par défaut émis, et viewBox plus les métadonnées d’accessibilité toujours conservés. Copiez l’une ou l’autre forme en balisage propre. Au-delà du SVG brut, la matrice d’export vous donne une data URI au schéma d’encodage minimal (plus petite que le base64, amie de gzip), une data URI base64 pour les contextes anciens, un extrait CSS prêt à coller avec le bon background-size pour les motifs en mosaïque ou les couvertures pleine page, et un composant React JSX avec le mapping exact de SVGR — stroke-width devient strokeWidth, class devient className, les chaînes style deviennent des objets style.
L’export PNG rastérise à 1×, 2× ou 3× via l’API canvas, entièrement dans votre navigateur, avec des dimensions explicites pour que Firefox et Safari dimensionnent correctement le rendu. Le bouton d’arrière-plan transparent exporte des PNG avec une vraie alpha — et comme le moteur n’émet jamais de <foreignObject>, le canvas n’est jamais marqué.
Les détails qui comptent pour les concepteurs
L’aperçu se pose sur une surface damier, claire ou sombre commutable, pour vérifier la transparence et le contraste en mode sombre avant la livraison. Le bouton responsive retire les width/height fixes et garde le viewBox, produisant l’intégration fluide qui s’étire avec son conteneur. Le champ texte alternatif devient un véritable élément <title> dans le document, et la racine porte role="img" — les graphiques générés arrivent dans votre balisage déjà accessibles. Les préréglages couvrent 3:2, 16:9, 1:1, 4:3 et 9:16, avec un mode personnalisé pour des dimensions exactes de 16 à 4000 pixels.
Vos réglages persistent dans localStorage entre les visites, les liens de partage portent l’état complet dans le fragment d’URL (que les navigateurs n’envoient jamais aux serveurs), et Mod/Ctrl + Entrée régénère depuis n’importe où dans l’outil.
Questions fréquentes
Est-ce encore un éditeur « dessiner à la souris » ? Non — c’est un générateur paramétrique. Vous décrivez la ressource avec des contrôles et une graine ; le moteur émet un SVG propre et minimal. Il se marie naturellement avec l’édition à la main : copiez le balisage et continuez dans votre éditeur.
Pourquoi faire confiance à la sortie minifiée ? L’optimiseur reprend les décisions du préréglage par défaut de SVGO v4, appliquées à la génération : nombres compacts (0.5 et non 0.500), couleurs raccourcies, pas d’attributs redondants, et jamais de suppression de viewBox ou <title> — les deux optimisations que SVGO lui-même a désactivées par défaut parce qu’elles abîment l’extensibilité et l’accessibilité.
Puis-je éditer le SVG généré ? Oui — copiez la forme indentée dans n’importe quel éditeur. La sortie est volontairement lisible : indentation de deux espaces, un élément par ligne, ids dérivés de la graine.
Les spinners animés fonctionnent-ils en fichiers ? Oui. L’animation SMIL fonctionne depuis des fichiers .svg chargés via <img>, background-image CSS et intégration en ligne. L’export PNG capture naturellement une image fixe.
Quelles sont les limites ? Dimensions de 16 à 4000 pixels, jusqu’à 48 rayons, 24 niveaux de complexité, 8 couches de vagues, 6 stops de dégradé. Le moteur lui-même s’exécute en microsecondes — aucune attente.
Quelle différence entre Aléatoire, variantes et Surprenez-moi ? Aléatoire tire une nouvelle graine avec le générateur et la palette actuels. La bande de variantes montre six graines voisines nommées, à adopter délibérément. Surprenez-moi relance générateur, palette et graine ensemble — un nouveau point de départ plutôt qu’un coup de pouce.
Où vivent les designs enregistrés ? Dans le localStorage de votre navigateur, douze au maximum, du plus récent au plus ancien. Ils ne quittent jamais l’appareil et n’entrent jamais dans les liens de partage — une restauration réapplique son état complet à l’outil.