SVG does not render with react-native-svg, but it renders in Chrome

[yolpsoftware]

Bug

The following SVG does not render in react-native-svg:

https://gist.githubusercontent.com/yolpsoftware/b82c92a5bc841207d3bd05259eeb0980/raw/e43b9db8ddaf720d2090ad0227ddea478130eb31/Hong%2520Kong%2520on%2520the%2520Globe%2520(Japan%2520centered).svg

Here's a snack to test it:

https://snack.expo.io/@yolpsoftware/svguri

Unexpected behavior

The SVG is not rendered.

Environment info

Library version: 12.1.0

I also tested it locally with 12.1.1 without success. The Expo snack requires 12.1.0, that's why my snack uses that.

Steps To Reproduce

1. Go to https://snack.expo.io/@yolpsoftware/svguri
2. Run it on your iOS device

Describe what you expected to happen:

1.The SVG of the globe should render, with Hong Kong highlighted

Short, Self Contained, Correct (Compilable), Example

https://snack.expo.io/@yolpsoftware/svguri

[vomchik]

Not sure, but a switch tag can be a source of issue.

[yolpsoftware]

Any news?

[curiosbasant]

Any updates on this, I've the same issue with this image SVG Image

See this snack, Snack Link

[willykurmann]

Hi,
same kind of issue here, although the image is visible, it misses some features.

The image: https://upload.wikimedia.org/wikipedia/commons/e/e1/Aya_Sophia_Floor_Plan.svg

Just created a new expo project from scratch. React-native-svg version is 13.4.0.
Bug is happening on both iOS and Android devices.

[jakex7]

@yolpsoftware @willykurmann Neither of these are valid SVGs. There is a lot of junk generated by Adobe Illustrator that isn't part of the SVG specification. For example, tags like sfw and sliceSourceBounds don't exist in the specification, nor does the bottomLeftOrigin attribute. While these files may render correctly in browsers, that's because browsers are generally designed to handle a wide range of standards, such as HTML, CSS, XHTML, and more.

To ensure proper rendering in react-native-svg, you can export it with SVG 1.1 compatibility.