Uvedení bloku SVG defs v horní části dokumentu rozhodně funguje. Má také některé výhody, jako je skutečnost, že není třeba zadávat žádný požadavek HTTP, všechny informace pro kreslení grafiky jsou přímo na stránce. Má však také některé nevýhody. Všechny tyto informace musí prohlížeč analyzovat na každé stránce z dokumentu. Není to samostatný dokument, který by již mohl být klientem uložen do mezipaměti, jako by to mohla být jiná aktiva. A když už mluvíme o mezipaměti, pokud váš web ukládá do mezipaměti HTML (obvykle dobrý nápad), můžete zvážit toto „nafouknutí mezipaměti stránky“, protože každá stránka v mezipaměti obsahuje tento velký opakující se blok kódu - není to příliš efektivní využití mezipaměti serveru.
Dobrou zprávou je, že můžeme přesunout blok SVG defs do externího souboru a použít jej stejně jako obrázek nebo jiné aktivum.
Když to použijeme, cesta k souboru bude v atributu, například takto:
Důležité vědět: Omezení mezi doménami jsou v tomto ohledu přísná. Z mé zkušenosti vám nepomohou ani záhlaví CORS. Takže žádná CDN (nemůže hrát ani na CodePen a rozhodně nemůže hrát na file: // URL).
Další důležitá věc, kterou je třeba vědět: Aby to fungovalo, musíte určitě atribut xmlns. Stejně jako v případě, váš blok SVG defs by měl začínat:
Měl jsem dojem, že to v dokumentu HTML5 nepotřebujete (podobně, jako nepotřebujete typy na s), ale možná proto, že tento soubor již není v mezích dokumentu HTML5 (je to externí odkaz), potřebujete to.
Z tohoto důvodu je zde ukázka.
Stejně důležité vědět: Žádná verze IE to nepodporuje (až 11 v době vydání). Existuje ale způsob, jak to uvést do provozu, a to tím, že v podstatě Ajaxing v bitové části SVG potřebujete a vložíte ji tam, kde by to bylo, což z ní dělá trochu „normální“ vložený SVG, který je podporován. Trvá nám horká minuta, než to necháme fungovat a otestujeme v Internet Exploreru pomocí BrowserStack, ale nakonec to dostaneme.
Soubory
- 16-svg4everybody.js
- 16-svg-defs-test.svg