Comment créer et gérer des sprites SVG

Le SVG gagne la course quand il s’agit de graphiques évolutifs sur le Web. Les concepteurs et les développeurs choisissent SVG au lieu des polices d'icônes, des images raster et des images-objets raster.

Les avantages de l'utilisation de SVG sont nombreux mais pour moi, cela se résume à l'évolutivité.

Utiliser SVG peut être aussi simple que de copier et coller le code exporté à partir d'un programme vectoriel. De là, le problème réside dans la livraison de ces graphiques de la manière la plus efficace.

Entrez les sprites SVG. Celles-ci fonctionnent dans un modèle similaire à celui des images-objets, mais la façon dont elles sont créées et incluses dans une page Web est très différente.

Pourquoi utiliser les sprites du tout?

Les sprites permettent d'augmenter la vitesse, de maintenir un flux de travail de développement cohérent et de créer des icônes beaucoup plus rapidement. Les images-objets SVG sont généralement créées à l'aide d'icônes de forme ou de forme similaire, tandis que les images à plus grande échelle sont des applications uniques.

Dans de nombreux cas, une bibliothèque d'icônes prendra de l'ampleur. L'ajout de nouvelles icônes doit être efficace et finalement facile. Les sprites SVG aident à en faire une réalité.

Exportation du code SVG

Les fichiers SVG peuvent être exportés depuis votre programme graphique vectoriel préféré. J'ai tendance à utiliser un mélange d'outils et j'ai constaté que tous avaient un excellent support pour l'exportation de fichiers SVG. Esquisser se distingue en particulier parce que vous pouvez sélectionner une icône ou un graphique et appuyez sur commande + c et avoir ce code SVG copié dans votre presse-papiers. Ensuite, vous pouvez vous diriger vers votre éditeur de code, coller le code et faire apparaître le graphique sous vos yeux dans le navigateur.

Optimiser SVG pour le Web

Malheureusement, si vous copiez et collez à partir de Sketch, vous pouvez constater que le code est sous-optimal et pourrait être mieux optimisé. Il existe des outils pour cela.

Si vous utilisez Sketch en particulier, consultez le SVGO Compressor plugin . Lorsque vous exportez des fichiers SVG, le plug-in les optimise automatiquement avant de sauvegarder le fichier.

Si vous n'utilisez pas Sketch, vérifiez la même fonctionnalité dans formulaire d'application ou si vous préférez les applications Web, Jake Archibald mettre ensemble pour vous .

Création manuelle de sprites SVG

Créer un sprite SVG peut être fait manuellement. Vous aurez besoin d'un programme de conception de vecteurs pouvant générer du code SVG. Pour cela, je vais utiliser Sketch et exporter quelques icônes sous forme de SVG.

Après avoir exporté les icônes et les avoir exécutées via le plug-in SVGO Compressor, il me reste les éléments suivants pour chaque icône. Notez qu'à ce stade, chaque icône est un fichier distinct:

Maintenant que nos SVG sont tous optimisés, nous pouvons commencer à créer le sprite en utilisant le code ci-dessus. Pour créer un sprite commence par l'entourage

Remarquez comment le SVG a un style d' affichage en ligne: aucun . Ceci est nécessaire pour utiliser correctement les sprites SVG. Même si les icônes ne rendront pas beaucoup d'espace sur la page. Pour éviter cet espace supplémentaire que le SVG crée, nous cachons le SVG avec CSS.

Simplement inclure le code des icônes ne suffira pas à ce stade. Nous devons utiliser un élément qui vous permettra d'intégrer le code SVG et de fournir son propre attribut spécifique viewBox, ce qui est important pour les icônes pouvant s'afficher à différentes largeurs et hauteurs.

Éléments définis à l'intérieur du L'élément ne peut être rendu au navigateur que s'il est référencé par le élément.

Le sprite final ressemble à l'extrait suivant:

Remarquez comment j'ai ajouté des attributs id à chaque élément de symbole. Ceci est important car lorsque vous référencez une icône spécifique dans l'image-objet, vous avez besoin d'une méthode unique pour la cibler. Notez également que chaque icône possède ses propres paramètres viewBox . Les deux premiers paramètres seront presque toujours "0 0"; les deux autres seront égales à la taille de l'icône que vous avez exportée.

Inclure une icône sur la page

Avec le sprite tout prêt, nous avons besoin d'un moyen d'inclure des icônes spécifiques sur une page. Pour ce faire, vous utiliserez le élément écrit comme ceci:

Sur votre page, vous devriez voir l’icône apparaître et c’est vraiment tout!

Automatiser les sprites SVG

Créer des sprites SVG en ligne n'est pas si difficile. Le problème réside dans le fait que de nombreux développeurs doivent créer des images-objets pour des centaines d’icônes ou plus pour des applications robustes. Créer quelque chose comme ça à la main pourrait prendre beaucoup de temps et être fastidieux. Les développeurs ont besoin d'un moyen pour automatiser le processus afin de ne pas perdre de temps à créer des sprites à la main.

Heureusement, il existe des outils pour une telle chose. Les gestionnaires de tâches tels que Grognement ou Gorgée avoir des plugins disponibles à utiliser. Ceux-ci rationalisent la création des sprites SVG. En fournissant chaque fichier SVG dans un répertoire donné, le plugin optimisera et générera tous les fichiers SVG de votre répertoire référencé pour être inclus dans un nouveau sprite.

Si vous avez besoin d'ajouter plus d'icônes sur le sprite, il vous suffit d'exporter l'icône sous forme de fichier SVG et de l'ajouter au même dossier. A partir de là, le plugin gère la partie longue.

Quelques plugins disponibles dans différentes versions: grunt-svgstore , gulp-svg-sprites , svg-sprite .

Conclusion

Comme pour tout ce qui concerne le développement Web, il existe plusieurs façons de créer des sprites SVG. Vous pouvez les référencer en externe, les inclure via CSS , et même les faire sensible .