Ми витратили багато часу на розмови про використання вбудованого елемента та елемента. Ви можете створити систему значків, яка має багато переваг.
Ви можете створити систему піктограм SVG, хоча іншими способами. Ви можете викласти традиційний сітчастий лист спрайтів у SVG і робити спрайти з фоновим розташуванням, як ми робили з растровими зображеннями. У майбутньому ви зможете використовувати ідентифікатори фрагментів, що навіть стане трохи простіше. Більше інформації про ці речі.
Інший спосіб - це вбудування URI даних зображення SVG безпосередньо у файл CSS. Саме такий підхід застосовує nticрунтікон.
Grunticon - плагін Grunt для автоматизації системи піктограм SVG. Він бере папку, повну SVG, і обробляє їх у файл CSS. Тут є купа селекторів, заснованих на іменах файлів зображень SVG, які мають background-imageURI даних SVG (хоча не Base64).
Роблячи це таким чином, ви отримуєте масштабованість SVG та переваги щодо розміру файлу, але це все. І все-таки часто це все, що вам потрібно.
Хоча, мабуть, найкраща частина Grunticon - це те, що він дає вам усе необхідне для повернення назад. Сюди входить альтернативна таблиця стилів для URI-файлів даних URI даних і навіть окремих самих PNG-файлів (яку вона створює для вас). Крім того, сценарій, який ви використовуєте на своїй сторінці для визначення підтримки та завантаження лише відповідної таблиці стилів.
Я вважаю справедливим сказати, що це полегшує обробку резервних копій, ніж defs / техніку. Не те, що це неможливо.
Grumpicon - це браузерна версія Grunticon, яку ми використовували в цій трансляції.
Поки я пишу це, Grunticon працює над способом поступового вдосконалення до вбудованого вбудованого SVG, що було б дуже здорово!