JSFiddle - React, Tailwind, and code Playground

by Voron

HTML

<p>IE10 with inline SVG</p>
<svg xmlns="http://www.w3.org/2000/svg" id="svgroot" viewBox="0 0 500 500" width="500" height="500">
  <defs>
    <filter id="invert">
        <feColorMatrix id="filter_38" type="saturate" values="0" data-filterid="38" />
    <feComponentTransfer>
    <feFuncR type="linear" slope="1.2"/>
    <feFuncG type="linear" slope="1.2"/>
    <feFuncB type="linear" slope="1.2"/>
  </feComponentTransfer>
  <feComponentTransfer>
    <feFuncR type="table" tableValues="0.95 0.05"/>
    <feFuncG type="table" tableValues="0.95 0.05"/>
    <feFuncB type="table" tableValues="0.95 0.05"/>
  </feComponentTransfer>
</filter>
  </feComponentTransfer>
</filter>
  </defs>
  <image filter="url(&quot;#invert&quot;)" x="0" y="0" width="500" height="500" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://maps.googleapis.com/maps/api/staticmap?center=1900%20Flagler%20Avenue%2C%20Key%20West%2C%20FL%2C%20United%20States&amp;zoom=15&amp;size=500x500&amp;maptype=roadmap&amp;sensor=false&amp;markers=icon%3Ahttp%3A//upload.wikimedia.org/wikipedia/en/4/48/Blank.JPG%7C1900%20Flagler%20Avenue%2C%20Key%20West%2C%20FL%2C%20United%20States" />
   </svg>