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

Народ, подскажите наиболее легкий способ использования svg с возможностью изменить цвет заливки в css. При условие, что svg находится в файле допустим example.svg
  • Вопрос задан
  • 2045 просмотров
Решения вопроса 1
Лучший способ — inline-svg.
Используем какой-нибудь gulp-svg-symbols, собираем все иконки в один большой файла, в котором будут использоваться символы.
Далее, в верстке используем конструкцию вида:
<svg>
  <use xlink:href='pathToImage.svg#iconName'> </use>
</svg>

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

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

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

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