<image> tag in Svg not rendering properly in iOS while it's working properly in Android/Web

[KManiKumarReddy]

Description

I'm trying to use SvgUri component of this library to display an SVG that has an tag with base64 encoded PNG in it, if I'm opening the svg it is displaying properly in web but in native screen the images are off, the PNGs are out of place and barely visible.

This is the link to SVG: https://qa-opt.idfcfirstbank.com/asset/optimus/pfm/accountAggregator/StocksEntryPointImage.svg

Please look into the snack to understand the images moving out of place: https://snack.expo.dev/@kmanikumarreddy/react-native-svg-png-image-tag-breaking-demo

Steps to reproduce

1. Host the SVG to use SvgUri component, or locally specify path of SVG in Svg component
2. Use the SVG I'm mentioning

Snack or a link to a repository

https://snack.expo.dev/@kmanikumarreddy/react-native-svg-png-image-tag-breaking-demo

SVG version

14.1.0

React Native version

0.73.6

Platforms

iOS

JavaScript runtime

Hermes

Workflow

None

Architecture

Fabric (New Architecture)

Build type

None

Device

iOS Simulator

Device model

iPhone 15

Acknowledgements

Yes

[github-actions]

Hey! 👋

It looks like you've omitted a few important sections from the issue template.

Please complete React-native-svg version section.

[KManiKumarReddy]

I have mentioned version but it's still tagged as missing info

SVG version

14.1.0

[wjnterdongtran]

I got the same problem

<Svg width='48' height='58' viewBox='0 0 48 58' fill='none'>
      <Path
        fillRule='evenodd'
        clipRule='evenodd'
        d='M30.448 47.124C40.5713 44.3071 48 35.0211 48 24C48 10.7452 37.2548 0 24 0C10.7452 0 0 10.7452 0 24C0 35.3589 7.89113 44.8748 18.4904 47.3646L24.3997 57.5998L30.448 47.124Z'
        fill='#FB923C'
      />
      <Image
        x='4'
        y='4'
        width='40'
        height='40'
        xlinkHref='https://raw.githubusercontent.com/kristerkari/react-native-svg-transformer/7b89174a2df9ed9309ff42241ec974aad5565231/images/svg-logo.svg'
        preserveAspectRatio='xMidYMid slice'
        clipPath='url(#clip)'
      />

      <Defs>
        <ClipPath id='clip'>
          <Ellipse cx='24' cy='24' rx='20' ry='20' />
        </ClipPath>
      </Defs>
    </Svg>

Result in web

Result in iOS

[bohdanprog]

Hello @KManiKumarReddy,
your problem has been solved since we merged that PR.
Let me know if you still face that problem, thank you.

[bohdanprog]

@wjnterdongtran
Here is the correct way to show that SVG:

  <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Svg width="48px" height="58px" viewBox="0 0 48 58" fill="none">
        <Path
          fillRule="evenodd"
          clipRule="evenodd"
          d="M30.448 47.124C40.5713 44.3071 48 35.0211 48 24C48 10.7452 37.2548 0 24 0C10.7452 0 0 10.7452 0 24C0 35.3589 7.89113 44.8748 18.4904 47.3646L24.3997 57.5998L30.448 47.124Z"
          fill="#FB923C"
        />
        <SvgUri
          x="0"
          y="0"
          width="40px"
          height="40px"
          uri={
            'https://raw.githubusercontent.com/kristerkari/react-native-svg-transformer/7b89174a2df9ed9309ff42241ec974aad5565231/images/svg-logo.svg'
          }
          preserveAspectRatio="xMidYMid slice"
          clipPath="url(#clip)"
        />
        <Defs>
          <ClipPath id="clip">
            <Ellipse cx="24" cy="24" rx="20" ry="20" />
          </ClipPath>
        </Defs>
      </Svg>
    </View>

We should use SvgUri if we want to display an SVG from a URI.