Большое кол-во размеров svg иконок, как быть?

Question

[lavezzi1]

Есть 30 иконок одного размера. Но в разных местах использования нужны разные размеры. Как быть? Нужно готовить иконки для маленького/среднего/большого размера и упаковывать все размеры в спрайт, так? Или можно как то ресайзить?

Comments

[Сергей Соколов]

SVG это же вектор – можно без потерь увеличивать и уменьшать, как хочется. Но не совсем тривиально – там ещё есть viewport. Почитайте, например.

[Сергей Соколов]

И да, можете все 30 засунуть в один файл, и выбирать, что показывать «окном»

Answer 1

[Константин Величко]

Используйте svg symbol или defs, через css задавайте размеры и заливку пр.
codepen.io/Zoxon/pen/PNeJOx?editors=1100
Либо используйте спрайт, там размеры иконок можно задвать через background-size, но заливкой нельзя управлять
Иконочные шрифты не рекомендую использовать

Comments

[lavezzi1]

Круто, спасибо. Правда пока не понял от чего размер use отличается от контейнера в котором он лежит. От этого иногда иконка размытая. Иногда даже получается так, в хроме четкая, а в ФФ блюр. Или наоборот.

[Константин Величко]

Баг вроде https://bugzilla.mozilla.org/show_bug.cgi?id=1046835

[lavezzi1]

Константин Величко: А, про это знаю, да, спасибо. Объясните другое, пожалуйста, почему иногда элемент use отличается по размерам от своего контейнера svg?

[Константин Величко]

Если вы про дугой свой вопрос на эту тему (Почему деформируется svg иконки вставленна через symbol?, то сравните мой пен и ваш, может быть поймете в чем дело.
Как вариант не правильные параметры viewBox и бесполезные трансформации, лишние группы.

Answer 2

[DSoly]

IMHO наиболее практично использовать svg-иконки с помощью иконочных шрифты. Например на icomoon.io, создаем иконочный шрифт и подключаем его к сайту.
Далее, чтобы вставить иконку в нужное место html-страницы достаточно прописать ("icon-*" - класс нужной иконки из шрифта). И с помощью обычного CSS (font-size, color и т.д.) устанавливаем размер, цвет... как индивидуально так и группами, это уже как душа пожелает.