SVG траблы

[Sergik+]

Подскажите плиз кто работал с svg, встраиваю svg прямо в html и все круто кроме одного -

примерно 2/3 html это svg и еще гадкий jade в sublime 3 ломает индентацию (приходится

ручками подправлять).

Решил встроить svg спрайтами через background-image но есть проблема - не могу

использовать fill, что мне делать то, отдельный спрайт для ховера делать ?

[Galaxy]

Решил встроить svg спрайтами через background-image но есть проблема - не могу использовать fill, что мне делать то, отдельный спрайт для ховера делать ?

через css можно менять fill, другое дело если fill жестко прописан у обьекта в спрайте, то через css оно не поменяется(возможно !important поможет, но я не пробовал)

[Sergik+]

 

Решил встроить svg спрайтами через background-image но есть проблема - не могу использовать fill, что мне делать то, отдельный спрайт для ховера делать ?

через css можно менять fill, другое дело если fill жестко прописан у обьекта в спрайте, то через css оно не поменяется(возможно !important поможет, но я не пробовал)

 

Fill только для html работает, для background-image он не работает, в том и проблема.

[Great Rash]

Если иконка одноцветная, то можно в HTML сделать тупо квадрат определенного цвета, а SVG использовать как маску. Правда не знаю везде ли SVG-маски работают. Ну или отказаться от background-image в пользу инлайнового <svg>. В таком случае для <path /> (или чем там у вас иконки сделаны) можно установить атрибут fill="currentColor" и менять color в CSS.

[Sergik+]

Если иконка одноцветная, то можно в HTML сделать тупо квадрат определенного цвета, а SVG использовать как маску. Правда не знаю везде ли SVG-маски работают. Ну или отказаться от background-image в пользу инлайнового <svg>. В таком случае для <path /> (или чем там у вас иконки сделаны) можно установить атрибут fill="currentColor" и менять color в CSS.

У меня сейчас онлайн svg, цвет через css меняю но html превратился в кашу, 16 иконок и 4 изображения в svg и это

только на первой страничке, примерно 10 страничек и везде 10 иконок повторяются, вот и решил через спрайты.

К сожалению придется по ховеру другой спрайт подгружать, а так не хотелось (((

[Great Rash]

Можно сделать всего один большой SVG. А остальное подставлять в нужное место, используя <use />. В таком случае код иконки получится не больше обычной иконки:

<svg viewBox="0 0 32 32">  <use xlink:href="#my_ico_id" /></svg>

[Sergik+]

Можно сделать всего один большой SVG. А остальное подставлять в нужное место, используя <use />. В таком случае код иконки получится не больше обычной иконки:

 

<svg viewBox="0 0 32 32">  <use xlink:href="#my_ico_id" /></svg>

Угу тоже думал над такой реализацией, попробую все варианты а потом отпишусь здесь,

думаю многим будет интересно.

[Sergik+]

Ваапще запутался, сделал через спрайты и только тогда понял что не могу менять размер иконок,

может я чего не догоняю ? Как мне в svg спрайтах менять размер при изменении размера экрана ?