Circular paths are deformed

[Naoto-Ida]

This SVG seems to show up deformed in the app, despite being perfect on SVG testing websites like this and in Chrome. I'm using RN v0.40.0.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96" width="32" height="32">
	<path fill="red" d="M50 9C27.392 9 9 27.392 9 50s18.392 41 41 41 41-18.392 41-41S72.608 9 50 9zm0 6c19.366 0 35 15.634 35 35S69.366 85 50 85 15 69.366 15 50s15.634-35 35-35zM29 43c-3.866 0-7 3.134-7 7s3.134 7 7 7 7-3.134 7-7-3.134-7-7-7zm21 0c-3.866 0-7 3.134-7 7s3.134 7 7 7 7-3.134 7-7-3.134-7-7-7zm21 0c-3.866 0-7 3.134-7 7s3.134 7 7 7 7-3.134 7-7-3.134-7-7-7z"/>
</svg>

[Naoto-Ida]

I realized this is an issue happening due to this which seems to cause issues with circular paths.

I'm not at all an expert at SVGs, but tried to bump up the react-native-svg dependency to version v5.1.0 on a fork of this lib's v1.2.0, but it seems to completely ignore viewport or something, causing most of my previously-working SVGs to blow up.

Could anybody help me bump up the version with this?

[jpoutrin]

Hi,
I have a similar problem.

The file should render:

but I get the following:

the code in my app is:

<SvgUri width={logo_size.width} height={logo_size.height} fill="#ff00ff"
 source={require('../../img/logo/test.svg')} />

the svg file causing the issue is in the zip (svg cannot be added like that):
test.svg.zip

hope this helps solving the issue.
I also tried to bump the react-native-svg version to 5.1.2 but result is the same.

any question, let me know