Générateur de motifs SVG

Qu'est-ce que Générateur de motifs SVG ?

Le Générateur de motifs SVG est un outil gratuit dans le navigateur pour les web designers et les développeurs front-end qui ont besoin d'un fond léger et répétable sans ouvrir d'éditeur graphique. Vous choisissez un motif dans un menu déroulant (points, grille, rayures, diagonale, damier), définissez une couleur de premier plan pour les formes et une couleur d'arrière-plan pour la tuile, et utilisez les champs numériques d'échelle et d'épaisseur pour contrôler la taille de la tuile et l'épaisseur du trait. Le résultat est une seule tuile dessinée en SVG net, conçue pour se répéter sans couture, de sorte que les fichiers restent minuscules et que le motif se met à l'échelle sans devenir flou. Utilisez le sélecteur de Format pour basculer la sortie copiable entre le balisage SVG brut et une règle CSS background-image, puis copiez-la ou téléchargez le fichier .svg pour des sites, des cartes, des sections d'en-tête et des maquettes d'interface.

Comment utiliser Générateur de motifs SVG

1. Choisissez un motif dans le menu déroulant : Points, Grille, Rayures, Diagonale ou Damier.
2. Saisissez ou choisissez une couleur de premier plan pour les formes et une couleur d'arrière-plan pour la tuile.
3. Réglez les champs numériques Échelle (taille de la tuile en pixels) et Épaisseur (rayon du point ou épaisseur de la ligne).
4. Ouvrez les Réglages et utilisez le sélecteur de Format pour basculer la sortie entre SVG et CSS.
5. Observez l'aperçu en direct répéter le motif, puis copiez le SVG ou le CSS, ou cliquez sur Télécharger pour enregistrer le fichier .svg.

Exemples

Questions fréquentes

Quels motifs puis-je générer ?

Cinq motifs répétables : points, grille, rayures, lignes diagonales et un damier. Chacun est dessiné comme une petite tuile SVG qui se répète sans couture, il reste donc net à n'importe quelle taille et le fichier demeure minuscule.

Que contrôlent l'Échelle et l'Épaisseur ?

L'échelle est la taille d'une tuile en pixels, qui définit l'écart entre les formes répétées. L'épaisseur est le rayon du point ou l'épaisseur de la ligne à l'intérieur de la tuile. L'épaisseur est automatiquement plafonnée par rapport à l'échelle pour que le motif ne remplisse jamais trop la tuile.

Quelle est la différence entre la sortie SVG et la sortie CSS ?

Le SVG vous donne le balisage brut pour un fichier .svg autonome ou un usage en ligne. Le CSS vous donne une règle background-image utilisant un data URI plus background-repeat: repeat, prête à coller dans une feuille de style. Utilisez le sélecteur de Format dans les Réglages pour basculer entre les deux.

Puis-je choisir les couleurs visuellement au lieu de saisir le HEX ?

Oui. Cliquez sur la pastille de couleur à côté du champ premier plan ou arrière-plan pour ouvrir le sélecteur de couleur natif de votre navigateur, ou saisissez directement une valeur HEX comme #4f86f7. L'aperçu et la sortie se mettent à jour au fur et à mesure de vos changements.

Mes couleurs ou fichiers sont-ils téléversés quelque part ?

Non. Le motif est construit entièrement dans votre navigateur sous forme de chaîne SVG, et le téléchargement est créé localement sous forme de Blob. Aucune couleur, aucun code ni fichier n'est jamais envoyé à un serveur, il fonctionne donc hors ligne et garde votre travail privé.