Якщо встановити, що SVG defs-блок у верхній частині документа, безумовно, працює. Це також має деякі переваги, як-от той факт, що не потрібно робити запит HTTP, вся інформація для малювання графіки знаходиться прямо на сторінці. Але у нього є і деякі недоліки. Всю цю інформацію браузер повинен проаналізувати на кожній сторінці з документа. Це не окремий документ, який клієнт може вже кешувати, як інші активи. А якщо говорити про кеш, якщо ваш сайт кешує HTML (як правило, це гарна ідея), ви можете розглянути цей варіант "здуття кешу сторінок", оскільки кожна окрема кешована сторінка містить цей великий повторюваний блок коду - не дуже ефективне використання кешу сервера.
Хороша новина полягає в тому, що ми можемо перенести блокування SVG у зовнішній файл і використовувати його так само, як зображення або будь-який інший актив.
Коли ми тоді його використовуємо, шлях до файлу буде в атрибуті, наприклад:
Важливо знати: міждоменні обмеження жорсткі щодо цього. Навіть заголовки 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