[Android] SVG rendered as text instead of image

[AlbertoMeQ]

I'm trying to render a remote SVG. I'm on 2.0.6, Android 12 and Chrome is on version 91.0.4472.114.

Here is the snippet I'm using:

<Image
    source={{ uri: 'https://s3.amazonaws.com/cdn.titanvest.com/misc/car-hex.svg' }}
    style={{ width: 100, height: 100 }} //needs the size
/>

Even using inlined svg doesn't work:

<Image
    source={{
        uri: `data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px"  viewBox="0 0 100 100">
        <ellipse data-custom-shape="ellipse" cx="50" cy="50" rx="50" ry="50" fill="green"  stroke="#00FF00" stroke-width ="2" />
        </svg>`,
    }}
    style={{ width: 300, height: 300 }}

All I get is this:

The same piece of code works perfectly on iOS.

How can I fix it?

[AlbertoMeQ]

@seekshiva is this library still being worked on? Just curious to know :)

[seekshiva]

Hi @AlbertoMeQ ,

In the inlined svg example, can you remove newline chars from the string and put it in a single string?

Also # character acts as uri delimiter. Use %23 instead of # and see if that works.

[AlbertoMeQ]

@seekshiva tried this:

source={{ uri: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px"  viewBox="0 0 100 100"><ellipse data-custom-shape="ellipse" cx="50" cy="50" rx="50" ry="50" fill="green"  stroke="%2300FF00" stroke-width ="2" /></svg>' }}

Still the same text.

EDIT: For some reason, after trying to downgrade and then going back to 2.0.6 it seems to work again. I guess the update wasn't properly installed 😖

The new problem is that now the app crashes with:

Fatal signal 11 (SIGSEGV), code 1 (SEGV_MAPERR)

When I show an SVG. The crash doesn't happen if I remove the Image element.

[AlbertoMeQ]

I managed to fix it by adding the following line of code:

androidHardwareAccelerationDisabled={true}

in SvgImage.js. Another alternative is also changing the parent view to:

 <View pointerEvents="none" style={[props.style, props.containerStyle]}
          **renderToHardwareTextureAndroid={true}**>

In case @seekshiva you want to look into this or for future reference.

[AlbertoMeQ]

I submitted a PR (#60) to cover this issue. Let me know @seekshiva

[AlbertoMeQ]

@seekshiva Thanks for merging the PR. Do you know when it will be added to npm? So I can update the version on my side :D

[seekshiva]

Version 2.0.7 released with the changes.