SVG onmouseover в CSS

Question

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

<a href="../../../">
<img src="file-url" 
onmouseover="this.src='file-url'"
onmouseout="this.src='file-url'"
border="0" alt=""/></a>
</div>

Можно ли вместо URL использовать строку svg?

Спасибо заранее, что нашли время !!

Митч

Answer 1

Используйте ваш .svg в качестве фонового изображения.

<a class="link" href="../../../"></a>

a.link {
    display: block;
    width: width of your svg;
    height: height of your svg;
    background: url(path/to/your/svg);
}

a.link:hover {
    background: url(path/to/your/hover/svg);
}