Есть svg иконки, требуется изменить цвет при наведении, как это делается? Натыкался на и другие связанные с ним теги, но понятной статьи по ним не нашел.
SVG можно размещать как inline-кодом (т.е. SVG-код прямо в дерево HTML), так и как обычное изображение. Первый случай в примере, который я нагуглил. При этом вам доступна возможность управлять стилями SVG-элементов через CSS (Да, там другие свойства, а некоторые просто иначе называются). Кроме того, можно работать и javascript-ом с элементами SVG.
А во втором случае вы получаете просто изображение. И тут для hover вам уже надо делать по-старинке - спрайтами в бэкграунде, например.
Neyury: Если используете первый вариант, то файл как таковой перестаёт существовать. Его SVG-код встраивается в HTML.
Разумеется, когда мы рассматриваем второй случай (вставка в качестве img src или background какого-то html-элемента), то можно использовать еще и data-url: jsfiddle.net/6WAtQ
Но всё это не дает доступа к SVG.
Есть более сложный (возможно, слабо кроссбраузерный) способ. Использовать для внедрения теги object и т.п. Тогда файл svg будет отдельно и доступ к нему будет некоторым способом.
См.: stackoverflow.com/questions/8102528/how-do-you-acc...
Павел Китьян: Я попробовал разные способы подключения svg, пока самый подходящий вариант, это писать inline-кодом. Но это слишком загромождает html код, как вариант можно вставлять этот код при загрузке страницы с помощью js.
Но я хочу попробовать другой вариант, можно вставить svg через object и прописать в самом файле (внутри тега ), это работает но не очень удобно, так же пишут что можно не писать style, а подключить файл.css (тоже в файле svg), но у меня это не получается. Вы случаем не знаете как это сделать? Заранее спасибо.
Neyury: Разумеется, можно подключить стили CSS-файлом. А вот насчёт включения их в сам SVG - есть сомнения, но категорически "нет" не скажу, надо смотреть стандарт.
Если не нравится загромождение кода, то можно пользоваться инклюдами. Либо серверными, либо клиентскими. Зависит от того, какие фреймворки и шаблонизаторы используете.
Например в случае использования ангуляра, наверное можно использовать ng-include и убить сразу двух зайцев. У вас будут отдельные мальенькие HTML-файлы (не полноценные, только с кучком DOM, содержащим SVG-вставку). А при сборке странице, ангуляр сам распихает эти вставки в дерево и к ним применятся стили из CSS-файла, который прописан для главной HTML-страницы.
Возможно, опытные ангулярщики возразят. Не претендую, поскольку недавно за него взялся.
Павел Китьян: Нашел как подключить файл стилей в файл svg. Нужно написать в файле перед открывающим тегом это <?xml-stylesheet type="text/css" href="svg.css"?>, затем задаем тегу path класс или id, и можно прописывать какие нужно стили. Правда таким образом у меня получилось воздействовать только на саму иконку, т.е class:hover #svg-icon{ стили } не вышло.
