Мы потратили много времени на использование inline и element. Вы можете создать систему значков с множеством преимуществ.
Вы можете создать систему значков SVG и другими способами. Вы можете разложить традиционный лист спрайтов с сеткой в SVG и создать спрайты с фоновой позицией, как мы это делали с растровыми изображениями. В будущем вы сможете использовать идентификаторы фрагментов, так что это даже станет немного проще. Больше информации об этих вещах.
Другой способ - встроить URI данных изображения SVG прямо в файл CSS. Это подход, который использует Grunticon.
Grunticon - это плагин Grunt для автоматизации системы значков SVG. Он берет папку, полную SVG, и преобразует их в файл CSS. Там есть несколько селекторов, основанных на именах файлов изображений SVG, которые имеют background-imageURI данных SVG (но не Base64).
Поступая таким образом, вы получаете преимущества масштабируемости SVG и размера файла, но это все. Тем не менее, часто это все, что вам нужно.
Возможно, самое лучшее в Grunticon - это то, что он дает вам все необходимое для отката. Это включает в себя альтернативную таблицу стилей для PNG URI данных и даже самих PNG (которые она создает для вас). Плюс к этому сценарий, который вы используете на своей странице, чтобы определить поддержку и загрузить только соответствующую таблицу стилей.
Я думаю, будет справедливо сказать, что на данный момент это упрощает обработку резервных копий, чем defs / method . Не то чтобы это невозможно.
Grumpicon - это версия Grunticon для браузера, которую мы использовали в этом скринкасте.
Пока я пишу это, Grunticon работает над способом постепенного улучшения до встроенного встроенного SVG, что было бы довольно круто!