Quand on se lance dans un design de background avec motifs en diagonale, on utilise habituellement nos connaissances en trigonométrie (pour des motifs (patterns) qui se répètent à l’intérieur d’un carré et se suivent sans rupture) ou bien des dégradés linéaires CSS. Ces deux méthodes ont leurs limites et leurs complications, que résout le pattern SVG.

Tuiles SVG

Un motif SVG est exactement ce que son nom indique : une surface qui comporte des informations de tracé, lesquelles sont ensuite reprises sur une surface plus large — un peu comme un carrelage à partir d’un carreau.

Dans la plupart des cas, il est plus facile de dessiner le motif d’abord, c’est à dire de créer de SVG de l’intérieur. Le template de base est le suivant :

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
  <defs>
    <pattern id="pinstripe" patternUnits="userSpaceOnUse" width="50" height="50">
      <line x1="25" y1="0" x2="25" y2="50" stroke="goldenrod" stroke-width="25" />
    </pattern>
  </defs>
</svg>

Plusieurs choses sont à noter ici :

1. Le SVG ne comporte pas de viewBox mais utilise width et height à la place, les deux attributs ayant pour valeur 100%.
2. Le <pattern> a ses propres width et height. Le patternUnits="userSpaceOnUse" signifie que ces limites sont utilisées à l’intérieur du motif lui-même : elles deviennent les limites du monde occupé par le motif.
3. Le <pattern> est défini à l’intérieur d’un élément <defs> et il faut se rappeler que les <defs> ne sont pas affichés tant qu’ils ne sont pas référencés. C’est pourquoi il peut être préférable de dessiner votre motif SVG dans un autre document, comme un dessin vectoriel normal, idéalement à l’intérieur d’une viewBox de mêmes dimensions que le pattern (50 × 50 dans notre cas), ce qui vous permet de visualiser les composants du motif — et de les modifier le cas échéant — avant de les placer à l’intérieur du contexte du <pattern> lui-même.
4. Dans notre exemple, le motif est constitué d’une ligne verticale qui occupe exactement la moitié de la surface du motif.

Nous n’avons pas tout à fait terminé. Pour voir le résultat, notre motif doit être utilisé pour remplir un élément SVG. Un rectangle est ce qui paraît le plus logique :

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
  <defs>
    <pattern id="pinstripe" patternUnits="userSpaceOnUse" width="50" height="50">
      <line x1="25" y1="0" x2="25" y2="50" stroke="goldenrod" stroke-width="25" />
    </pattern>
  </defs>
  <rect width="100%" height="100%" fill="url(#pinstripe)" />
</svg>

Le <rect> occupe tout l’espace du SVG. Peu importe qu’il soit déclaré avant ou après l’élément <defs> : le fill trouvera l’id du motif de toute façon :

Sauvegardé sous le nom pinstripe.svg, le résultat est appliqué comme image de background à une page HTML, de la même façon qu’habituellement :

body { background-color: darkblue; background-image: url(’pinstripe.svg’); }

Le motif se reproduit sur toute la page. Arrivé ici, vous pourriez vous dire “eh, mais on peut faire la même chose avec moins de markup” et en effet c’est que nous avons vu dans l’article sur Backgrounds SVG : les rayures. Mais c’est ici que ça devient intéressant. Du fait que <pattern> est un petit monde en soi, nous pouvons faire ce que nous voulons avec lui et voir ces changements appliqués dans le contexte plus large de la page. Revenons à pinstripes.svg et modifions la balise <pattern> :

<pattern id="pinstripe" patternTransform="rotate(45)" patternUnits="userSpaceOnUse" width="50" height="50">

Sauvegardons le fichier, on rafraîchit la page HTML et on voit maintenant que notre motif de background est à 45°, sans que nous ayons besoin de rien faire d’autre.

La rotation peut prendre n’importe quelle valeur avec le même résultat :

<pattern id="pinstripe" patternTransform="rotate(33)" patternUnits="userSpaceOnUse" width="50" height="50">

Là encore, le tuilage est parfait. Vous voulez des lignes plus fines ? Il suffit de diminuer le stroke-width sur l’élément line. Moins de lignes sur la page ? Ajoutez une déclaration background-size à votre CSS.

Voyez aussi patternTransform dans MDN.

Conclusion

Lorsque nous comprenons les bases des motifs SVG, c’est un monde de créativité qui s’ouvre : dans vos backgrounds, vous pouvez superposer des motifs multiples, créer des tuilages parfait à partir de formes vectorielles. J’en montrerai quelques-uns dans les prochains articles.

Tous mes remerciements à Amelia Bellamy-Royds qui a attiré mon attention sur cette technique et dont j’ai eu plaisir à lire et critiquer les livres récemment. C’est dans ses ouvrages que j’ai trouvé l’inspiration pour cet article.