# Générateur de motifs SVG

> Génère des points, des rayures et des motifs géométriques répétables.

[Open tool](https://www.toolcabana.com/fr/svg-pattern-generator) · [Design et CSS](https://www.toolcabana.com/fr/category/design-and-css)

Tool ID: svg-pattern-generator. Requested language: fr. Description language: fr. Complete guide translation: yes.

## Overview (en)

SVG pattern generator creates a repeating dots, diagonal stripes or grid pattern as an SVG file. Pick foreground and background colors, a tile spacing from 4 to 200 px, and a dot radius or stroke width from 1 to 50 px. The output is a 600 by 400 SVG built on a pattern element, shown as markup and downloadable as pattern.svg.

## Supported tasks (fr)

Génère des points, des rayures et des motifs géométriques répétables.

## Steps (fr)

1. Saisissez les valeurs demandées dans le panneau des paramètres.
2. Ajustez les paramètres de base, puis ouvrez le mode avancé pour les options d'export et de réglage fin. Vos paramètres personnalisés restent actifs une fois le panneau fermé.
3. Lancez le générateur de motifs SVG, vérifiez le résultat, puis utilisez les commandes de copie ou de téléchargement disponibles.

## Settings

- Motif (fr; key: pattern; type: select): points [fr], rayures [fr], grille [fr]
- Premier plan (fr; key: color; type: color)
- Arrière-plan (fr; key: background; type: color)
- Espacement (px) (fr; key: spacing; type: number); minimum: 4; maximum: 200
- Rayon des points / épaisseur du trait (px) (fr; key: thickness; type: number); minimum: 1; maximum: 50

## Limitations (fr)

Les images respectent la limite existante de 32 mégapixels du canevas. Jusqu'à 100 images sources sont autorisées lorsque c'est pris en charge. Le HTML collé est limité à 200 000 caractères ; les diagrammes Mermaid à 20 000 caractères et 300 lignes. La génération SVG et PNG nécessite un navigateur.

## Privacy and connections (fr)

Cette opération traite sa source dans votre navigateur. La copie et le téléchargement sont des actions explicites ; la saisie source n'est enregistrée ni dans un compte ni dans l'historique.

## Questions (fr)

### How do I use the SVG pattern as a CSS background?

Download pattern.svg and reference it with background-image in CSS, or paste the markup inline. The file is a 600 by 400 image, so the browser repeats that whole image; choose a spacing that divides 600 and 400 evenly, such as 20 or 40, for clean seams.

### Why do the stripes appear as diagonal lines?

The stripes pattern draws one line from the top-left to the bottom-right corner of each square tile, producing 45-degree diagonals. Spacing sets the tile size and the stroke value sets line thickness. For horizontal and vertical lines, choose the grid pattern.

### Can I make the pattern background transparent?

Not from the settings: each tile includes a rectangle filled with the background color you pick. For transparency, remove that rect element or give it a fill-opacity of 0 in the downloaded SVG markup.

### Où ma saisie est-elle traitée ?

Cette opération traite sa source dans votre navigateur. La copie et le téléchargement sont des actions explicites ; la saisie source n'est enregistrée ni dans un compte ni dans l'historique.

### Quelles sont les limites de saisie ?

Les images respectent la limite existante de 32 mégapixels du canevas. Jusqu'à 100 images sources sont autorisées lorsque c'est pris en charge. Le HTML collé est limité à 200 000 caractères ; les diagrammes Mermaid à 20 000 caractères et 300 lignes. La génération SVG et PNG nécessite un navigateur.

## Related tools

- [CSS clamp calculator](https://www.toolcabana.com/fr/css-clamp-calculator)
- [CSS grid layout generator](https://www.toolcabana.com/fr/css-grid-layout-generator)
- [CSS flexbox playground](https://www.toolcabana.com/fr/css-flexbox-playground)
- [CSS cubic Bezier editor](https://www.toolcabana.com/fr/css-cubic-bezier-editor)