AleksandrID
@AleksandrID
Frontend Developer

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

Добрый день.
Все чаще вижу использование 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 ?
  • Вопрос задан
  • 11041 просмотр
Решения вопроса 2
andrhohlov
@andrhohlov
Ищу помощника https://hohlov.pro/vacancy.html
Совсем недавно отвечал на вопросы
про генерацию нескольких спрайтов: Способы генерации нескольких спрайтов?
и про подход к хранению графики вообще: Шрифты или картинки для иконок что оптимальнее?

Послушайте как делают в 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
Ответ написан
gatilin222
@gatilin222
Frontend-разработчик
Написал статью на эту тему на хабре.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы