Javascript generated svg with styles works fine in browsers but not outside browser-CodePudding

I have this javscript generated svg

<svg width="240" height="320" viewBox="0 0 240 320" fill="none" xmlns="http://www.w3.org/2000/svg">
  <svg>
    <path d="M228 319.5H12C5.64873 319.5 0.5 314.351 0.5 308V12C0.5 5.64873 5.64873 0.5 12 0.5H159.175C159.571 0.5 159.952 0.656748 160.233 0.936021L239.057 79.2681C239.341 79.5497 239.5 79.9326 239.5 80.3321V308C239.5 314.351 234.351 319.5 228 319.5Z" fill="#FFF9F2" stroke="#FFC681"/>
    </svg>
  <svg style="filter: invert(1); mix-blend-mode: color-burn">
<path fill-rule="evenodd" clip-rule="evenodd" d="M99 117C96.7909 117 95 118.791 95 121V148.939C94.3386 148.979 93.6717 149 93 149C75.3269 149 61 134.673 61 117C61 99.3269 75.3269 85 93 85C110.673 85 125 99.3269 125 117H99ZM125 117H155C157.209 117 159 118.791 159 121V177C159 179.209 157.209 181 155 181H99C96.7909 181 95 179.209 95 177V148.939C111.741 147.906 125 134.001 125 117Z" fill="#FFC681"/>
    </svg>
</svg>

this is the desired result in any program.

it has some styling (style="filter: invert(1); mix-blend-mode: burn") and inside the browser this works as expected, but these styles are totally ignored if opening it in anyother program.

what can I do in order to include the styling for the svg outside the browser?

CodePudding user response：

You might be able to replace the CSS filter and the blend mode with an equivalent SVG <filter>, as described here. With librsvg v2.50, which is what Ubuntu uses for rendering, the following does work, same as Chrome, but it fails in Firefox. For Windows, you'll have to hope. mode="color-burn" is an attribute value that was only introduced with SVG 2. Some renderers might not support it.

<svg width="240" height="320" viewBox="0 0 240 320"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <filter id="inverse-burn" color-interpolation-filters="sRGB">
    <feComponentTransfer result="invert">
      <feFuncR type="table" tableValues="1 0"/>
      <feFuncG type="table" tableValues="1 0"/>
      <feFuncB type="table" tableValues="1 0"/>
    </feComponentTransfer>
    <feImage xlink:href="#background" result="base" x="0" y="0" width="240" height="320" />
    <feBlend in="invert" in2="base" mode="color-burn" />
  </filter>
  <path id="background" d="M228 319.5H12C5.64873 319.5 0.5 314.351 0.5 308V12C0.5 5.64873 5.64873 0.5 12 0.5H159.175C159.571 0.5 159.952 0.656748 160.233 0.936021L239.057 79.2681C239.341 79.5497 239.5 79.9326 239.5 80.3321V308C239.5 314.351 234.351 319.5 228 319.5Z" fill="#FFF9F2" stroke="#FFC681"/>
  <g style="filter:url(#inverse-burn)">
     <path fill-rule="evenodd" d="M99 117C96.7909 117 95 118.791 95 121V148.939C94.3386 148.979 93.6717 149 93 149C75.3269 149 61 134.673 61 117C61 99.3269 75.3269 85 93 85C110.673 85 125 99.3269 125 117H99ZM125 117H155C157.209 117 159 118.791 159 121V177C159 179.209 157.209 181 155 181H99C96.7909 181 95 179.209 95 177V148.939C111.741 147.906 125 134.001 125 117Z" fill="#FFC681"/>
  </g>
</svg>