Mettre ce bloc SVG defs en haut du document fonctionne définitivement. Il présente également certains avantages, comme le fait qu'aucune requête HTTP ne doit être effectuée, toutes les informations pour dessiner les graphiques se trouvent directement sur la page. Mais cela présente également des inconvénients. Toutes ces informations doivent être analysées par le navigateur sur chaque page, à partir du document. Ce n'est pas un document distinct qui pourrait déjà être mis en cache par le client, comme d'autres actifs pourraient l'être. Et en parlant de cache, si votre site met en cache HTML (généralement une bonne idée), vous pouvez considérer cette «surcharge du cache de page», car chaque page mise en cache comprend ce gros bloc de code répétitif - ce qui n'est pas une utilisation très efficace du cache du serveur.
La bonne nouvelle est que nous pouvons déplacer ce bloc de définition SVG vers un fichier externe et l'utiliser comme nous le ferions pour une image ou tout autre élément.
Lorsque nous l'utilisons alors, le chemin du fichier serait dans l'attribut, comme ceci:
Important à savoir: les restrictions entre domaines sont strictes à cet égard. Même les en-têtes CORS ne vous aideront pas dans mon expérience. Donc pas de CDN (ne peut même pas jouer sur CodePen, et ne peut certainement pas jouer à un fichier: // URL).
Une autre chose importante à savoir: vous devez absolument utiliser l'attribut xmlns pour que cela fonctionne. Comme dans, votre bloc SVG defs devrait commencer par:
J'avais l'impression que vous n'en aviez pas besoin dans un document HTML5 (de la même manière que vous n'avez pas besoin de types sur les s), mais peut-être parce que ce fichier n'est plus dans les limites d'un document HTML5 (c'est étant référencé en externe), vous en avez besoin.
Pour cette raison, la démo est ici.
Tout aussi important à savoir: aucune version d'IE ne prend en charge cela (jusqu'à 11 au moment de cette publication). Mais il existe un moyen de le faire fonctionner, en ajustant essentiellement le bit de SVG dont vous avez besoin et en l'insérant là où le serait, ce qui en fait un SVG en ligne "normal" qui est pris en charge. Cela nous prend une minute chaude pour que cela fonctionne et soit testé dans Internet Explorer à l'aide de BrowserStack, mais finalement nous l'obtenons.
Des dossiers
- 16-svg4everybody.js
- 16-svg-defs-test.svg