3

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.

Dhevendhiran M
  • 994
  • 2
  • 12
  • 29
  • It may be a [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) problem. Please try using an svg file with the same origin or try using the [crossorigin](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin) attribute – enxaneta Feb 23 '21 at 08:21
  • If you look at the source of each file the seafood.svg is using a simple line path while the vegetarian.svg is using a group of line paths, this package might not be able to parse the group – b.stevens.photo Feb 23 '21 at 10:13

1 Answers1

3

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>
bruno_paiva
  • 61
  • 4