[Résolu] Liste à puce en svg

Bonjour,
Je ne suis pas un féru d'informatique et la question va vous paraître peut être idiote mais. Je vais essayer d'être précis.
Je fais des listes à puces avec des svg simples : flèches, carré, losange… Suivant mes grands chapitres, qui peuvent contenir chacun des dizaines de pages, je change les couleurs de ces puces. Mon site a plus de 1000 pages, donc, j'aimerais pouvoir modifier en une fois tout le site.
J'ai un gen.css, général comme son nom l'indique, pour ce qui est contenu dans toutes mes pages et un css particulier pour chaque grand chapitre pour changer la couleur des encadrement des titres, des couleurs de certaines puces pour avoir des couleurs uniformes dans la page.
Ces puces sont appelées, par exemple, dans le bio.css via un :

.pastillebio {
	list-style-position: outside;
	margin-top: -10px;
	margin-left: 10px;
	list-style-image:url(/svg/fleche-liste-bio.svg);
}

Bon, maintenant la question
1. J'ai vu qu'on peut appliquer des couleurs de remplissage différents. Est-ce utile de faire des sprites svg comme les sprites en png (une seule requête) pour toutes les puces ou cela n'a pas d'intérêt. Autrement dit, l'appel du sprite change quelque chose s'il est chaque fois dans un css différent ? Est-ce qu'il faut faire un seul css, mais alors comment fait-on pour reconnaître qu'on est bien en bio et non en cn.css par exemple.
2. J'aurai d'autres images en svg. S'il faut faire un sprite, faut-il en faire un seul ou un pour les puces et un pour les autres par exemple ? Quel gain pour le serveur ?
Merci de répondre à ces questions basiques.

Bonjour,
quelqu'un peut-il me répondre ?
Merci

osiris67 a écrit :
Bonjour,
quelqu'un peut-il me répondre ?
Merci

Oui

ps: Smiley de circonstance:

Coucou,

Je crois qu'il a fait une petite blague, ça devait être un vendredÿ

Alors

osiris67 a écrit :
1. J'ai vu qu'on peut appliquer des couleurs de remplissage différents. Est-ce utile de faire des sprites svg comme les sprites en png (une seule requête) pour toutes les puces ou cela n'a pas d'intérêt. Autrement dit, l'appel du sprite change quelque chose s'il est chaque fois dans un css différent ? Est-ce qu'il faut faire un seul css, mais alors comment fait-on pour reconnaître qu'on est bien en bio et non en cn.css par exemple.

Des couleurs de remplissage ? Tu veux dire donner des couleurs aux éléments du SVG via le CSS ? Pour ça il faut un SVG inline (dans le code html quoi) et non un fichier externe (et encore moins appelé depuis le CSS et encore encore moins utilisé en puce).

Je n'ai jamais vu de sprite SVG... Je ne sais pas si c'est possible. Les SVG n'agissent pas vraiment comme des images... Les sprite sont utilisé en background, ici en list-style-image impossible de féniri ce qui sera visible ou non de ton sprite. Pour finir, les sprite c'est un peu oldschool. Enfin du moins ca fait un moment que je n'en voit plus passer. L’intérêt principal et l'amélioration des perf. C'est vraiment une optimisation très très fine, surtout que les enjeux en sont plus trop d'actualité avec l'évolution des débits internet ces dernières années.

J'ai pas très bien compris la dernière question.

osiris67 a écrit :
2. J'aurai d'autres images en svg. S'il faut faire un sprite, faut-il en faire un seul ou un pour les puces et un pour les autres par exemple ? Quel gain pour le serveur ?

Cf ma réponse au dessus sur les sprites.
Modifié par _laurent (19 Jul 2017 - 15:55)

Merci pour ta réponse rapide.

Pour compléter, plutot que d'utiliser le list-style-image tu trouvera peut etre plus flexible le fait de ne pas mettre de puce et d'utiliser un before sur les li, avec en background ton image.

Bon code