Postavitev bloka SVG defs na vrh dokumenta zagotovo deluje. Ima tudi nekaj prednosti, na primer dejstvo, da ni treba zahtevati zahteve HTTP, saj so vsi podatki za risanje grafike na strani. Vendar ima tudi nekaj slabosti. Vse te podatke mora brskalnik razčleniti na vsaki strani iz dokumenta. To ni ločen dokument, ki bi ga stranka morda že predpomnila, tako kot druga sredstva. Če že govorimo o predpomnilniku, če vaše spletno mesto predpomni HTML (običajno dobra ideja), bi lahko razmislili o tem "napihnjenosti predpomnilnika strani", ker vsaka posamezna predpomnjena stran vključuje ta velik ponavljajoč se blok kode - ni zelo učinkovita uporaba predpomnilnika strežnika.
Dobra novica je, da lahko blok SVG defs premaknemo v zunanjo datoteko in ga uporabimo tako kot sliko ali katero koli drugo sredstvo.
Ko jo nato uporabimo, bi bila pot datoteke v atributu, takole:
Pomembno vedeti: omejitve med domenami so pri tem stroge. Tudi glave CORS vam po mojih izkušnjah ne bodo pomagale. Torej nobenega CDN-ja (ne more se predvajati niti na CodePenu in zagotovo ne more predvajati na datoteki: // URL).
Še ena pomembna stvar, ki jo morate vedeti: zagotovo morate atribut xmlns, da to deluje. Tako kot pri vašem bloku SVG defs se mora začeti z:
Bil sem pod vtisom, da tega v dokumentu HTML5 ne potrebujete (podobno kot tipi ne potrebujete vrst ), morda pa zato, ker ta datoteka ni več znotraj dokumentov HTML5 ( če je zunanja referenca), jo potrebujete.
Iz tega razloga je predstavitev za to tukaj.
Enako pomembno je vedeti: nobena različica IE tega ne podpira (do 11 v času objave). Obstaja pa način, da ga začnete delovati, tako da v bistvu Ajaxing v bit SVG, ki ga potrebujete, in ga vstavite, kjer bi bil, tako da je nekakšen "normalen" vrstni SVG, ki je podprt. Potrebna nam je vroča minuta, da to uporabimo in preizkusimo v Internet Explorerju z uporabo BrowserStack, toda na koncu ga dobimo.
Datoteke
- 16-svg4everybody.js
- 16-svg-defs-test.svg