Next.js Image Component Cropping guide with SVGs in Responsive Layout
I'm integrating two systems and I'm stuck trying to I've been struggling with this for a few days now and could really use some help..... I've looked through the documentation and I'm still confused about I'm experiencing an scenario with the Next.js Image component where SVG images are being cropped unexpectedly when used in a responsive layout. The images are supposed to maintain their aspect ratio, but when resizing the window, they seem to get cut off at certain breakpoints. I've tried setting the layout prop to 'responsive' and 'fill', but neither seems to solve the scenario completely. Here's the code I'm currently using: ```jsx import Image from 'next/image'; const MyComponent = () => { return ( <div style={{ width: '100%', height: 'auto', position: 'relative' }}> <Image src="/path/to/image.svg" alt="My SVG Image" layout="responsive" width={500} height={300} /> </div> ); }; export default MyComponent; ``` I also tried different width and height ratios, but the question continues. When viewing the page on mobile, the SVG appears very small and sometimes gets cropped at the sides. Additionally, I am using Next.js version 12.0.7 and have the following styles applied globally: ```css html, body { margin: 0; padding: 0; overflow-x: hidden; } ``` I checked the console for any warnings or errors, but there are none related to the image rendering. Has anyone else faced a similar scenario with SVGs in the Next.js Image component? Any suggestions on how to fix this cropping behavior would be greatly appreciated! For context: I'm using Javascript on macOS. What am I doing wrong? For context: I'm using Javascript on Ubuntu. Any feedback is welcome! Is this even possible?