Наиболее легкий способ использования svg?

Question

[desuvin]

Народ, подскажите наиболее легкий способ использования svg с возможностью изменить цвет заливки в css. При условие, что svg находится в файле допустим example.svg

Answer 1

[Александр Петров]

Лучший способ — inline-svg.
Используем какой-нибудь gulp-svg-symbols, собираем все иконки в один большой файла, в котором будут использоваться символы.
Далее, в верстке используем конструкцию вида:

<svg>
  <use xlink:href='pathToImage.svg#iconName'> </use>
</svg>

use — это способ использовать символ, который объявлен где-то еще по его ID.
Однако, способ с внешним файлов не работает в ИЕ — потому подключаем svg4everybody.

Плюсы по сравнению с deSVG – один запрос, а не по запросу для каждой картинки; для всех браузеров, кроме ие не нужны никакие костыли — в deSVG будет же замена картинки на svg, лишние операции с домом.
Плюсы по сравнению со шрифтами — иконочные шрифты в мелком размере на low-dpi экранах отображаются весьма плохо.

Comments

[desuvin]

Спасибо за развернутый ответ!

[desuvin]

попробовал данное решение, но у готовых svg нельзя сменить цвет через fill

[desuvin]

Александр Петров Можете подсказать как изменить цвет через ксс у готовой иконки? Гугл не помогает

[Александр Петров]

desuvin а из самого свг-файла fill убрали? fill – наследуется. В стилях вы его ставите на svg и далее он наследуется до path. Но если у path уже стоит fill – он будет приоритетнее.

[desuvin]

Александр Петров: С помощью гулпа сделал автоматическое удаление филла. Стало все супер :)

[ilyaProphet]

как при таком варианте использования работать с изменением иконки по ховеру? или, к примеру менять состояние с не активного на активное
ничего лучше чем вот этого не нашел.

Answer 2

[Андрей Гончаров]

Вставлять тегом img, и применять плагин: deSVG
Освобождаетесь от кучи кода svg-шного в верстке и через css есть доступ до него.

Comments

[desuvin]

вот, это другое дело. Спасибо. Сейчас попробую)

[Александр Петров]

deSVG не избавляет от кучи лишних запросов. Т.е. спрайт с ним сделать не получится.