Change color of SVG

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;
}