SvgXml Not Displaying Image but Shows Fine in Browser, etc

[smilingkylan]

I am using react-native-svg version 12.1.1, and while SVGs for most images work fine, there is one image that is not displaying correctly and I cannot figure out why.

Here is the XML:

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90.88 90.88"><defs><style>.cls-1{fill:#571aff;}</style></defs><title>telos-logo</title><path class="cls-1" d="M45.53,90.88a47.65,47.65,0,0,1-18.94-3.59A42.36,42.36,0,0,1,3.19,63.06,48.54,48.54,0,0,1,0,45.44,48.55,48.55,0,0,1,3.19,27.81,42.36,42.36,0,0,1,26.59,3.59,47.65,47.65,0,0,1,45.53,0,47.65,47.65,0,0,1,64.47,3.59a43,43,0,0,1,14.3,9.77,41.94,41.94,0,0,1,9,14.45,49.87,49.87,0,0,1,3.1,17.62,49.86,49.86,0,0,1-3.1,17.62,41.91,41.91,0,0,1-9,14.45,43,43,0,0,1-14.3,9.77A47.65,47.65,0,0,1,45.53,90.88Z"/></svg>

It displays just fine in a browser, for example at the following link:
https://raw.githubusercontent.com/telosnetwork/images/master/chain_icons/telos-logo-circle.svg

So why is this library unable to display it correctly? I can only assume it has something to do with the element, or something like that. Could you guys try to display it and see if it works for you?

Any help would be appreciated.

[vomchik]

@kylanhurt could you share a code example of how you use react-native-svg? Do you use the SvgCssUri component?

[pavankumarj]

I'm facing a similar issue with the following svg

<!-- Generator: Adobe Illustrator 24.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#26A472;}
</style>
<path class="st0" d="M12,2c-1.4,0-2.5,1.1-2.5,2.5S10.6,7,12,7s2.5-1.1,2.5-2.5S13.4,2,12,2z M20.3,6.5c-0.4-1.1-1.5-1.7-2.6-1.3
	l-1.6,0.6c-0.2,0.1-0.3,0.2-0.4,0.4c-0.7,1.4-2.1,2.3-3.7,2.3c-1.6,0-3-1-3.7-2.3C8.2,6.1,8.1,5.9,7.9,5.9L6.3,5.3
	C5.2,4.9,4,5.4,3.7,6.5C3.3,7.5,3.8,8.6,4.8,9L8,10.3v3.1l-2,5.7c-0.4,1,0.2,2.1,1.2,2.5c1,0.4,2.1-0.2,2.5-1.2L11,17
	c0.2-2.8,2.3-5.2,5-5.8v-0.9L19.2,9C20.2,8.6,20.7,7.5,20.3,6.5z M23,17.5c0,3-2.5,5.5-5.5,5.5S12,20.5,12,17.5s2.5-5.5,5.5-5.5
	S23,14.5,23,17.5z M20.9,15.1c-0.2-0.2-0.5-0.2-0.7,0l-3.6,3.6l-1.6-1.6c-0.2-0.2-0.5-0.2-0.7,0c-0.2,0.2-0.2,0.5,0,0.7l2,2
	c0.2,0.2,0.5,0.2,0.7,0l4-4C21,15.7,21,15.3,20.9,15.1z"/>
</svg>

[caraneilwarner]

We're using SvgXml and recently ran into an issue where most SVGs rendered fine but some SVGs rendered with pieces missing:

In a browser, that SVG looks like this:

It may not be related, but if it is, we resolved it by rolling back:

"react-native-svg": "12.1.1"
"react-native-svg": "10.1.0"

It'd be worth checking versions between 10 and 12. We tried 10 because it's what we were using the last time anyone remembered seeing the crest on that bottle in the app.

[goff-studio]

I think the problem is that this file style element included in this file

[KalanaPallemulla]

I also have this issue

[dancosta-fed]

Has this been solved or something?
I'm facing similar issues here. While most of the images work fine, others don't show up.

Checking the svg from both images... I've found out that the one which is displaying fine has the witdh and height properties in it. Whereas, the one which is not being displayed, haven't got those properties in them.

I believe that could be the reason why it's not showing up. However, I can't change width and height on the svgs, because I'm getting them from an api call.

Any clues on what we should do in this case? Hey kylanhurt, have you been abled to solve this issue?
Thank you

[ejrb]

I was having the same issue using SvgXml on XML containing a <style> block.

The fix was simply to use SvgCss instead of SvgXml.

- import { SvgXml } from "react-native-svg";
+ import { SvgWithCss } from "react-native-svg";

- <SvgXml
+ <SvgCss
    xml={this.props.card.svg}
  />

Edit: I found the documentation for this: https://github.com/software-mansion/react-native-svg/blob/main/USAGE.md#css-support-1

[bohdanprog]

Hello @kylanhurt,
I checked your SVG on this platform. Our SVG library exhibited the same behavior.
As @ejrb mentioned, if you want to add style properties to your SVG, you can use the SvgCss component. If you encounter any issues, please feel free to open a new problem report.

Thank you.