SVG має дуже крутий і потужний елемент, який називається . Це досить просто в концепції. Він знаходить ще один біт коду SVG, на який посилається ідентифікатор, і клонує його всередині елемента.
Найбільш основним варіантом використання буде: я вже намалював ці фігури раз на сторінці, і я хочу намалювати їх ще десь в іншому місці. Давайте дістати ту фігуру (фігури) і намалювати її ще раз.
Ми можемо використовувати цю здатність як основну концепцію для (drumroll!) Та всієї системи значків! Ми можемо взяти всі фігури, які ми маємо намір використовувати на сторінці, в одному великому блоці SVG. Ми обернемо їх усіх тегом, який є семантичним способом сказати: "Ми просто визначаємо ці речі, якими слід користуватися пізніше". Це також гарантує , що вони не будуть надавати (але ви повинні також сам.display: none;
Це працює так:
Цей xlink:hrefатрибут у стилі фанк посилається на ідентифікатор деінде. Цей ідентифікатор може бути на будь-якому елементі фігури, наприклад, або , або він може бути на групі елементів, таких як .
Найкраще у випадку із системою значків вона може бути на елементі. На додаток до правильної семантичної корекції (піктограма є символом, ні?), Елемент може містити власний атрибут viewBox та інформацію про доступність, як-от і теги. Це робить реалізацію дуже простою (як показано вище).
Тож вам просто потрібно переконатися, що це визначено десь у документі:
Basketball Дивіться Pen JoDmd Кріса Койєра (@chriscoyier) на CodePen.