Спрайт svg — как правильно варить?

Question

[Aleks Front]

Добрый день.
Все чаще вижу использование svg спрайтов. По ним пробежался почитал не сколько статей. Осталось куча вопросов. Особенно в построение сего дела с помощью gulp sass и например плагина gulp-svg-sprites.
1. В дизайне есть иконки разного размера, разного цвета. Эффекты hover и тому подобное. Вопрос как варить все? Почему то сложилось впечатление, что все иконки должны быть одного размера ( например 16x16 px ). Как тогда быть, когда одна и та же иконка требуется разных размеров ? Речь идет именно о спрайте с фоновым изображением svg. Как ловить ховер эфекты ?
2. Есть ли положительный опыт с плагином gulp-svg-sprites и какие подводные камни стоит опасаться ? Может кто поделиться своим вариантом и будет есть с чем сравнивать ?
3. Кто нить делал с помощью gulp-svg-sprites отдельные спрайты для разных типов иконок, например разеделение на интерфейс и инфо графику. Например icon-ui-sprite.svg и icon-services.svg.
4. Как и чем лучше оптимизировать спрайты svg ?

Answer 1

[Андрей Хохлов]

Совсем недавно отвечал на вопросы
про генерацию нескольких спрайтов: Способы генерации нескольких спрайтов?
и про подход к хранению графики вообще: Шрифты или картинки для иконок что оптимальнее?

Послушайте как делают в 2гис: 2014.codefest.ru/lecture/677 (правда сейчас судя по всему от ase64 отказываются)

По вашим вопросам:

1. К сожалению, используя спрайт мы жестко привязаны к размерам иконки. Т.е. если у нас одинаковая иконка 16*16 и 32*32 - придется добавить в спрайт обе. Если у нас серая по умолчанию и синяя по ховеру - придется добавить обе.
Решают эту проблему шрифты (но со своими, на мой взгляд критичными, недостатками) и svg symbols (тоже есть минусы, внедрять планирую начинать в следующем году).

2. Да, https://github.com/jkphl/gulp-svg-sprite - всё положительно, мощная штука. Конечно нужно будет заморочиться со своим шаблоном файла стилей, чтобы всё по красоте.

Подводный камень есть со спрайтами вообще. Когда сделаете - попробуйте подвигать масштаб страницы. Иконки на некоторых уровнях"подрежутся". Погуглите про эту проблему.

3. Ответ в первом абзаце

4. Использую https://www.npmjs.com/package/gulp-imagemin для пожатия всей графики, включая svg

Answer 2

[Максим Гатилин]

Написал статью на эту тему на хабре.

Comments

[Aleks Front]

Да почти такой же метод использую сейчас ( инлайн вставка иконок ). Но он частенько напрегает множеством не удобных моментов. Пришел к выводу к тому что ( конечно зависит от задачи ), лучше использовать фоновыми - это как классика и меньше html кода и js ( все же возьмем тот же самый выпадающий список с стрелками верх вниз. И вот статья мне понравилась, не плохо на мой взгляд все тут. https://www.liquidlight.co.uk/blog/article/creatin...

[Максим Гатилин]

Согласен с вами, надо комбинировать, никак руки не дайдут наладить "двойную" систему.

[Aleks Front]

Максим Гатилин: Так же вопрос, по вашей статье, зачем указывать размер иконкам в px, это не совсем удобно же. И кода больше получается. Мне по душе решение у icomoon
.icon {
display: inline-block;
width: 1em;
height: 1em;
fill: currentColor;
}
.icon-arrow-bottom{
width: 1.2em;
}

В таком варите как то и по чище да и перебивать нечего не потребуется, в случае если иконка будет такого же рахзмера как и текст в одном родительском контейнере.

[Anton]

никак не пойму про локал сторедж как его подцепить, этот скрипт