SVG-chargedeur: une façon différente de travailler avec SVG externe

Les SVG sont géniaux: ils sont petits, sont nets à n'importe quelle échelle et peuvent être personnalisés sans créer de fichier séparé. Cependant, il y a quelque chose qui me manque dans les normes Web aujourd'hui: un moyen de les inclure en tant que fichier externe qui conserve également les pouvoirs de personnalisation du format.

Par exemple, disons que vous souhaitez utiliser le logo de votre site Web stocké comme Web-Logo.svg. Vous pouvez faire:

 <img  src="/%20images%20/%20logo.svg" alt="SVG-chargedeur: une façon différente de travailler avec SVG externe" >

C'est bien si votre logo va se ressembler partout. Mais dans de nombreux cas, vous avez 2 à 3 variations du même logo. Slack, par exemple, a deux versions.

Si nous avions un moyen de personnaliser la couleur de remplissage de notre logo ci-dessus, nous pourrions passer n'importe quelle couleur arbitraire pour rendre toutes les variations.

Prenez également le cas des icônes. Vous ne voudriez pas faire quelque chose comme ça, n'est-ce pas?

 <img  src="/%20icons%20/%20coeur-blue.svg" alt="SVG-chargedeur: une façon différente de travailler avec SVG externe" >
<img  src="/%20icons%20/%20heart-red.svg" alt="SVG-chargedeur: une façon différente de travailler avec SVG externe" >

Chargez des SVG externes comme éléments en ligne

Pour y remédier, j'ai créé une bibliothèque appelée SVG-chargeuse. En termes simples, il récupère les fichiers SVG via XHR et les charge en tant qu'éléments en ligne, vous permettant de personnaliser les propriétés comme le remplissage et le trait, tout comme les SVG en ligne.

Par exemple, j'ai un logo sur mon projet latéral, SVGBOX. Au lieu de créer un fichier différent pour chaque variation, je peux avoir un fichier et personnaliser la couleur de remplissage:

J'ai utilisé Data-Src pour définir l'URL du fichier SVG. L'attribut de remplissage remplace le remplissage du fichier SVG d'origine.

Pour utiliser la bibliothèque, la seule chose que j'ai pour m'assurer que les fichiers servis ont des en-têtes CORS appropriés pour que les XHR réussissent. La bibliothèque met également en cache les fichiers localement, ce qui rend le suivant beaucoup plus rapidement. Même pour la première charge, les performances sont comparables à l'utilisation de balises .

Ce concept n'est pas nouveau. SVG-Inject fait quelque chose de similaire. Cependant, SVG-chargedeur est plus facile à utiliser car nous n'avons qu'à inclure la bibliothèque quelque part dans votre code (soit via une balise , soit dans le bundle JavaScript). Aucun code supplémentaire n'est nécessaire.

Les éléments dynamiquement ajoutés et le changement dans les attributs sont également gérés automatiquement, ce qui garantit qu'il fonctionne avec tous les cadres Web. Voici un exemple dans React:

Mais pourquoi?

Cette approche peut sembler peu orthodoxe car elle introduit une dépendance JavaScript et il existe déjà plusieurs façons d'utiliser des SVG, y compris en ligne et à partir de sources externes. Mais il y a un bon cas pour utiliser les SVG de cette façon. Examinons-les en répondant aux questions courantes.

Ne pouvons-nous pas simplement nous en informer SVG nous-mêmes?

Inlining est le moyen le plus simple d'utiliser les SVG. Copiez et collez le code SVG dans le HTML. C'est ce que fait finalement SVG-chargedeur. Alors, pourquoi ajouter les étapes supplémentaires pour charger un fichier SVG d'ailleurs? Il y a deux raisons principales:

1. Les SVG en ligne rendent le code verbeux: les SVG peuvent être de quelques lignes à quelques centaines. Les SVG en ligne peuvent bien fonctionner si ce dont vous avez besoin n'est que quelques icônes et ils sont tous minuscules. Mais cela devient une douleur majeure si elles sont importantes ou nombreuses, car alors, ils deviennent de longues chaînes de texte dans le code qui n'est pas une «logique commerciale». Le code devient difficile à analyser.
   
   C'est la même chose que de préférer une feuille de style externe sur une balise

