Sprites et SVG

Lorsqu’on utilise des sprites avec des images jpg/png, c’est la propriété background-position sur laquelle on s’appuie pour afficher l’icône souhaitée. L’inconvénient majeur est, que lorsqu’on modifie la taille d’une icône, il faut modifier les positions de toutes les autres icônes.

Une alternative possible est d’utiliser les svg.

Le principe est de superposer toutes les icônes à la même position. On nomme les calques (une icône = un calque) avec un identifiant différent. Ensuite, on les cache par défaut (les calques ont une classe commune à laquelle on applique la propriété display: none). On passe par un éditeur de texte pour modifier le fichier svg (syntaxe xml). Enfin, dans notre css, lors de la déclaration de la balise, on utilise la propriété background: url en appelant le fichier svg et l’identifiant : icones.svg#test. Ce qui a pour effet d’afficher uniquement le calque concerné. De plus, le format vectoriel permet d’agrandir / réduire à volonté.

Plus de problématique de positionnement, et on peut ajouter autant de calques que nécessaire.

Le fichier svg avec 3 icônes :

Et le fichier html :

Malheureusement, aux premiers tests c’est non compatible Safari…

 

 

 

 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.