Unités de motif SVG : garder les répétitions à la bonne taille

Pour garder constant l’espacement des répétitions d’un motif SVG lorsque tu changes les dimensions d’une forme, utilise patternUnits="userSpaceOnUse" et des valeurs numériques de largeur et de hauteur de tuile. Contrôle séparément le dessin dans cette tuile avec patternContentUnits ou un viewBox de motif.

Cette distinction compte lorsqu’un petit motif remplit un badge étroit et une bannière large. Tu peux vouloir davantage de copies dans la bannière, de plus grands espaces entre elles ou un motif étiré. Chaque cas relève d’un choix de coordonnées différent. Mettre à l’échelle tout le groupe de la bannière change encore le résultat.

Si le motif est déjà composé de tracés SVG, garde-les. La vectorisation intervient plus tôt, lorsque la seule source est une image matricielle.

Distinguer la tuile de son dessin

Un motif possède une tuile rectangulaire répétée et du contenu dessiné à l’intérieur. patternUnits contrôle les x, y, width et height de la tuile. patternContentUnits contrôle les coordonnées du contenu, sauf si le motif a un viewBox.

Avec objectBoundingBox, une largeur de .25 signifie un quart de la largeur de la boîte englobante de l’objet peint. Cela ne signifie pas un quart de la largeur du motif. Un rectangle de 120 unités de large reçoit une tuile de 30 unités ; un rectangle de 240 unités reçoit une tuile de 60 unités.

La valeur de contenu par défaut reste userSpaceOnUse. Changer seulement patternUnits peut donc modifier les espaces entre motifs en gardant chaque motif à la même taille. Définis les deux attributs délibérément au lieu de supposer qu’ils évoluent ensemble.

Comparer quatre versions d’une feuille

Nous avons dessiné les tracés de feuille de cet exemple et rendu le SVG dans un navigateur. Les deux rectangles cibles ont 80 unités de haut ; leurs largeurs sont 120 et 240. La capture ajoute des libellés et des fonds autour de ces formes originales. C’est une démonstration SVG, pas un résultat de conversion PerfectVector.

Lis les lignes de haut en bas :

1. Une tuile fixe de 40 × 40 produit trois colonnes dans le rectangle étroit et six dans le large. Les dimensions de la feuille restent inchangées.
2. Une largeur de tuile de .25 garde quatre colonnes dans les deux cibles. Le rectangle plus large a davantage d’espace entre les feuilles, car leurs coordonnées utilisent toujours les unités utilisateur.
3. Les coordonnées de contenu par boîte englobante étirent la feuille horizontalement lorsque la largeur cible double. Sa taille verticale reste identique, car la hauteur cible ne change pas.
4. Une tuile fixe de 40 × 40 avec viewBox="0 0 40 40" retrouve le résultat de la première ligne, même si patternContentUnits="objectBoundingBox" reste dans le balisage. Le viewBox du motif est prioritaire.

Ouvrir l’exemple complet

Enregistre ceci sous pattern-units.svg et ouvre-le directement dans un navigateur. Les quatre lignes utilisent les mêmes définitions que la figure, sans ses libellés ni ses fonds. Chaque paire de rectangles est placée dans des groupes translatés pour rendre leurs origines locales comparables.

<svg xmlns="http://www.w3.org/2000/svg" width="560" height="420" viewBox="0 0 560 420">
<defs>
  <pattern id="fixed" patternUnits="userSpaceOnUse" width="40" height="40">
    <path d="M8 24 Q8 6 30 8 Q30 26 8 24Z" fill="#127f70"/>
  </pattern>
  <pattern id="tile" patternUnits="objectBoundingBox" width=".25" height=".5">
    <path d="M8 24 Q8 6 30 8 Q30 26 8 24Z" fill="#127f70"/>
  </pattern>
  <pattern id="both" patternUnits="objectBoundingBox" patternContentUnits="objectBoundingBox" width=".25" height=".5">
    <path d="M.04 .30 Q.04 .08 .20 .10 Q.20 .33 .04 .30Z" fill="#127f70"/>
  </pattern>
  <pattern id="box" patternUnits="userSpaceOnUse" patternContentUnits="objectBoundingBox" width="40" height="40" viewBox="0 0 40 40">
    <path d="M8 24 Q8 6 30 8 Q30 26 8 24Z" fill="#127f70"/>
  </pattern>
</defs>
  <g transform="translate(20 20)"><rect width="120" height="80" fill="url(#fixed)"/></g>
  <g transform="translate(220 20)"><rect width="240" height="80" fill="url(#fixed)"/></g>
  <g transform="translate(20 120)"><rect width="120" height="80" fill="url(#tile)"/></g>
  <g transform="translate(220 120)"><rect width="240" height="80" fill="url(#tile)"/></g>
  <g transform="translate(20 220)"><rect width="120" height="80" fill="url(#both)"/></g>
  <g transform="translate(220 220)"><rect width="240" height="80" fill="url(#both)"/></g>
  <g transform="translate(20 320)"><rect width="120" height="80" fill="url(#box)"/></g>
  <g transform="translate(220 320)"><rect width="240" height="80" fill="url(#box)"/></g>
</svg>

Commence avec le motif fixed et change seulement la largeur du second rectangle. Examine ensuite tile et both avant de changer un tracé. Le choix de coordonnées reste ainsi distinct du dessin lui-même. Pour modifier plus largement les tracés et couleurs, utilise le guide d’édition d’un SVG.

Utiliser viewBox lorsque le motif a ses propres coordonnées