2. Les SVG externes sont beaucoup plus pratiques: la copie et le collage font souvent le travail, mais les SVG externes peuvent être vraiment pratiques. Dites que vous expérimentez l'icône à utiliser dans votre application. Si vous utilisez des SVG en ligne, cela signifie faire des allers-retours pour obtenir le code SVG. Mais avec des SVG externes, vous n'avez qu'à connaître le nom du fichier.
   
   Jetez un œil à cet exemple. L'une des icônes d'icônes les plus étendues sur GitHub est les icônes de conception de matériaux. Avec SVG-chargedeur et UNPKG, nous pouvons commencer à utiliser l'une des 5 000 icônes immédiatement.

N'est-il pas inefficace de déclencher une demande HTTP pour chaque SVG par rapport à la fabrication d'un sprite?

Pas vraiment. Avec HTTP2, le coût de la réalisation d'une demande HTTP est devenu moins pertinent. Oui, il y a encore des avantages du regroupement (par exemple, une meilleure compression), mais pour les ressources non bloquantes et les XHR, les pros sont presque inexistants dans les scénarios du monde réel.

Voici un stylo chargeant 50 icônes de la même manière que ci-dessus. (Ouvrir en mode incognito car les fichiers sont mis en cache par défaut):

Qu'en est-il de la balise (symboles SVG)?

Les symboles SVG séparent la définition du fichier SVG de son utilisation. Au lieu de définir le SVG partout, nous pouvons avoir quelque chose comme ceci:

 <svg>
  <utilisez xlink: href="#%20heart-icon"></utilisez>
</svg>

Le problème est qu'aucun des navigateurs ne prend en charge à l'aide de fichiers de symboles hébergés sur un domaine tiers. Par conséquent, nous ne pouvons pas faire quelque chose comme ceci:

 <svg>
  <utilisez xlink: href="https://icons.com/Symbols.svg#heart-icon"></utilisez>
</svg>

Safari ne prend même pas en charge les fichiers de symboles hébergés sur le même domaine.

Ne pouvons-nous pas utiliser un outil de construction qui délite les SVG?

Je n'ai pas pu trouver un moyen évident de récupérer les SVG à partir d'une URL et de les alimenter dans des bundlers communs, comme WebPack et Grunt, bien qu'ils existent pour des fichiers SVG en inclinaison stockés localement. Même si un plugin qui fait cela existe, la configuration des bundlers n'est pas exactement simple. En fait, j'évite souvent de les utiliser jusqu'à ce que le projet atteigne un niveau de complexité accessible. Nous devons également réaliser qu'une majorité d'Internet est étrangère à des choses comme WebPack et React. Les scripts simples peuvent avoir un attrait beaucoup plus large.

Qu'en est-il de la balise ?

La balise est un moyen natif d'inclure des fichiers SVG externes qui fonctionnent sur tous les navigateurs.:

 <objet data="https://unpkg.com/[email protégé] /svg/access-point-network.svg" width="32" height="32">  objet></objet>

Cependant, l'inconvénient est que nous ne sommes pas en mesure de personnaliser les attributs du SVG à moins qu'il ne soit hébergé sur le même domaine (et la balise ne respecte pas les en-têtes CORS). Même si le fichier est hébergé sur le même domaine, nous obligerons JavaScript à manipuler le remplissage, comme ceci:

 <objet data="https://unpkg.com/[email Protected] /svg/access-point-network.svg" width="32" height="32" onload="this.contentDocument.QuerySelect

En bref, l'utilisation de fichiers SVG externes le rend ultra-pratique pour utiliser les icônes et autres actifs SVG. Comme couvert précédemment, avec UNPKG, nous pouvons utiliser n'importe quelle icône sur GitHub sans avoir besoin de code supplémentaire. Nous pouvons éviter de créer un pipeline dans un bundler pour traiter les fichiers SVG ou un composant pour chaque icône, et hébergez simplement les icônes sur un CDN.

Le chargement des fichiers SVG de cette façon contient beaucoup d'avantages avec très peu de coûts.

">

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!