Une fois que nous avons ce que nous appelons notre «bloc defs» de SVG - ce morceau de SVG qui définit toutes les choses que nous voulons dessiner plus tard - où le mettons-nous? Jusqu'à présent, nous l'avons mis directement dans le HTML, et cela fonctionne parfaitement. Si nous le laissons en haut de la page, dites juste après la balise d' ouverture :
Cela fonctionnera très bien dans tous les navigateurs prenant en charge SVG.
Il pourrait être tentant de réduire cela. Peut-être que les icônes ne sont pas très vitales pour la page, pas aussi vitales que le contenu réel qu'elles sont censées fournir.Nous déplaçons donc les icônes vers le bas de la page, en différant leur chargement comme nous le faisons souvent avec JavaScript. Nous essayons cela dans la vidéo, mais nous avons des problèmes avec Safari pour rendre les icônes que nous avons essayées plus tard . Pour être honnête, j'ai vu des comportements incohérents ou divers types dans d'autres navigateurs le faire de cette façon, et il semble que le paysage change un peu à cet égard. J'ai donc entendu: c'est une chose difficile à mettre en œuvre. Il est plus sûr de mettre le bloc en haut si vous finissez par garder les définitions directement dans vos documents.
Dans cette vidéo, nous examinons quelques tests de base de tout cela, puis examinons certains sites Web du monde réel qui utilisent ce système et comment / où ils insèrent le bloc svg defs.
Voir le Pen 954e71cb5d5e79fb61d3c89bb3f21b8a de Chris Coyier (@chriscoyier) sur CodePen.
Noter
J'aime le terme «SVG defs block» - juste pour que nous puissions l'appeler quelque chose qui a un but précis mais qui n'a pas vraiment de nom officiel. Mais vous n'avez pas toujours besoin d'utiliser une balise. Lorsque vous utilisez s, ceux-ci ne sont de toute façon pas rendus par eux-mêmes, et en fait je ne pense pas qu'ils soient censés être à l'intérieur . J'ai entendu dire que les définitions des dégradés en SVG sont les mêmes, et ne fonctionneront même pas si elles sont dans le . Quoi qu'il en soit, il s'agit toujours d'un «bloc de code SVG que nous définissons juste pour l'utiliser plus tard», donc je continuerai probablement de l'appeler un «bloc SVG defs».