Next.js Image Component scenarios to Render SVGs Properly on Safari iOS
I can't seem to get I'm integrating two systems and I'm working with an scenario with the Next.js Image component while trying to render SVG images on Safari for iOS..... The images appear distorted or do not display at all. I've confirmed that the SVG files are valid and work correctly in other browsers. My Next.js version is 13.2.0, and I'm using the following configuration for the Image component: ```jsx import Image from 'next/image'; const MyComponent = () => { return ( <div> <Image src="/path/to/image.svg" alt="Example SVG" width={500} height={500} priority /> </div> ); }; export default MyComponent; ``` I've also tried using a custom loader to handle SVGs, but the behavior remains the same. Here's a snippet of the custom loader I attempted: ```jsx const myLoader = ({ src }) => { return `${src}`; }; <Image loader={myLoader} src="/path/to/image.svg" alt="Example SVG" width={500} height={500} /> ``` Additionally, I checked the console for any warnings or errors, but there's nothing specific pointing to the scenario. Has anyone experienced similar problems with SVGs in the Next.js Image component on iOS Safari? Any suggestions on how to resolve this would be greatly appreciated. For context: I'm using Javascript on Windows 11. Cheers for any assistance! Cheers for any assistance! My team is using Javascript for this mobile app. I'd be grateful for any help.