Un viewBox de motif permet à la feuille de garder une zone de dessin familière tandis que la tuile a une taille distincte. La spécification des motifs SVG ajuste cette zone dans la tuile avec viewBox et preserveAspectRatio.

Dans la dernière ligne, la tuile et le viewBox font tous deux 40 × 40 ; leurs rapports ne diffèrent donc pas. Si tu rends ensuite la tuile rectangulaire, le preserveAspectRatio="xMidYMid meet" par défaut garde les proportions du motif et centre la zone de dessin ajustée. preserveAspectRatio="none" permet des échelles horizontale et verticale indépendantes. Choisis-le seulement si la déformation est voulue.

Changer patternContentUnits ne corrigera pas la taille lorsqu’un viewBox de motif est présent : cet attribut est sans effet dans ce cas. Change les dimensions de la tuile, le viewBox ou sa règle de proportions selon la partie à modifier.

Un motif est utile lorsqu’une définition doit peindre un remplissage répété. Si tu as plutôt besoin de copies placées individuellement, les symboles SVG et instances use répondent plus directement à cette tâche.

Redimensionner le rectangle diffère de mettre son groupe à l’échelle

userSpaceOnUse fixe l’espacement en coordonnées utilisateur, pas en pixels écran permanents. Une transformation peut mettre ces coordonnées à l’échelle, y compris le remplissage par motif.

Nous avons aussi ouvert deux versions avec la définition fixed ci-dessus. Le premier rectangle avait width="240". Le second gardait width="120" dans un groupe avec transform="translate(20 120) scale(2 1)". Tous deux occupaient 240 unités écran dans ce document, mais le premier montrait six colonnes de feuilles et le rectangle transformé trois colonnes étirées horizontalement.

Utilise cette distinction pour diagnostiquer un dessin adaptatif :

• Pour révéler davantage de répétitions, agrandis la géométrie cible en gardant son échelle de coordonnées inchangée.
• Pour agrandir toute la composition, mets le groupe à l’échelle et attends-toi à ce que l’apparence du motif change aussi d’échelle.
• Si la mise en page change la taille affichée du SVG racine, examine sa correspondance viewBox avant d’accuser les attributs du motif.

La spécification du système de coordonnées SVG décrit les transformations des coordonnées utilisateur. Pour un décalage entre applications, vérifie d’abord les dimensions du document SVG ; les unités de motif seules ne peuvent pas établir une taille physique de sortie.

Préparer un motif personnalisé avant sa répétition

Si ton motif n’existe qu’en PNG ou JPG, PerfectVector peut reconstruire sa géométrie SVG pour la répétition. Convertis le motif en vecteurs, ouvre le résultat dans un éditeur et examine le contour, les petits espaces et les formes de fond indésirables avant de le placer dans un motif.

Garde un fichier maître SVG distinct pour ce motif. Construis la tuile autour d’une copie, puis teste une cible étroite et une large. Un dessin vectoriel existant peut passer directement à cette édition. Un symbole géométrique simple peut être plus rapide à redessiner à la main, tandis qu’une photographie peut mieux rester une image que devenir un ensemble complexe de tracés.

Un rendu navigateur n’établit pas que chaque application de conception préserve la définition du motif. Rouvre le fichier enregistré dans sa destination réelle et vérifie l’espacement des répétitions et la forme du motif. Un remplissage répété ne crée pas non plus des copies éditables indépendantes de chaque feuille visible. Le guide des fichiers SVG explique pourquoi la structure du document compte autant que son apparence.

Avant de transmettre le fichier, vérifie que chaque fill="url(#...)" pointe vers un identifiant de motif existant et unique, que la tuile a des dimensions positives et que le motif tient dans sa tuile prévue. Les motifs SVG rognent normalement le contenu aux limites de la tuile ; une feuille qui franchit un bord demande donc une conception volontaire de la répétition plutôt que de supposer que le débordement apparaîtra.

FAQ

Pourquoi l’espacement a-t-il changé alors que la feuille garde la même taille ? patternUnits contrôle les dimensions de la tuile, tandis que patternContentUnits contrôle les coordonnées du dessin. Une tuile relative à la boîte englobante avec du contenu en espace utilisateur par défaut peut changer d’espacement sans redimensionner la feuille.

Pourquoi patternContentUnits semble-t-il sans effet ? Cherche un viewBox sur le motif. Lorsqu’il est présent, il définit la correspondance de coordonnées du contenu et patternContentUnits n’a aucun effet.

userSpaceOnUse garde-t-il le motif à la même taille à l’écran ? Il garde les dimensions numériques de tuile dans le système de coordonnées utilisateur courant de la cible. Mettre un groupe à l’échelle ou changer la correspondance entre coordonnées et zone d’affichage du SVG racine peut toujours modifier la taille affichée du motif.

Sources

1. MDN — patternUnits — Définit les coordonnées géométriques de tuile et la valeur par défaut par boîte englobante.
2. MDN — patternContentUnits — Définit les coordonnées du contenu et la priorité du viewBox.
3. W3C — Motifs SVG — Explique l’ajustement des tuiles, le comportement des proportions et le rognage des motifs.
4. W3C — Systèmes de coordonnées SVG — Définit les transformations de coordonnées utilisateur derrière la mise à l’échelle de groupes.

Tu as un motif uniquement matriciel à réutiliser ? Transforme ton image en tracés SVG, examine le contour reconstruit et teste-le aux deux tailles cibles avant de créer la répétition finale.