Load SVG inline and change fill color

Question

I use SVG like this:

<image x="0" y="0" width="40" height="40" href="/resource.svg"></image>

This is the resource.svg:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="217px" height="131px" viewBox="-0.5 -0.5 217 131"><defs/><g><ellipse cx="108" cy="65" rx="108" ry="65" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/><ellipse cx="108" cy="65" rx="40" ry="40" fill="#a0522d" stroke="#6d1f00" pointer-events="all"/></g></svg>

Now, I should dynamically change the color of the svg. To do this, I considered if I could load the SVG entirely (inline?) rather than as a link, and then replace the values ​​of the fill and stroke (using string replacement). If I use it inline, is this also possible with CSS?

Can someone help me if this is possible? If so, in which direction do I have to research further?

Answer 1

Remove fill attribute from svg code. This forces it to always be white, as it is now. Alternatively, if you are working in a framework, you can make the fill property dynamic (e.g. fill={{myProp}}).