Az SVG defs blokk feltöltése a dokumentum tetejére mindenképpen működik. Van néhány előnye is, például az a tény, hogy nem kell HTTP-kérést beküldeni, a grafika megrajzolásához szükséges összes információ közvetlenül az oldalon található. De van néhány hátránya is. Az összes információt a böngészőnek elemeznie kell minden oldalon, a dokumentumból. Ez nem egy külön dokumentum, amelyet az ügyfél már tárolhat, mint más eszközök. Ami a gyorsítótárat illeti, ha webhelye gyorsítótárat tartalmaz a HTML-re (általában jó ötlet), akkor fontolóra veheti ezt az „oldalgyorsítótár-duzzadást”, mert minden egyes gyorsítótárazott oldal tartalmazza ezt a nagy, ismétlődő kódblokkot - ez nem túl hatékony kiszolgáló-gyorsítótár-használat.
A jó hír az, hogy áthelyezhetjük, hogy az SVG defektjei blokkolódnak egy külső fájlba, és ugyanúgy használhatjuk, mint egy képet vagy bármilyen más eszközt.
Amikor akkor használjuk, a fájl elérési útja az attribútumban lesz, így:
Fontos tudni: A domainek közötti korlátozások kemények ebben. Még a CORS fejlécek sem segítenek tapasztalataim szerint. Tehát nincsenek CDN-ek (még CodePen-en sem játszhatók, és határozottan nem játszhatók le egy fájlon: // URL).
Egy másik fontos tudnivaló: Ennek működéséhez mindenképpen meg kell adnod az xmlns attribútumot. Az SVG defs blokkjának a következővel kell kezdődnie:
Az volt a benyomásom, hogy erre nincs szüksége egy HTML5 dokumentumban (ugyanúgy, mint az s típusokra ), de talán azért, mert ez a fájl már nem tartozik a HTML5 dokumentumok keretei közé (ez külsőleg hivatkozva), szükséged van rá.
Ezért itt van ennek a bemutatója.
Ugyanilyen fontos tudni: Az IE egyetlen verziója sem támogatja ezt (a közzététel időpontjában legfeljebb 11). De van rá mód, hogy működőképes legyen: lényegében az Ajaxing segítségével beírhatja a szükséges SVG-t, és beillesztheti oda, ahol lenne, így „normál”, beépített SVG- ként támogatva. Egy percet vesz igénybe, hogy ez működőképes legyen és kipróbálható az Internet Explorerben a BrowserStack segítségével, de végül megkapjuk.
Fájlok
- 16-svg4everybody.js
- 16-svg-defs-test.svg
