Как изменять цвет svg иконки?

Question

[Neyury]

Есть svg иконки, требуется изменить цвет при наведении, как это делается? Натыкался на и другие связанные с ним теги, но понятной статьи по ним не нашел.

Answer 1

[Павел Китьян]

codepen.io/luiscarvalho/pen/hJFrx

Comments

[Neyury]

Можете разъяснить пример? Я так понимаю из svg файла я вытаскиваю и ? нужен ли где то сам файл при этом как то подключать или где то хранить?

[Neyury]

И где можно почитать побольше о этих тегах и их атрибутах?

[Павел Китьян]

SVG можно размещать как inline-кодом (т.е. SVG-код прямо в дерево HTML), так и как обычное изображение. Первый случай в примере, который я нагуглил. При этом вам доступна возможность управлять стилями SVG-элементов через CSS (Да, там другие свойства, а некоторые просто иначе называются). Кроме того, можно работать и javascript-ом с элементами SVG.
А во втором случае вы получаете просто изображение. И тут для hover вам уже надо делать по-старинке - спрайтами в бэкграунде, например.

Почитайте:
https://css-tricks.com/using-svg/
https://developer.mozilla.org/ru/docs/Web/SVG/Attribute

[Павел Китьян]

Neyury: Если используете первый вариант, то файл как таковой перестаёт существовать. Его SVG-код встраивается в HTML.

Разумеется, когда мы рассматриваем второй случай (вставка в качестве img src или background какого-то html-элемента), то можно использовать еще и data-url:
jsfiddle.net/6WAtQ

Но всё это не дает доступа к SVG.

Есть более сложный (возможно, слабо кроссбраузерный) способ. Использовать для внедрения теги object и т.п. Тогда файл svg будет отдельно и доступ к нему будет некоторым способом.
См.: stackoverflow.com/questions/8102528/how-do-you-acc...

Но, думаю, того не стоит...

[Neyury]

Павел Китьян: Я попробовал разные способы подключения svg, пока самый подходящий вариант, это писать inline-кодом. Но это слишком загромождает html код, как вариант можно вставлять этот код при загрузке страницы с помощью js.

Но я хочу попробовать другой вариант, можно вставить svg через object и прописать в самом файле (внутри тега ), это работает но не очень удобно, так же пишут что можно не писать style, а подключить файл.css (тоже в файле svg), но у меня это не получается. Вы случаем не знаете как это сделать? Заранее спасибо.

[Павел Китьян]

Neyury: Разумеется, можно подключить стили CSS-файлом. А вот насчёт включения их в сам SVG - есть сомнения, но категорически "нет" не скажу, надо смотреть стандарт.

Если не нравится загромождение кода, то можно пользоваться инклюдами. Либо серверными, либо клиентскими. Зависит от того, какие фреймворки и шаблонизаторы используете.
Например в случае использования ангуляра, наверное можно использовать ng-include и убить сразу двух зайцев. У вас будут отдельные мальенькие HTML-файлы (не полноценные, только с кучком DOM, содержащим SVG-вставку). А при сборке странице, ангуляр сам распихает эти вставки в дерево и к ним применятся стили из CSS-файла, который прописан для главной HTML-страницы.

Возможно, опытные ангулярщики возразят. Не претендую, поскольку недавно за него взялся.

[Neyury]

Павел Китьян: Нашел как подключить файл стилей в файл svg. Нужно написать в файле перед открывающим тегом это <?xml-stylesheet type="text/css" href="svg.css"?>, затем задаем тегу path класс или id, и можно прописывать какие нужно стили. Правда таким образом у меня получилось воздействовать только на саму иконку, т.е class:hover #svg-icon{ стили } не вышло.

[Alex Ivanov]

