Uvedenie toho, že blok SVG defs v hornej časti dokumentu určite funguje. Má tiež určité výhody, napríklad skutočnosť, že nie je potrebné zadávať žiadne požiadavky HTTP. Všetky informácie na vykreslenie grafiky sa nachádzajú priamo na stránke. Má však aj niektoré nevýhody. Všetky tieto informácie musí prehliadač analyzovať na každej stránke z dokumentu. Nejde o samostatný dokument, ktorý by už mohol byť uložený v pamäti klienta, ako by to mohlo byť v prípade iných prostriedkov. A keď už hovoríme o vyrovnávacej pamäti, ak váš web ukladá do vyrovnávacej pamäte HTML (zvyčajne je to dobrý nápad), môžete zvážiť toto „nafúknutie vyrovnávacej pamäte stránky“, pretože každá stránka v medzipamäti obsahuje tento veľký opakujúci sa blok kódu - nie veľmi efektívne využitie medzipamäte servera.
Dobrou správou je, že môžeme blokované defekty SVG presunúť do externého súboru a použiť ich rovnako ako obrázok alebo akýkoľvek iný prostriedok.
Keď to potom použijeme, cesta k súboru by mala byť v atribúte, napríklad takto:
Je dôležité vedieť: Obmedzenia viacerých domén sú v tomto ohľade tvrdé. Z mojej skúsenosti vám nepomôžu ani hlavičky CORS. Takže žiadne CDN (nemôžu sa hrať ani na CodePen a rozhodne sa nedajú hrať na file: // URL).
Ďalšia dôležitá vec, ktorú treba vedieť: Aby to fungovalo, musíte určite mať atribút xmlns. Rovnako ako v prípade, váš blok SVG defs by mal začínať:
Mal som dojem, že to v dokumente HTML5 nepotrebujete (podobne, ako nepotrebujete typy na s), ale možno preto, že tento súbor už nie je v medziach dokumentu HTML5 (je to externe odkazovaný), potrebujete to.
Z tohto dôvodu je tu demo.
Rovnako dôležité vedieť: Žiadna verzia IE to nepodporuje (až 11 v čase vydania). Existuje ale spôsob, ako to uviesť do života, a to tak, že v podstate Ajaxujete bit SVG, ktorý potrebujete, a vložíte ho tam, kde by bol, čo z neho robí trochu „normálny“ vložený SVG, ktorý je podporovaný. Trvá nám horúca minúta, kým to vyskúšame a otestujeme v prehliadači Internet Explorer pomocou prehliadača BrowserStack, ale nakoniec to dokážeme.
Súbory
- 16-svg4everybody.js
- 16-svg-defs-test.svg