SVG
-изображения можно вставлять непосредственно в html
, можно использовать символьные спрайты, теги <img>
, <object>
и даже <iframe>
. Можно подключать SVG
через data-url
, css-backgrounds
, css-filters
и еще множеством способов. Но чтобы полноценно использовать всю суперсилу SVG
, необходимо вставлять SVG
-изображения непосредственно в html
-разметку. Хотя на самом деле есть еще один способ. И он удобный.
Способы генерации SVG-спрайтов на примере библиотеки svg-sprite
Недавно я решал задачу организовать все SVG-файлы, используемые в проекте, в виде одного спрайта. До этого мне приходилось использовать самописное решение для такой задачи. На этот раз я решил воспользоваться популярной библиотекой svg-sprite, однако был сильно удивлен сколько разных способов создания она предлагает. Какой-то единой статьи где были разобраны все способы я не нашел, вся информация была разбросана по блогам и отдельным публикациям. Поэтому я решил собрать доступные в библиотеке способы для генерации спрайтов в одном месте, попутно проанализировав их преимущества и недостатки. Итак, поехали.
SVG спрайт с webpack одной строкой
Пару дней назад вышла полностью обновлённая версия svg-sprite-loader — webpack лоадера для создания SVG спрайтов. Внутри я подробно рассскажу о том как он работает и чем облегчает жизнь разработчику.