Как сделать свечение вокруг SVG иконки?

#css

Как создать свечение вокруг иконки SVG?
Иконка SVG будет являться ссылкой, то есть hover работает только в рамках этой иконки.
Форма иконки сложная (не квадрат или груг).
Иконка то же должна менять цвет при наведении. 
    

Ответы

Ответ 1

Если цвет подсветки должен зависить от цвета картинки, то можно дважды положить эту
картинку (одну поверх другой) и нижнюю заблюрить:



svg {
  height: 8em;
}

div {
  position: relative;
  display: inline-block;
  margin: 1em;
}

div > svg:first-child {
  filter: blur(16px);
  overflow: visible;
  position: absolute;
  z-index: -1;
}


  
  



Ответ 2

Вот так:



.icon:hover {
  filter: drop-shadow(0 0 10px red);
}
.icon:hover path {
  fill: red;
}



Ответ 3

Если свечение одноцветное, то можно использовать css-фильтр drop-shadow:



svg + svg {
  filter: drop-shadow(0 0 8px red);
  overflow: visible;
}