Å sette den SVG defs-blokken øverst i dokumentet fungerer definitivt. Det har også noen fordeler, som det faktum at det ikke trenger å komme noen HTTP-forespørsel, all informasjon for tegning av grafikken er rett på siden. Men det har også noen ulemper. All den informasjonen må analyseres av nettleseren på hver side, fra dokumentet. Det er ikke et eget dokument som allerede kan caches av klienten, i likhet med andre eiendeler. Og når vi snakker om hurtigbuffer, hvis nettstedet ditt cacher HTML (vanligvis en god idé), kan du vurdere denne "sidebufferen oppblåst" fordi hver enkelt bufrede side inneholder denne store repeterende kodeblokken - ikke en veldig effektiv bruk av serverbufferen.
Den gode nyheten er at vi kan flytte at SVG-def blokkerer til en ekstern fil, og bruker den akkurat som vi ville gjort et bilde eller et annet aktivum.
Når vi bruker det da, vil filbanen være i attributtet, slik:
Viktig å vite: Begrensninger på tvers av domener er tøffe på dette. Selv CORS-overskrifter hjelper deg ikke etter min erfaring. Så ingen CDN-er (kan ikke engang spille på CodePen, og kan definitivt ikke spille på en fil: // URL).
En annen viktig ting å vite: Du må definitivt xmlns attributt for at dette skal fungere. Som i, bør SVG defs-blokken din begynne med:
Jeg var under inntrykk av at du ikke trengte det i et HTML5-dokument (på samme måte som du ikke trenger typer på s), men kanskje fordi denne filen ikke lenger er innenfor rammen av et HTML5-dokument (det er blir referert til eksternt), trenger du det.
Av den grunn er demoen for dette her.
Like viktig å vite: Ingen versjon av IE støtter dette (opptil 11 på tidspunktet for publiseringen). Men det er en måte å få det til å fungere, ved å i det vesentlige Ajaxing i den biten av SVG du trenger og sette den inn der den ville være, noe som gjør det ganske "normalt" innebygd SVG som støttes. Det tar oss et varmt minutt å få dette til å fungere og testes i Internet Explorer ved hjelp av BrowserStack, men til slutt får vi det.
Filer
- 16-svg4everybody.js
- 16-svg-defs-test.svg