Change color of SVG - css

Question

I have some svg image like this
circles.svg
<svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="#fff">
<g fill="none" fill-rule="evenodd">
<g transform="translate(1 1)" stroke-width="2">
<circle stroke-opacity=".5" cx="18" cy="18" r="18"/>
<path d="M36 18c0-9.94-8.06-18-18-18">
<animateTransform
attributeName="transform"
type="rotate"
from="0 18 18"
to="360 18 18"
dur="1s"
repeatCount="indefinite"/>
</path>
</g>
</g>
</svg>
And use it like this
<img src="circles.svg" width="50" alt=""/>
But i dont know how to change color
I have tried
.color{
fill:red;
}
<img src="circles.svg" width="50" alt="" class="color"/>
But it does not work, i dont want to change SVG i want only to change color by html, is that possible, not to edit primary SVG?

Answer 1

CSS does not apply across document boundaries. Since your SVG is in a different document, you cannot affect it's style using CSS in your HTML.
You would need to inline the SVG in your HTML file.

Answer 2

Try this Link
HTML
<div>
<svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="#fff">
<g fill="none" fill-rule="evenodd">
<g transform="translate(1 1)" stroke-width="2">
<circle stroke-opacity=".5" cx="18" cy="18" r="18"/>
<path d="M36 18c0-9.94-8.06-18-18-18">
<animateTransform
attributeName="transform"
type="rotate"
from="0 18 18"
to="360 18 18"
dur="1s"
repeatCount="indefinite"/>
</path>
</g>
</g>
</svg>
</div>
css
div {
color: blue;
}
div svg {
fill: currentColor;
}