Backgrounds SVG : les rayures

Dans la continuité des articles sur les bases de SVG, Dudley Storey commence une série sur les motifs et les backgrounds. SVG permet de réaliser des choses impossibles en CSS.

Par

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 :

image

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,PHN2ZyB2aWV3Qm94PSIwIDAgMiAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaW5ZTWluIG1lZXQiPjxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjIiIGZpbGw9ImhzbGEoMzIsIDQyJSwgNTAlLCAuNSkiIC8+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 :

image

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>

Ci-dessous, voici une variation sur cette technique. Elle intègre stroke-dasharray pour multiplier les possibilités de décoration : c’est un bon exemple de ce qu’il est impossible de faire avec les dégradés CSS.

See the Pen Simple SVG Stripes & Tartans by Dudley Storey (@dudleystorey) on CodePen.

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.

Dans la même série :

Backgrounds SVG, les rayures
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
Diagonales et motifs SVG en background


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.