Diagonales et motifs SVG en background

Lorsque nous comprenons les bases des motifs SVG, c'est un monde de créativité qui s'ouvre. Après les bases de SVG, Dudley Storey nous montre comment créer des backgrounds en SVG.

Par

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" y="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" y="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.

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.

Dans la même série :

Les bases de SVG : Cercles et Ellipses
Les bases de SVG : Rectangles et Carrés
Les bases de SVG : Polygones
Les bases de SVG : Lignes simples et multiples
Backgrounds SVG : les rayures


Intéressé par SVG ? Retrouvez une liste des meilleurs articles et ressources du web.

Tous les articles sur SVG parus dans la Cascade.


Du même auteur dans La Cascade :

Image révélée au grattage avec SVG et CSS Blend Modes
Créer de superbes diagrammes avec SVG et CSS Blend Modes
Backgrounds Pop-Art avec SVG et CSS Blend Modes
Motifs SVG japonais
Contraste de texte automatique avec CSS Blend Modes
Backgrounds SVG, les rayures
Diagonales et motifs SVG en background
Les bases de SVG : Lignes simples et multiples
Les bases de SVG : Polygones
Les bases de SVG : Cercles et Ellipses
Les bases de SVG : Rectangles et Carrés
Brood X : Le principe des cigales en CSS
5 règles pour rendre SVG accessible
3 raisons d’utiliser HSL pour vos couleurs
Utiliser HSL pour vos couleurs
Effets vidéo HTML5 avec CSS Blend-Modes
Un carrousel responsif en pur CSS
Combiner CSS clip-path et Shapes
Appropriation culturelle : utiliser les collections des musées
Créer un player audio en HTML5 (3 articles)
Qu’est-ce qu’un élément remplacé ?
Utiliser CSS object-fit
Stores vénitiens 3D en CSS
CSS : Aider la veuve et l’orphelin
Toi seul : utiliser only-child de CSS
Créer un background vidéo fullscreen avec HTML5
Rendre un SVG responsif
La première variable CSS : currentColor
Empty, une pseudo-classe pas si vide
Les raccourcis HTML5


original paru le dans le blog de Dudley Storey, the new code.

Sur l’auteur : est enseignant, auteur, artisan et cycliste, il vit à Calgary, dans l’État de l’Alberta au Canada. Passionné par le web et le développement (mobile) qu’il enseigne depuis 15 ans, il est l’auteur de Pro CSS3 Animation, et publie régulièrement dans son blog demosthenes.info des articles sur HTML, CSS et SVG. On peut le suivre sur Twitter ou Google+.

Traduit avec l’aimable autorisation de l’auteur.
Copyright Dudley Storey © 2015.