Neyury, вот кодировка со style внутри.
я правда еще не пробовал всё менять.
но как пример надеюсь поможет

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 148.5 91" style="enable-background:new 0 0 148.5 91;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#E6E7E8;}
	.st1{fill:#D8D8D8;}
	.st2{fill:#58595B;}
	.st3{fill:#4A8EBC;}
	.st4{fill:#726658;}
	.st5{fill:#63C458;}
	.st6{fill:#FCF05B;}
	.st7{fill:#D7F6FF;}
	.st8{fill:#D1D3D4;}
	.st9{fill:#939598;}
	.st10{fill:#919191;}
	.st11{fill:#FFBA1F;}
	.st12{fill:#F7941D;}
	.st13{fill:#231F20;}
	.st14{fill:#C6C6C6;}
	.st15{fill:none;stroke:#231F20;stroke-width:1.7053;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
	.st16{fill:#9FE4FF;}
	.st17{fill:none;stroke:#231F20;stroke-width:1.5177;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
	.st18{fill:none;stroke:#231F20;stroke-width:1.1776;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
	.st19{fill:none;stroke:#00AEEF;stroke-width:1.7053;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
	.st20{fill:none;stroke:#231F20;stroke-width:1.6435;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
	.st21{fill:none;stroke:#E5235F;stroke-width:1.7053;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
	.st22{fill:none;stroke:#FFBF0D;stroke-width:1.7053;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
	.st23{fill:none;stroke:#8DC63F;stroke-width:1.7053;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
	.st24{fill:#414042;}
</style>
<g>
	<path class="st24" d="M21.8,80.5c0,1.3-0.6,2.4-1.8,3.2c-1.1,0.8-2.6,1.2-4.3,1.2c-1.3,0-2.5-0.3-3.7-0.8c-0.6-0.3-1.1-0.8-1.6-1.3
		c-0.3-0.3-0.4-0.5-0.6-0.8C9.7,81.9,9.3,81,9.4,81l2.6-0.9c0.2,0.8,0.8,1.6,1.6,2c0.6,0.3,1.3,0.5,2.1,0.5c1.2,0,3-0.4,3-1.9
		c0-0.5-0.2-0.9-0.6-1.3c-0.2-0.2-0.3-0.3-0.5-0.4c-0.4-0.3-0.9-0.6-1.3-0.7c-0.3-0.2-0.7-0.3-1-0.4c-0.8-0.3-1.6-0.7-2.3-1.2
		c-0.3-0.2-0.5-0.3-0.8-0.5L12,76c-0.3-0.3-0.6-0.5-0.8-0.8c-0.4-0.6-0.7-1.3-0.7-2.1c0-1.7,1-2.7,1.8-3.3c1-0.7,2.3-1.1,3.7-1.1
		c1.1,0,2.1,0.2,3,0.7c0.5,0.2,0.9,0.5,1.3,0.9c0.3,0.3,0.5,0.5,0.7,0.8l0.3,0.5c0,0,0.3,0.5,0.3,0.5l-2.6,1
		c-0.2-0.7-0.8-1.3-1.3-1.6c-1.3-0.7-4.2-0.5-4.2,1.5c0,0.5,0.2,0.9,0.6,1.3c0.1,0.1,0.3,0.3,0.4,0.3c0.8,0.6,1.8,1,2.7,1.3l0.7,0.3
		c0.2,0.1,0.4,0.2,0.6,0.3c0.6,0.3,1.3,0.6,1.8,1.1c0,0,0,0,0,0C21.3,78.4,21.8,79.4,21.8,80.5z"/>
	<path class="st24" d="M29.5,69c0.6-0.2,1.2-0.2,1.8-0.2c1.5,0,2.9,0.4,4.2,1.2c1.3,0.8,2.3,2,3,3.4c0.3,0.5,0.4,1.1,0.6,1.7
		l0.1,0.7l-13.1,3c0.5,1.4,1.4,2.4,2.8,3.1c1.1,0.5,2.4,0.7,3.6,0.4c1.4-0.3,2.7-1.3,3.4-2.5l2.3,1c-0.5,0.9-1.1,1.7-1.9,2.3
		c-1,0.8-2.1,1.3-3.3,1.6c-2.1,0.5-4.2,0.1-6-1c-1.8-1.2-3.1-2.9-3.6-5c-0.5-2.1-0.2-4.3,1-6.1C25.7,70.7,27.4,69.5,29.5,69z
		 M30.1,71.4c-1.1,0.3-2,0.8-2.8,1.6c-0.4,0.5-0.8,1.1-1,1.7c-0.3,0.7-0.4,1.3-0.5,2l10.5-2.4c-0.8-1.2-1.7-2.1-3-2.7
		C32.2,71.3,31.1,71.2,30.1,71.4z"/>
	<path class="st24" d="M68.8,78.6v5.9h-2.9v-7.3c0-1.5-0.1-3.1-1-4.3c-0.1-0.2-0.3-0.3-0.4-0.4c-1.9-1.7-5.2-1.5-6.9,0.4
		c-1,1.2-1,2.9-1,4.2v7.3h-2.8v-7.3c0-1.5-0.1-3.1-1-4.3c-0.1-0.2-0.3-0.3-0.4-0.4c-1.9-1.7-5.2-1.5-6.9,0.4
		c-1.1,1.2-1.1,2.9-1.1,4.2v7.3h-2.8V69.2h2.8v2.4c0,0,1-1.9,3.6-2.5c2.4-0.5,5.4,0,6.9,2c0.3,0.3,0.4,0.6,0.6,0.9
		c0.7-0.9,2.2-2.4,4.6-2.9c2.4-0.5,5.5,0,7.1,2C68.8,73.3,68.8,76.1,68.8,78.6z"/>
	<path class="st24" d="M77.1,69c0.6-0.2,1.2-0.2,1.8-0.2c1.5,0,2.9,0.4,4.2,1.2c1.3,0.8,2.3,2,3,3.4c0.3,0.5,0.4,1.1,0.6,1.7
		l0.1,0.7l-13.1,3c0.5,1.4,1.4,2.4,2.8,3.1c1.1,0.5,2.4,0.7,3.6,0.4c1.4-0.3,2.7-1.3,3.4-2.5l2.3,1c-0.5,0.9-1.1,1.7-1.9,2.3
		c-1,0.8-2.1,1.3-3.3,1.6c-2.1,0.5-4.2,0.1-6-1c-1.8-1.2-3.1-2.9-3.6-5c-0.5-2.1-0.2-4.3,1-6.1C73.2,70.7,75,69.5,77.1,69z
		 M77.7,71.4c-1.1,0.3-2,0.8-2.8,1.6c-0.4,0.5-0.8,1.1-1,1.7c-0.3,0.7-0.4,1.3-0.5,2l10.5-2.4c-0.8-1.2-1.7-2.1-3-2.7
		C79.8,71.3,78.7,71.2,77.7,71.4z"/>
	<path class="st24" d="M100.1,72.5c-1.9-1.7-5.2-1.5-6.9,0.4c-1.1,1.2-1.1,2.9-1.1,4.2v7.3h-2.8V69.2h2.8v2.4c0,0,1-1.9,3.6-2.5
		c2.4-0.5,5.5,0,7.1,2c1.7,2.1,1.6,4.9,1.6,7.5v5.9h-3v-7.3c0-1.5-0.1-3.1-1-4.3C100.4,72.8,100.2,72.7,100.1,72.5z"/>
	<path class="st24" d="M122,79.9c-0.4,1-1,1.8-1.7,2.6c-1.5,1.5-3.5,2.3-5.6,2.3c-2.1,0-4.1-0.8-5.6-2.3c-1.5-1.6-2.3-3.6-2.3-5.7
		c0-1,0.2-2.1,0.6-3c1.2-3,4.3-5,7.5-5c2.1,0,4.1,0.9,5.5,2.4c1.5,1.5,2.3,3.5,2.3,5.6C122.6,77.9,122.4,78.9,122,79.9z M120.1,76.8
		c0-1.5-0.6-2.8-1.6-3.9c-1-1.1-2.4-1.6-3.9-1.6c-3,0-5.4,2.5-5.4,5.5c0,1.5,0.6,2.9,1.6,3.9c1,1,2.4,1.6,3.9,1.6
		c1.5,0,2.8-0.6,3.9-1.6C119.5,79.7,120.1,78.3,120.1,76.8z"/>
	<path class="st24" d="M130.7,85.3l-7.8-16.1h2.8l4.9,10.4l4.9-10.4h2.8L130.7,85.3z"/>
</g>
<g>
	<path class="st24" d="M11.6,58.3V17.5c0-9.2,5.8-15.3,14.5-15.3c8.8,0,14.6,6.1,14.6,15.3v40.8c0,1-0.6,1.5-1.5,1.5h-7.3
		c-0.9,0-1.5-0.5-1.5-1.5v-16h-8.8v16c0,1-0.5,1.5-1.4,1.5H13C12,59.8,11.6,59.3,11.6,58.3z M30.4,33V16.8c0-3.2-1.6-5.1-4.4-5.1
		s-4.4,1.9-4.4,5.1V33H30.4z"/>
	<path class="st24" d="M73.1,50.8c1,0,1.5,0.5,1.5,1.4v6.6c0,0.9-0.5,1.4-1.5,1.4h-9.2c-8.8,0-13.9-6.2-13.9-14.7v-41
		c0-0.9,0.5-1.4,1.5-1.4h7.4c1,0,1.5,0.5,1.5,1.4V45c0,3.8,2,5.8,4.5,5.8H73.1z"/>
	<path class="st24" d="M78.2,44.9v-27c0-9,5.8-15.2,14.6-15.2h8.5c0.9,0,1.5,0.5,1.5,1.4v6.5c0,1-0.6,1.5-1.5,1.5H94
		c-3.5,0-5.6,2.4-5.6,6.2v8.4h10.9c1,0,1.5,0.6,1.5,1.5v6.2c0,1-0.5,1.5-1.5,1.5H88.4v8.9c0,3.7,2.1,6.2,5.6,6.2h7.3
		c0.9,0,1.5,0.5,1.5,1.4v6.6c0,0.9-0.6,1.4-1.5,1.4h-8.5C84,60.1,78.2,54,78.2,44.9z"/>
	<path class="st24" d="M134.1,31.1c3,2.6,4.6,6.2,4.6,10.5v16.8c0,1-0.6,1.5-1.5,1.5H130c-0.9,0-1.5-0.5-1.5-1.5V40.8
		c0-3-1.6-5-4.2-5c-2.5,0-4.2,2-4.2,5v17.5c0,1-0.5,1.5-1.4,1.5h-7.3c-1,0-1.5-0.5-1.5-1.5V41.6c0-4.3,1.6-7.9,4.6-10.5
		c-3-2.6-4.6-6.2-4.6-10.5V4.4c0-0.9,0.5-1.4,1.5-1.4h7.3c0.9,0,1.4,0.5,1.4,1.4v16.9c0,3,1.7,5,4.2,5c2.6,0,4.2-2,4.2-5V4.4
		c0-0.9,0.6-1.4,1.5-1.4h7.3c0.9,0,1.5,0.5,1.5,1.4v16.1C138.7,24.9,137.1,28.5,134.1,31.1z"/>
</g>
</svg>