How to blend SVG Images

[nratwd]

I am trying to render an image that will have customisable colors.

The SVG exported from figma display beautifully everywhere but not using Skia or rn-svg.

For rn-svg : it is because rn-svg does not support blending-mode in svgs.
For Skia, the reason is that skia does not support inline images inside svg.

Basically, in my svg, the inline <image /> is in base64 and is used to be blended with the colors layers.
How can I display this SVG using skia ? There has to be an alternative to inline <image>. I tried using Blending but it seems impossible to use with SVG, and even more impossible to use with simple images...

here is my (simplified) svg :

<svg width="375" height="322" viewBox="0 0 375 322" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g clip-path="url(#clip0_1238_19181)">
<g clip-path="url(#clip1_1238_19181)">
<rect y="-30" width="375" height="344" fill="url(#pattern0)"/>
<g style="mix-blend-mode:color-burn" opacity="0.8">
<path fill-rule="evenodd" clip-rule="evenodd" d="M147.5[...]011Z" fill="url(#paint0_linear_1238_19181)"/>
</g>
<g style="mix-blend-mode:color-burn">
<path fill-rule="evenodd" clip-rule="evenodd" d="M[...]Z" fill="#FF7B00"/>
</g>
<g style="mix-blend-mode:color-burn">
<circle cx="177" cy="160" r="4" fill="#656565"/>
</g>
<g style="mix-blend-mode:color-burn">
<circle cx="177" cy="202" r="4" fill="#656565"/>
</g>
<g style="mix-blend-mode:color-burn">
<circle cx="177" cy="75" r="4" fill="#656565"/>
</g>
<g style="mix-blend-mode:color-burn">
<circle cx="177" cy="113" r="4" fill="#656565"/>
</g>
</g>
</g>
<defs>
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0_1238_19181" transform="translate(-0.841036 -0.462209) scale(0.0024823 0.002706)"/>
</pattern>
<linearGradient id="paint0_linear_1238_19181" x1="186.803" y1="30.5404" x2="186.803" y2="266.305" gradientUnits="userSpaceOnUse">
<stop stop-color="#0090B8"/>
<stop offset="0.0001" stop-color="#2E5BFB"/>
<stop offset="1" stop-color="#04DDA9"/>
</linearGradient>
<clipPath id="clip0_1238_19181">
<rect width="375" height="322" fill="white"/>
</clipPath>
<clipPath id="clip1_1238_19181">
<rect width="375" height="304" fill="white" transform="translate(0 -6)"/>
</clipPath>
<image id="image0_1238_19181" width="1080" height="810" xlink:href="data:image/png;base64,[base64StringHere]/>
</defs>
</svg>

[wcandillon]

Please have a look at these example, I think it does what you expect: https://github.com/Shopify/react-native-skia/blob/c029cdcf8403f2869c4c3cc560ef126fb2b1ed9f/package/src/renderer/__tests__/examples/BlendModes.spec.tsx