Selle SVG-defektide ploki panemine dokumendi ülaossa töötab kindlasti. Sellel on ka mõned eelised, näiteks asjaolu, et HTTP-päringut pole vaja teha, on kogu teave graafika joonistamiseks otse lehel. Kuid sellel on ka mõned puudused. Brauser peab kogu selle teabe parsima dokumendist igal lehel. See pole eraldi dokument, mille klient võib juba vahemällu salvestada, nagu muud varadki. Ja kui rääkida vahemälust, siis kui teie sait sisaldab HTML-i vahemälu (tavaliselt hea mõte), siis võiksite kaaluda seda "lehe vahemälu paisumist", sest iga üksik vahemällu salvestatud leht sisaldab seda suurt korduvat koodiplokki - mitte eriti serveri vahemälu kasutamine.
Hea uudis on see, et saame SVG defektid blokeerida välisele failile ja kasutada seda täpselt nii, nagu me kasutaksime pilti või muud vara.
Kui me seda siis kasutame, oleks faili tee atribuudis järgmine:
Oluline on teada: domeenidevahelised piirangud on selles osas karmid. Isegi CORS-i päised ei aita teid minu kogemuste põhjal. Nii et mitte ühtegi CDN-i (ei saa isegi mängida CodePenis ja kindlasti ei saa mängida failiga: // URL).
Veel üks oluline teadmine: selle toimimiseks peate kindlasti atribuudi xmlns kasutama. Nagu ka teie SVG-defektide plokk peaks algama järgmisega:
Mulle jäi mulje, et te ei vaja seda HTML5-dokumendis (umbes samamoodi ei vaja te tüüpe s), vaid võib-olla sellepärast, et see fail ei kuulu enam HTML5-dokumendi piiridesse (see on väliselt viidatud), vajate seda.
Sel põhjusel on selle demo siin.
Sama oluline on teada: ükski IE versioon seda ei toeta (kuni 11 selle avaldamise ajal). Kuid on olemas viis, kuidas see toimima panna, sisuliselt ajaxides vajaliku SVG-i natuke ja sisestades selle sinna, kus see oleks, muutes selle kuidagi "tavaliseks" sisseehitatud SVG-ks, mida toetatakse. Meil kulub kuum minut, et see BrowserStacki abil Internet Exploreris toimima panna ja testida, kuid lõpuks saame selle kätte.
Toimikud
- 16-svg4everybody.js
- 16-svg-defs-test.svg