À quoi sert l'injection de SVG ?

Question

Je travaille actuellement sur un site pour un client qui utilise beaucoup cette bibliothèque pour injecter des SVG dans chaque page : https://github.com/iconic/SVGInjector

La plupart des pages de ce site comportent plus de 15 icônes SVG utilisées comme icônes et j'essaie de minimiser le nombre de requêtes, ce à quoi l'injection ne remédie pas.

J'envisage d'inclure ces SVG en tant qu'éléments en ligne afin de réduire le nombre de requêtes HTTP sur chaque page, mais je ne comprends pas l'intérêt d'injecter ces éléments plutôt que de les mettre en ligne dès le départ. Qu'est-ce qui m'échappe ?

Merci !

Answer 1

L'utilisation de SVG en ligne est nécessaire pour certaines raisons que le README de la bibliothèque mentionne :

• Utilisation du Javascript intégré
• Pouvoir le styliser à l'aide de CSS

D'autre part, l'utilisation de SVG en ligne est mauvaise pour d'autres raisons [discutables] :

• Si vous devez utiliser le même SVG deux fois, vous devez l'inclure deux fois. D'une manière générale, la répétition du code n'est pas bonne, car elle a tendance à entraîner des bogues.
• SVG dans les fichiers sources produit du ballonnement. Il est bien mieux de séparer la source SVG dans un autre fichier.

La bibliothèque que vous mentionnez résout ces problèmes en vous permettant de stocker les SVG dans différents fichiers, tout en étant capable de les utiliser en ligne.