:hover not working on svg when svg is in external file
<p>So I'm learning SVG animation.</p>

<p>Basically all I'm trying to do is change the color of a circle when it's hovered over.</p>

<pre><code>&lt;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"&gt;

    &lt;style type="text/css"&gt;

        .st0:hover {
            fill: red;
         }

    &lt;/style&gt;

    &lt;g id="Circle"&gt;
        &lt;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"/&gt;
    &lt;/g&gt;

&lt;/svg&gt;
</code></pre>

<p>This works exactly as expected when the svg code is inside the html file.</p>

<p>However, when I put it inside an svg file and call it in using the img tag the hover effect no longer works.</p>

<pre><code>&lt;img class="logo" src="url/logo.svg"&gt;
</code></pre>

<p>Is there a way to do this without embedding the svg code inside the html?</p>

<p>Thanks!</p>