Итак, я изучаю SVG анимацию.

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

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="0 0 437.1 294.4" style="enable-background:new 0 0 437.1 294.4;" xml:space="preserve">

    <style type="text/css">

        .st0:hover {
            fill: red;
         }

    </style>

    <g id="Circle">
        <path class="st0" d="M291.3,147.4c0,77-62.4,139.4-139.4,139.4S12.5,224.4,12.5,147.4C12.6,70.4,75,8,151.9,8
        C228.9,8,291.3,70.4,291.3,147.4"/>
    </g>

</svg>

Это работает точно так, как ожидалось, когда код SVG находится внутри HTML-файла.

Однако когда я помещаю его в файл svg и вызываю его с помощью тега img, эффект наведения больше не работает.

<img class="logo" src="url/logo.svg">

Есть ли способ сделать это без встраивания кода SVG в HTML?

Спасибо!