some SVG image urls not loading - react native svg uri

Question

I am using "react-native-svg-uri" library to load svg files from cloud.

consider the following snippet,

<SvgUri
          width={wp("6%")}
          height={wp("6%")}
          source={{ uri: "https://wasfatimages.s3.ap-south-1.amazonaws.com/contain/vegetarian.svg" }}
        />

this particular SVG file URL is not working. But using the same URL, I can see the expected image in the browser.

consider the other SVG file URL below which is working with the same code very well.

"https://wasfatimages.s3.ap-south-1.amazonaws.com/contain/seafood.svg".

But the URL used in the above code snippet is loading the image in the browser. But with react native, the SVG URL is not loading. There is a blank space rendering while using the URL.

Thanks for any suggestions.

Answer 1

Using react-native-svg library ( https://github.com/react-native-svg/react-native-svg )

You can load SVG images directly from an URL or locally.

The problem that I was having was: If I have the SVG file locally in my project, the image loads fine but if I add the SVG file to other repo and request it using:

import { SvgUri } from 'react-native-svg';

...

<SvgUri
        width="100%"
        height="100%"
        uri="https://resources.myproject/image.svg"
/>

it was not displaying.

Until now I didn't find out exactly why this was happening but, luckily I have another way to generate the SVG image. Generating this same SVG image without the <style> tag in it, worked fine for me.

So, if your SVG file has in its code the <style> tag with some CSS in it, maybe you are passing through the same issue I was. And you should try to generate the same SVG without this tag.

SVG successfull file tags were:

<svg>
<g>
<path/>
<line/>
<g/>
<svg/>

SVG with problem to load file tags were:

<svg>
<defs>
<style>
...some CSS code style here...
</style>
</defs>
<g>
<path/>
<line/>
</g>
</svg>