SVG спрайты, 4 способа использования

Мы давно собирались делать видео про SVG спрайты, и вот наконец-то случилось. Существует четыре классических способа использования (с CSS и JavaScript), которые мы и рассмотрим, а еще поговорим о способах практического их применения: анимации и работа с кучей иконок.

#

SVG спрайт инлайново в HTML

Первый способ — положить SVG код прямо в HTML, спрятать его с помощью display: none и понаписать там несколько <g> элементов внутри блока <defs>. Это старый способ, который потом улучшили заменив <defs> и <g> на несколько элементов <symbol>.

Обращаться к «символам» можно через блок <use> и атрибут xlink:href по айдишнику.

Но в таком случае браузер ничего не может закешировать и на на помощь приходит способ #2.

#

SVG спрайт в отдельном файле

Отличается от первого только тем, что мы кладем спрайт в какую-нибудь директорию и к элементам обращаемся с помощью того же атрибута xlink:href, но вместо «голого» айдишника нужно сначала написать сам файл.

Так браузер будет кешировать файл на всех страницах вашего сайта и не придется его каждый раз загружать.

Инструменты для сборки: grunt и gulp.

#

SVG спрайт из CSS файла

Еще один способ — выкладывать SVG напрямую в CSS с помощью data:image или data:url. Нам тут в комментариях советовали, что не стоит копипастить чистый SVG, лучше эскейпить, а то вдруг чего.

Инструменты для сборки: grunt, gulp, онлайн.

#

SVG спрайт с общим viewbox

Классический спрайт с одним общим «полотном». Обращение к конкретным элементам происходит посредством сдвигания viewox. Используется в основном для различных анимаций. Напримет таких.

See the Pen SVG Sprite Animation #2 by Sarah Drasner (@sdras) on CodePen.

#

Заключение

Использование SVG спрайтов существенно облегчает работу с множеством иконок, к ним проще получать доступ и их проще стилизовать. Плюс к ним не применяется сглаживание (антиалиасинг) в отличие от иконочных шрифтов.

Fallback для старых и хромых веб-дизайнеров браузеров: svg4everybody.

Для пошаговых и не только анимаций, использование SVG спрайтов меняет ровно то, что они векторные и хорошо смотрятся везде. Ну и их можно скриптить по частям, что дает бесконечные возможности для творчества.

Если вы, конечно, будете этими возможностями пользоваться.