Indépendantes de la résolution, légères, faciles à éditer, les images vectorielles ont de nombreux avantages sur les dégradés css :

1. La syntaxe SVG pour les rayures est plus simple et moins verbeuse que celle des dégradés CSS.
2. Les backgrounds SVG sont mieux supportés par les navigateurs (SVG est compatible avec IE9 mais les dégradés CSS ne sont supportés qu’à partir de IE10).
3. On peut réaliser des backgrounds bien plus complexes avec SVG qu’avec CSS.

Mais pour être efficaces, les illustrations vectorielles doivent suivre quelques règles :

Règles générales

• Tout comme les backgrounds répétés en bitmap, vous avez seulement besoin d’une “tuile” ou d’un “carreau” pour réaliser un carrelage. Un seul <pattern> suffit pour construire l’ensemble.
• Votre fichier SVG doit être aussi petit, “léger” et éditable que possible : cela impliquera un peu de travail manuel.
• En général, il est bon de garder au moins une composante couleur de votre background dans votre CSS, pour une meilleure flexibilité.

Nous allons commencer par quelques exemples. Remarquez bien que je me suis concentré sur les backgrounds répétés, les backgrounds simples en SVG sont traités à peu près de la même façon que leurs équivalents en bitmap.

Rayures simples en SVG

Un effet de “rayures” simple n’est rien d’autre qu’une surface remplie à côté d’une surface vide, le tout répété à l’infini. Dans le cas de SVG, la manière la plus simple de réaliser cette surface pleine est d’utiliser un élément rectangle. Sauvegardez le code suivant dans un fichier stripe.svg :

<svg viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg"> <rect width="0.5" height="1" /> </svg>

Remarquez que viewBox ou les attributs équivalents width et height peuvent être utilisés pour dimensionner l’élément <svg> lorsqu’on crée des images de background.

Ce fichier SVG peut être appliqué au background d’une page web via :

//CSS
body { background-image: url(stripe.svg); }

Par défaut, le SVG s’étendra pour couvrir la surface entière de l’élément. Il en résultera une division de la page, moitié noire (le remplissage par défaut du rectangle SVG) et moitié blanche (la couleur de background par défaut de la page web, puisque toute surface non explicitement colorée en SVG est automatiquement transparente).

Pour que ce motif SVG se répète plus d’une fois, nous pouvons modifier la background-size dans notre déclaration CSS : une largeur x suivie d’une hauteur y.

 //CSS
body {
  background-image: url(stripe.svg);
  background-size: 20px 20px;
}

Ce qui donne :

Un aspect sympa et pratique de cette concision de notre illustration SVG c’est qu’elle est très simple à modifier. par exemple, pour la transformer de verticale en horizontale, il suffit de modifier background-size :

Rayures horizontales : body { background-size: 1px 10px; }
Rayures verticales : body { background-size: 10px 1px; }

Pour plus de versatilité, vous pouvez colorer les rayures grâce à rgba ou HSL et renvoyer la question du background-color de la page à CSS :

<svg viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg">
  <rect width="0.5" height="1" fill="hsla(32, 42%, 50%, .5)" />
</svg>

Le CSS :

body {
  background-image: url(stripe.svg);
  background-size: 20px 20px;
  background-color: #669;
}

Ce fichier SVG est suffisamment petit pour être inséré en ligne dans le CSS lui-même, ce qui évite une requête HTTP :

body {
  background-image: url(’data:image/svg+xml;utf8,<svg viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg"><rect width="0.5" height="1" fill="hsla(32, 42%, 50%, .5)" /></svg>’);
  background-size: 20px 20px;
}

Faites bien attention aux guillemets ! Ce SVG utilise des doubles guillemets en interne, ce qui signifie que nous devons utiliser des guillemets simples à l’extérieur pour éviter que notre navigateur s’embrouille.

Vous pouvez également encoder le fichier SVG en base64 et utiliser ce code dans le CSS :

body { background-image: url(’data:image/svg+xml;base64,
PHN2ZyB2aWV3Qm94PSIwIDAgMiAxIiB4bWxucz0iaHR0cDovL3d3dy53
My5vcmcvMjAwMC9zdmciIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaW5Z
TWluIG1lZXQiPjxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjIiIGZpbGw
9ImhzbGEoMzIsIDQyJSwgNTAlLCAuNSkiIC8+PC9zdmc+’); }

C’est évidemment une option, mais elle présente trois désavantages :

• La version Data URI occupe plus d’espace que la version SVG en ligne.
• Le fait de convertir l’image en base64 la rend non éditable. Pour faire un changement, il vous faudra retrouver le fichier SVG original, le modifier, le convertir en base64 et l’ajouter à votre CSS.
• le désencodage de base64 est plus lent sur les plateformes mobiles.

Toutefois, l’utilisation de base64 vous donne un peu plus de compatibilité navigateurs. Au final, c’est à vous de décider.

Séparer les lignes

Il est facile de rendre les lignes plus fines ou plus épaisses dans notre exemple, via `background-size`, mais une chose que cela ne changera pas c’est le *ratio* entre l’épaisseur des lignes et l’espace alentour. Pour changer cela, nous retournons à notre SVG et nous rendons notre rectangle plus large ou plus étroit :

<svg viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg">
  <rect width=".25" height="1" />
</svg>

Ce qui produit :

Réaliser des motifs plus complexes

Une fois les bases intégrées, il est aisé de réaliser des variations plus complexes de rayures horizontales et verticales en SVG. Par exemple, un motif guingan (Vichy) serait réalisé via un rectangle de ⅓ de large recouvrant un élément de ⅓ de hauteur.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <g fill="rgba(0,0,0,0.3)">
    <rect width="100" height="33" />
    <rect width="33" height="100" x="67" />
  </g>
</svg>

Les mêmes concepts peuvent être utilisés pour créer des plaids et des tartans, mais les plus complexes d’entre eux devraient plutôt utiliser la syntaxe <pattern> de SVG que nous pouvons retrouver dans l’article Diagonales et motifs SVG en background.