Як тільки ми отримаємо те, що ми називаємо своїм "блоком defs" SVG - тим фрагментом SVG, який визначає всі речі, які ми хочемо намалювати пізніше - куди ми його поміщаємо? Поки що ми вкладаємо його безпосередньо в HTML, і це абсолютно працює. Якщо ми залишимо його у верхній частині сторінки, скажімо відразу після вступного тегу:
Це буде чудово працювати у всіх браузерах, які підтримують SVG.
Може бути спокусливо зрушити це вниз. Можливо, піктограми не надто життєво важливі для сторінки, не настільки життєво важливі, як реальний вміст, який ця сторінка призначена для доставки, тому ми переміщуємо піктограми в нижню частину сторінки, відкладаючи їх завантаження, як це часто робиться з JavaScript. Ми пробуємо це у відео, але у нас є проблеми з рендерингом Safari піктограм, які ми намагалися пізніше . Чесно кажучи, я бачив непослідовну поведінку або різні типи в інших браузерах, також роблячи це таким чином, і, здається, пейзаж трохи змінюється в цьому плані. Тож я чув: це складна річ для реалізації. Найбезпечніше розміщувати блок у верхній частині, якщо в підсумку ви зберігаєте деф у своїх документах.
У цьому відео ми розглядаємо деякі базові тестування всього цього, а потім розглядаємо деякі реальні веб-сайти, які використовують цю систему, і те, як / де вони вставляють блок svg defs.
Дивіться Pen 954e71cb5d5e79fb61d3c89bb3f21b8a Кріса Койєра (@chriscoyier) на CodePen.
Примітка
Мені подобається термін "SVG defs block" - лише для того, щоб ми могли назвати це як-небудь, що має певне призначення, але насправді не має офіційної назви. Але вам не завжди потрібно насправді використовувати тег. Коли ви використовуєте s, вони все одно не відображаються самі по собі, і справді, я не думаю, що вони повинні бути всередині . Я чув, що визначення градієнтів у SVG однакові, і навіть не буде працювати, якщо вони є в . Незважаючи на це, це все ще “блок коду SVG, який ми лише визначаємо використовувати пізніше”, тому я, швидше за все, продовжуватиму називати його “блоком SVG defs”.