title: Override CSS property in external SVG image
body: <p>I have following html and svg files:</p>
  
  <p><strong>home.html</strong></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
    &lt;style&gt;
     span {
      filter: invert(100%)
     }
    &lt;/style
  &lt;/head&gt;
  &lt;body&gt;
    &lt;span&gt;&lt;img src="my.svg" /&gt;&lt;/span&gt;
    &lt;div&gt;&lt;img src="my.svg" /&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>my.svg</strong></p>
  
  <pre><code>&lt;svg version="1.1"
   baseProfile="full"
   width="36" height="36"
   xmlns="http://www.w3.org/2000/svg"&gt;
  
    &lt;rect width="100%" height="100%" fill="red" /&gt;
  
  &lt;/svg&gt;
  </code></pre>
  
  <p>The two rectangle are being rendered: one light blue and second red, as expected.
  How can I preserve red color of both images, by updating .svg code only?
  Unfortunately, I cannot change the code of the html page, that hosts my image.</p>