Generated by SassMeister.com.

input.scss

div  {
    display: flex;
}
svg {
    width: 300px;
}

markup.html

<div >
<h2>SVG 1 - has blue in inline styles</h2>
<svg id="SVG-1"   
viewBox="0 0 611.8 144"><defs>
<style>.cls-2{fill:blue;}</style>
</defs> <path class="cls-2" d="M159.5,71.6c1.7,8.2,1.7,9.1,1.7,10.1,0,14-15.7,21.8-36.4,21.8C78,103.5,37.1,76.1,37.1,58a18.35,18.35,0,0,1,1.5-7.3l3.7-9.1a6.15,6.15,0,0,0-.2,1.9c0,9.2,36.3,39.4,84.9,39.4,12.5,0,30.6-2.6,30.6-17.5a19.53,19.53,0,0,0-.3-3.4Z"/></svg>

<h2>SVG 2 - has red in inline styles</h2>

<svg id="SVG-2"  
viewBox="0 0 611.8 144"><defs>
<style>.cls-2{fill:red;}</style>
</defs> <path class="cls-2" d="M159.5,71.6c1.7,8.2,1.7,9.1,1.7,10.1,0,14-15.7,21.8-36.4,21.8C78,103.5,37.1,76.1,37.1,58a18.35,18.35,0,0,1,1.5-7.3l3.7-9.1a6.15,6.15,0,0,0-.2,1.9c0,9.2,36.3,39.4,84.9,39.4,12.5,0,30.6-2.6,30.6-17.5a19.53,19.53,0,0,0-.3-3.4Z"/></svg>

</div>
    <h3>but because they share the same class, both are red.</h3>

output.css

div {
  display: flex;
}

svg {
  width: 300px;
}

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.26.11",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}