Guide pratique / source SVG
Comment créer un motif continu SVG.
Un motif continu est une petite tuile dont les bords opposés se prolongent l'un dans l'autre sans rupture visible. Le défi pratique n'est pas de dessiner un carré attrayant, mais de faire en sorte que ce carré produise un champ voulu à toutes les échelles utiles.
Flux de travail en sept étapes
Validez la répétition avant d'affiner la surface.
Begin with one repeatable idea
Choose a motif with a clear rhythm: dots, arcs, stripes, waves, a grid, or a modular shape system. A complicated tile is not automatically a better repeat. Start with the smallest unit that carries the visual idea.
Expose the tile boundaries
Work in a preview that shows neighboring copies. Inspect the top against the bottom and the left against the right. Shapes that cross one edge must continue from the opposite edge at the same position, scale, and direction.
Test more than one scale
A repeat can appear seamless while zoomed in but reveal bands, columns, or accidental empty channels across a larger field. Compare a close tile view with a composition containing many repetitions before deciding that the rhythm is balanced.
Tune spacing before decoration
Set the repeat size, gaps, offsets, padding, rotation, and crop before adding grain or subtle color effects. Structural spacing is easier to judge when the shapes and boundaries remain clear.
Assign color roles
Treat colors as background, ink, foreground, and accent rather than unrelated swatches. When importing a palette, use perceptual closest-color mapping first, then explore wider alternatives while preserving tonal contrast.
Check the destination context
Place representative text, interface controls, or product imagery above the pattern when it will become a background. Reduce density, saturation, contrast, or pattern weight if the surface competes with the content.
Export the right source
Keep SVG when scale, editability, and crisp geometry matter. Render PNG for transparency, WebP or JPEG for an opaque web asset, and preview the final dimensions and compression before download.
Liste de contrôle pour motifs continus
- Opposite tile edges continue at exactly the same coordinate.
- The pattern has been inspected as both a single tile and a large field.
- No accidental horizontal, vertical, or diagonal channel dominates the repeat.
- Color roles remain distinguishable at the final size.
- Foreground content stays readable when the pattern is a background.
- The exported file matches the previewed dimensions and format.
Échecs courants de répétition
Une jointure visible : une forme traversant le bord ne reprend pas de l'autre côté, ou une exportation raster ajoute un pixel de bord non voulu.
Une bande accidentelle : des espaces vides ou des accents répétés s'alignent en une bande plus marquée que le motif voulu.
Un problème d'échelle : la tuile paraît équilibrée seule mais devient trop dense, trop clairsemée ou visuellement bruyante sur la surface finale.
Aplatir trop tôt : Exporter un raster avant que l'espacement, la palette et la géométrie ne soient fixés rend chaque correction ultérieure plus coûteuse.
Choix de livraison
Exportez la tuile lorsque la destination peut la répéter ; exportez la composition lorsqu'elle ne le peut pas.
Une tuile SVG réutilisable est généralement la source la plus flexible : elle reste nette, peut rester légère et peut être recolorée ou modifiée. C'est le bon livrable lorsque un développeur, un éditeur vectoriel ou un système de design contrôlera la manière dont la répétition occupe une zone plus grande.
Un SVG composé ou une image rendue convient lorsque le système récepteur attend une unique toile fixe. Utilisez l'aperçu d'exportation pour vérifier le recadrage, les dimensions, le fond et l'échelle du motif. Le préréglage Web est un point de départ sûr pour le format raster et la compression, mais le choix final doit suivre la destination plutôt qu'une règle universelle.