Noteikti darbojas SVG defektu bloka ievietošana dokumenta augšdaļā. Tam ir arī dažas priekšrocības, piemēram, fakts, ka nav jāveic HTTP pieprasījums, visa informācija grafikas zīmēšanai ir tieši lapā. Bet tam ir arī daži trūkumi. Pārlūkprogrammai visa šī informācija ir jāparsē katrā lappusē no dokumenta. Tas nav atsevišķs dokuments, kuru klients, iespējams, jau ir saglabājis kešatmiņā, tāpat kā citi aktīvi. Runājot par kešatmiņu, ja jūsu vietne kešatmiņā satur HTML (parasti tā ir laba ideja), jūs varētu apsvērt šo “lapu kešatmiņu uzpūsties”, jo katrā atsevišķajā kešatmiņā ievietotajā lapā ir iekļauts šis lielais atkārtotais koda bloks, kas nav pārāk efektīva servera kešatmiņas izmantošana.
Labā ziņa ir tā, ka mēs varam pārvietot to, ka SVG defekti tiek bloķēti ārējā failā, un izmantot to tāpat kā attēlu vai jebkuru citu līdzekli.
Kad to izmantojam, faila ceļš būtu atribūtā, piemēram:
Svarīgi zināt: starpdomēnu ierobežojumi šajā ziņā ir stingri. Pat CORS galvenes man pēc pieredzes nepalīdzēs. Tātad nav CDN (nevar pat atskaņot CodePen un noteikti nevar atskaņot ar failu: // URL).
Vēl viena svarīga lieta, kas jāzina: Lai tas darbotos, jums noteikti ir nepieciešams atribūts xmlns. Tāpat kā jūsu SVG defektu blokam jāsākas ar:
Man radās iespaids, ka jums tas nav vajadzīgs HTML5 dokumentā (tieši tāpat, kā jums nav vajadzīgi tipi s), bet varbūt tāpēc, ka šis fails vairs nav HTML5 dokumenta robežās (tas ir uz ārēju atsauci), jums tas ir nepieciešams.
Šī iemesla dēļ šī demonstrācija ir šeit.
Tikpat svarīgi zināt: neviena IE versija to neatbalsta (līdz 11 šīs publicēšanas laikā). Bet ir veids, kā panākt, lai tas darbotos, būtībā ar Ajaxing nepieciešamo SVG bitu un ievietojot to vietā, kur tas būtu, padarot to par kaut cik “normālu” iekļauto SVG, kas tiek atbalstīts. Mums tas aizņem karstu minūti, lai tas darbotos un tiktu pārbaudīts Internet Explorer, izmantojot BrowserStack, taču galu galā mēs to saprotam.
Faili
- 16-svg4everybody.js
- 16-svg-defs-test.svg