Поставянето на този SVG defs блок в горната част на документа определено работи. Той също има някои предимства, като факта, че не е необходимо да се прави HTTP заявка, цялата информация за изчертаване на графиките е точно на страницата. Но има и някои недостатъци. Цялата тази информация трябва да бъде анализирана от браузъра на всяка страница от документа. Това не е отделен документ, който клиентът вече може да кешира, както биха могли да бъдат други активи. И като говорим за кеш, ако вашият сайт кешира HTML (обикновено добра идея), можете да помислите за това „раздуване на кеша на страници“, защото всяка отделна кеширана страница включва този голям повтарящ се блок код - не е много ефективно използване на кеша на сървъра.
Добрата новина е, че можем да преместим, че SVG defs блокира във външен файл и да го използваме точно както бихме използвали изображение или друг актив.
Когато го използваме тогава, пътят на файла ще бъде в атрибута, по следния начин:
Важно е да знаете: Ограниченията между домейните са трудни за това. Дори заглавките на CORS няма да ви помогнат в моя опит. Така че няма CDN (дори не може да се възпроизвежда на CodePen и определено не може да се възпроизвежда във файл: // URL).
Друго важно нещо, което трябва да знаете: Определено трябва да атрибут xmlns, за да работи това. Както в, вашият SVG defs блок трябва да започва с:
Бях с впечатлението, че това не ви е необходимо в HTML5 документ (по същия начин, по който не се нуждаете от типове на s), но може би защото този файл вече не е в рамките на HTML5 документ (това е имайки външна препратка), имате нужда от него.
Поради тази причина демонстрацията за това е тук.
Също толкова важно е да знаете: Нито една версия на IE не поддържа това (до 11 по време на това публикуване). Но има начин да го накарате да работи, като по същество Ajaxing в бита SVG, от който се нуждаете, и го вмъкнете там, където би било, което го прави някак „нормален“ вграден SVG, който се поддържа. Отнема ни гореща минута, за да стартираме това и тествано в Internet Explorer с помощта на BrowserStack, но в крайна сметка го получаваме.
Файлове
- 16-svg4everybody.js
- 16-svg-defs-test.svg