Punerea acelui bloc SVG în partea de sus a documentului funcționează cu siguranță. De asemenea, are unele avantaje, cum ar fi faptul că nu trebuie făcută nicio cerere HTTP, toate informațiile pentru desenarea graficelor sunt chiar pe pagină. Dar are și unele dezavantaje. Toate aceste informații trebuie analizate de browser pe fiecare pagină, din document. Nu este un document separat care ar putea fi deja stocat în cache de către client, așa cum ar putea fi și alte active. Și vorbind despre cache, dacă site-ul dvs. cache cache HTML (de obicei o idee bună), ați putea lua în considerare această „umflare cache cache pagină”, deoarece fiecare pagină cache inclusă acest bloc mare de cod repetitiv - nu o utilizare foarte eficientă a cache server.
Vestea bună este că putem muta ca definiții SVG să se blocheze într-un fișier extern și să-l folosim exact așa cum am face o imagine sau orice alt material.
Atunci când îl folosim, calea fișierului ar fi în atribut, astfel:
Important de știut: restricțiile între domenii sunt dificile în acest sens. Nici antetele CORS nu vă vor ajuta în experiența mea. Deci niciun CDN (nici măcar nu se poate reda pe CodePen și cu siguranță nu poate reda la un fișier: // URL).
Un alt lucru important de știut: cu siguranță trebuie să atribuiți XML pentru ca acest lucru să funcționeze. Ca și în, blocul dvs. de definiții SVG ar trebui să înceapă cu:
Am avut impresia că nu aveți nevoie de asta într-un document HTML5 (în același mod nu aveți nevoie de tipuri pe s), dar poate pentru că acest fișier nu se mai află în limitele unui document HTML5 (este fiind menționat extern), aveți nevoie de el.
Din acest motiv, demonstrația pentru acest lucru este aici.
La fel de important de știut: nicio versiune a IE nu acceptă acest lucru (până la 11 în momentul publicării). Dar există o modalitate de a-l face să funcționeze, prin Ajaxing în esență în bitul de SVG de care aveți nevoie și inserându-l acolo unde ar fi, făcându-l cam "normal" SVG în linie, care este acceptat. Ne ia un minut fierbinte pentru ca acest lucru să funcționeze și să fie testat în Internet Explorer folosind BrowserStack, dar în cele din urmă îl obținem.
Dosare
- 16-svg4everybody.js
- 16-svg-defs-test.svg