Comment utiliser les motifs SVG comme arrière-plan

Les modèles SVG offrent une approche plus souple pour répéter une image d'arrière-plan sur une page Web que la mosaïque CSS. Voyons pourquoi et comment vous pouvez les utiliser.

Ce que vous apprendrez

Ce didacticiel est disponible sous forme vidéo et textuelle. Voici un aperçu de ce que vous allez apprendre:

1. Nous commencerons par examiner la méthode plus courante de la mosaïque CSS..
2. Ensuite, nous allons créer quelques modèles SVG, en apprenant la syntaxe appropriée au fur et à mesure..
3. Nous allons comparer les deux approches et discuter des avantages et des inconvénients.
4. Ensuite, nous allons examiner quelques outils que vous pouvez utiliser pour créer des motifs SVG..
5. Enfin, nous vérifierons la prise en charge du navigateur par SVG.

Regarder le screencast

1. Mosaïque CSS

Commençons par vérifier la mosaïque CSS - la méthode plus traditionnelle de répétition d'une image pour un arrière-plan. L’idée est simple: nous passons une URL à la Contexte propriété de l'élément que nous voulons couvrir. L'URL pointe vers un fichier image, dans ce cas un fichier PNG. Par défaut notre image se répètera le long des deux axes.

body background: url ("cuadros.png"); 

Voici à quoi ça ressemble:

2. Modèles SVG

Jetons maintenant un coup d'oeil aux motifs SVG - quelque chose qui, lorsqu'il est rencontré pour la première fois, est un peu plus difficile à comprendre. Nous allons commencer par coder à la main un exemple. 

SVG à codage manuel

Pour vous rappeler comment coder à la main toutes les différentes parties d'un fichier SVG, ces deux tutoriels pour débutants de Kezz Bracey sont vraiment utiles:

Commencer avec un SVG

Pour commencer, nous allons créer un élément svg, en lui donnant une hauteur et une largeur de 100%, de sorte qu'il occupe le conteneur dans lequel nous le plaçons..

Créer un modèle nous devons le placer dans le defs (définitions) du svg, comme ceci:

Ajoutons maintenant quelques attributs à cet élément de modèle. Nous lui attribuerons un identifiant afin de pouvoir le référencer ultérieurement, puis nous spécifierons les coordonnées X et Y de départ, les valeurs de largeur et de hauteur et indiquerons que patternUnits sont userSpaceOnUse (cela définit le système de coordonnées, sur lequel vous pouvez en savoir plus sur MDN):

Une fois ces paramètres configurés, nous devons maintenant définir l’image à répéter. Créons un cercle de base:

Aucun motif ne sera encore visible, mais c'est parce que nous l'avons défini sans réellement appliquer à n'importe quoi. Changeons cela en l'appliquant à un en dehors de notre .

Surtout, vous verrez le remplir attribut (qui peut généralement être une valeur de couleur ou un nom) pointe vers une URL contenant l'ID de notre modèle nouvellement défini: fill = "url (# polka-dots)".

Découvrez la démo ci-dessous:

Un modèle SVG plus complexe

Pour un exemple plus complexe, nous allons laisser le codage manuel et générer un motif à l'aide d'un outil tiers. Nous utiliserons heropatterns.com, un site Web permettant de sélectionner des modèles SVG prédéfinis, de modifier leurs couleurs et leurs attributs, puis de copier le code généré..

Je vais utiliser le motif de puzzle:

Au lieu de copier l'intégralité du CSS généré, je vais simplement copier le d = "" paramètre, qui est le chemin réel tracé.

Le code svg que nous avons mis en place sera presque exactement le même que notre exemple précédent. L'identifiant dans le sera différent bien sûr, et nous lui donnerons des dimensions légèrement différentes en fonction de ce qui est utilisé sur heropatterns.

Alors, où, dans notre dernier exemple, nous avons défini un , cette fois on définit un . Nous lui donnons une couleur de remplissage, puis nous collons le chemin que nous avons copié il y a un instant. Voici ce que cela nous donne:

3. CSS Tiling Vs. Patterns SVG

Pros professionnels de carrelage CSS:

• Plus facile à utiliser, certainement pour les débutants
• Bénéficie d'une large prise en charge du navigateur

Cons Contre-mosaïque CSS:

• Utilisé avec des bitmaps, il n'est pas évolutif
• Faible performance
• Plus difficile à personnaliser
• Limité aux répétitions rectangulaires

Pros Pro modèle SVG:

• Poids léger
• Personnaliser à partir de CSS
• Évolutif
• Capable de créer des motifs complexes

Pattern Contre le motif SVG:

• Relativement difficile à utiliser
• Prise en charge de navigateur non universel

4. Outils de modèle SVG

Jetez un coup d’œil à ces quatre ressources, qui peuvent être très utiles pour générer du code réel et des idées!

• heropatterns.com
• Galerie de modèles SVG
• Geopattern
• thepatternlibrary.com

5. Support du navigateur

SVG est une technologie largement prise en charge, même dans les navigateurs plus anciens tels que IE9. Certaines fonctionnalités de SVG, cependant, ne bénéficient pas d’une telle prise en charge, et il n’ya vraiment pas beaucoup d’informations disponibles pour propriétés (telles que patternUnits, patternContentUnits, patternTransform etc.). Vous trouverez ci-dessous des liens utiles, y compris la documentation de Mozilla. Ils vous donneront une idée des informations actuellement disponibles..

D'après mes propres tests, je peux vous dire que les navigateurs modernes sous Windows et Mac OS traitaient tous très bien les modèles SVG. Même jusqu'à IE11.

Conclusion

Résumons les points clés de ce tutoriel.

• Les modèles SVG peuvent être utilisés pour créer des arrière-plans répétables.
• Ils offrent une alternative viable et plus personnalisable au carrelage CSS.
• Ils ont une syntaxe assez simple (si détaillée). Définissez votre modèle dans le defs, assurez-vous qu'il a un ID, puis référencez cet ID dans la forme de votre choix.
• Il existe de nombreux avantages à utiliser les modèles SVG, comme nous l'avons expliqué plus haut..

Apprendre encore plus

• Comment manipuler le code SVG par Kezz Bracey
• Fenêtre SVG et viewBox (pour les débutants complets) de Kezz Bracey
• Modèles SVG sur les astuces CSS
  
• Prise en charge du navigateur SVG
• Modèles Web MDN Web Docs
•  MDN Web Docs