Как вставить svg иконку в html файл, чтобы можно было менять цвет обводки при наведении?

Question

[Сергей Бурдужа]

У меня есть иконка, я ее открыл в редакторе

Как мне поменять цвет при наведении и можно ли оптимизировать иконку?
Заранее благодарен.

Comments

[Moskus]

Вы видели, сколько здесь до вас уже это спрашивали? Вбейте в поиск "менять цвет SVG".

[Сергей Бурдужа]

Moskus, Видел, но не нашел толкового ответа, поэтому и спросил.

[Moskus]

Сергей Бурдужа, какой вопрос, такой ответ. Вы ведь ещё и код скриншотом привели. Как думаете, будет кто-то вам его набивать с картинки и править?

Answer 1

[Максим]

Я перепечатовать не буду SVG но скажу так : любая векторная графика не кроссбраузерно работает при hover и потому напридумывали кучу разных библиотек svg.js tween.js и.т.д , очень нужно применять modernizr.js
анимация smil - не поддерживается в IE11 и ниже и не поддерживается в Edge , на англоязычном stackoverflow часто появляются вопросы "как же это сделать для Edge" на том же hongikat.com вообще целая полемика на эту тему но их примеры при просмотре в IE или в Edge так же не работают

вот аналогичная тема на русском ресурсе ... с полезной ссылкой на git

Answer 2

[Сергей Бурдужа]

Проблема в том, что дизайнер экспортировал иконку не в том формате, отсуствуют пути.
Код должен выглядеть примерно так

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="30px" height="30px" viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve">
   <path id="facebook" fill="#ffffff" d="M17.252,11.106V8.65c0-0.922,0.611-1.138,1.041-1.138h2.643V3.459l-3.639-0.015
	c-4.041,0-4.961,3.023-4.961,4.961v2.701H10v4.178h2.336v11.823h4.916V15.284h3.316l0.428-4.178H17.252z"/>
  </svg>

Вот так вот работает.