I have svgs that are rendering slightly blur on the ios but are displayed properly on the android.
Here is the sample svg

<svg width="101" height="40" viewBox="0 0 101 40" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">  
<rect width="101" height="40" fill="url(#pattern0)"/>  
<defs>  
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">  
<use xlink:href="#image0\_209\_185" transform="matrix(0.000707517 0 0 0.00182815 -0.00669776 0)"/>  
</pattern>  
// very long part of the svg  

I am displaying svgs like this

<div className=" w-full flex justify-center relative mt-\[50px\]">  
 <Image src="/images/mobile-logo.svg" alt="logo" width={180} height={100}  quality={100} />  
</div>   

I searched online and didn't find any solution
Here are few things that I tried
passing this to the image tag as styles

const svgStyles = {  
 imageRendering: "optimizeSpeed", // Older versions of FF  
 imageRendering: "-moz-crisp-edges", // FF 6.0+  
 imageRendering: "-webkit-optimize-contrast", // Webkit (Chrome & Safari)  
 imageRendering: "-o-crisp-edges", // OS X & Windows Opera (12.02+)  
 imageRendering: "pixelated", // Awesome future-browsers  
 msInterpolationMode: "nearest-neighbor", // IE (non-standard property)  
 WebkitTransform: "translate3d(0, 0, 0)", // Add translate3d property  
};

There are is no mask/shadow in the svg so I don't understand why svg renders blur on the ios.

Any help appreciated