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