Staviti taj SVG defs blok na vrh dokumenta definitivno djeluje. Ima i neke prednosti, poput činjenice da nije potreban HTTP zahtjev, svi podaci za crtanje grafike nalaze se točno na stranici. Ali, ima i nekih nedostataka. Sve te podatke preglednik mora analizirati na svakoj stranici, iz dokumenta. To nije zaseban dokument koji bi klijent već mogao predmemorirati, kao što to može biti ostala imovina. A kad smo već kod predmemorije, ako vaša web lokacija predmemorira HTML (obično dobra ideja), mogli biste razmotriti ovaj "napuhavanje predmemorije stranica", jer svaka pojedina predmemorirana stranica uključuje ovaj veliki ponavljajući blok koda - što nije vrlo učinkovito korištenje predmemorije poslužitelja.
Dobra vijest je da SVG defs blokove možemo premjestiti u vanjsku datoteku i koristiti ih baš kao što bismo koristili sliku ili bilo koji drugi materijal.
Kad ga tada koristimo, put datoteke bio bi u atributu, ovako:
Važno je znati: Ograničenja među domenama su stroga u vezi s tim. Čak mi ni CORS zaglavlja neće pomoći u mom iskustvu. Dakle, nema CDN-a (ne može se reproducirati ni na CodePenu, a definitivno se ne može reproducirati na datoteci: // URL).
Još jednu važnu stvar koju treba znati: Svakako trebate xmlns atribut da bi ovo uspjelo. Kao i u, vaš SVG defs blok trebao bi započeti sa:
Imao sam dojam da vam to ne treba u HTML5 dokumentu (na sličan način kao što vam ne trebaju vrste s), ali možda zato što ova datoteka više nije u okviru HTML5 dokumenta (već s vanjskom referencom), treba vam.
Iz tog razloga, demo za ovo je ovdje.
Jednako je važno znati: nijedna verzija IE to ne podržava (do 11 u vrijeme objavljivanja). Ali postoji način da se to pokrene, u osnovi Ajaxingom u bit SVG-a koji vam treba i umetanjem tamo gdje bi trebao biti, čineći ga nekako "normalnim" inline SVG-om koji je podržan. Treba nam vruća minuta da ovo počne raditi i testirati u Internet Exploreru pomoću BrowserStack-a, ali u konačnici smo ga dobili.
Datoteke
- 16-svg4everybody.js
- 16-svg-defs-test.svg