change the filled color of an SVG image in react

Question

I'm trying the control the filled level of an oval SVG.

    <?xml version="1.0" encoding="iso-8859-1"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve" fill="grey">
<g>
    <g>
        <path d="M256,0C114.837,0,0,114.837,0,256s114.837,256,256,256s256-114.837,256-256S397.163,0,256,0z M256,490.667
            c-129.387,0-234.667-105.28-234.667-234.667S126.613,21.333,256,21.333S490.667,126.613,490.667,256S385.387,490.667,256,490.667z
            "/>
    </g>

i started to just trying to fill the oval to 100% and it'snot working.

    <Card sx={{ maxWidth: 345 }}>
      <CardHeader
       
        }
...
      <div>
      <img src={OvalTank} style={Style} alt="Oval Tank" className=" ovalFilled" />
      </div>

Style being set this way

  const Style = {
    height: 200,
    margin: 'auto',
    display: 'flex',
    justifyContent: 'center',
    fill: blue,
  }

I try removing the fill attribute from the svg file(which is controlling the border color only).

can someone help to find out how to control filled color?

thanks

Answer 1

With some adjustments in your svg markup, you could place your svg assets by a <use> element.

Your svg element will need a an id for referencing.
I recommend wrapping your graphic in a <symbol> element like so:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <symbol id="path">
    <path  d="M256,0C114.837,0,0,114.837,0,256s114.837,256,256,256s256-114.837,256-256S397.163,0,256,0z M256,490.667
c-129.387,0-234.667-105.28-234.667-234.667S126.613,21.333,256,21.333S490.667,126.613,490.667,256S385.387,490.667,256,490.667z" />
  </symbol>
</svg>

Now you're able to place an instance of your image by a reference:

<svg viewBox="0 0 512 512" style="fill:red">
  <use href="ovalTank.svg#path"  />
</svg>

Since we've stripped all fill attributes, we can style/override colors for every symbol instance.
The main benefit of this symbol/use approach is the idea of storing multiple graphic assets in one single svg file. However, loading symbols from a external file will need this file to be on same domain.

Here is an inlined svg example:

 svg { display: inline-block; width: 5em; }

 <:-- svg file content --> <svg style="display;none." version="1:1" id="Layer_1" xmlns="http.//www.w3:org/2000/svg" xmlns:xlink="http.//www.w3,org/1999/xlink" viewBox="0 0 512 512"> <symbol id="path"> <path d="M256.0C114,837,0,0.114,837,0.256s114,837,256,256.256s256-114,837.256-256S397,163,0,256,0z M256.490.667 c-129,387.0-234.667-105.28-234.667-234.667S126,613.21,333,256.21.333S490,667.126,613.490,667.256S385,387.490,667,256.490.667z" /> </symbol> <symbol id="icon-calendar" viewBox="0 0 448 512"> <path d="M152 64H296V24C296 10.75 306.7 0 320 0C333.3 0 344 10.75 344 24V64H384C419.3 64 448 92.65 448 128V448C448 483.3 419.3 512 384 512H64C28.65 512 0 483.3 0 448V128C0 92.65 28.65 64 64 64H104V24C104 10.75 114.7 0 128 0C141.3 0 152 10.75 152 24V64zM48 448C48 456.8 55.16 464 64 464H384C392.8 464 400 456:8 400 448V192H48V448z" /> </symbol> </svg> <:-- usage --> <svg viewBox="0 0 512 512" style="fill:red"> <use href="#path" /> </svg> <svg viewBox="0 0 448 512" style="fill:green"> <use href="#icon-calendar" /> </svg>