SVG-def-lohkon asettaminen asiakirjan yläosaan toimii varmasti. Sillä on myös joitain etuja, kuten se, että HTTP-pyyntöä ei tarvitse tehdä, kaikki grafiikan piirtämistä koskevat tiedot ovat oikealla sivulla. Mutta sillä on myös joitain haittoja. Selaimen on jäsennettävä kaikki nämä tiedot dokumentin jokaisella sivulla. Se ei ole erillinen asiakirja, jonka asiakas saattaa jo tallentaa välimuistiin, kuten muutkin resurssit. Välimuistista puhuen, jos sivustosi tallentaa HTML-välimuistin (yleensä hyvä idea), voit harkita tätä "sivuvälimuistin paisumista", koska jokainen välimuistissa oleva sivu sisältää tämän suuren toistuvan koodilohkon - ei kovin tehokkaan palvelimen välimuistin käytön.
Hyvä uutinen on, että voimme siirtää SVG-defektit estämään ulkoisen tiedoston ja käyttämään sitä samalla tavalla kuin me tekisimme kuvan tai minkä tahansa muun resurssin.
Kun käytämme sitä silloin, tiedoston polku olisi määritteessä, kuten tämä:
Tärkeää tietää: Verkkotunnusten väliset rajoitukset ovat tiukkoja tässä. Jopa CORS-otsikot eivät auta sinua kokemukseni mukaan. Joten ei CDN-levyjä (ei voi edes toistaa CodePenillä, eikä ehdottomasti voi toistaa tiedostolla: // URL).
Toinen tärkeä asia tietää: Sinun täytyy ehdottomasti xmlns-attribuutti toimiakseen. Kuten SVG-defs-lohkosi pitäisi alkaa:
Minusta tuntui, että et tarvinnut sitä HTML5-asiakirjassa (samalla tavalla kuin et tarvitse tyyppejä s), mutta ehkä siksi, että tämä tiedosto ei ole enää HTML5-asiakirjan rajoissa (se on johon viitataan ulkoisesti), tarvitset sitä.
Tästä syystä demo tästä on täällä.
Yhtä tärkeää tietää: Yksikään IE-versio ei tue tätä (enintään 11 julkaisuhetkellä). Mutta on olemassa tapa saada se toimimaan, ajamalla olennaisesti Ajax tarvitsemallesi SVG: lle ja lisäämällä se sinne, missä se olisi, mikä tekee siitä jonkin verran "normaalin" tuetun SVG: n. Meillä on kuuma minuutti saada tämä toimimaan ja testattu Internet Explorerissa BrowserStackin avulla, mutta lopulta saamme sen.
Tiedostot
- 16-svg4everybody.js
- 16-svg-defs-test.svg