Next.js Image Component Causing advanced patterns with SVGs in Responsive Layouts
I'm stuck trying to I'm trying to configure I am using the Next.js Image component to display SVG images responsively, but I'm working with some unexpected behavior where the images do not scale properly on different screen sizes... The SVG seems to maintain its original size rather than adjusting according to the container dimensions. I've tried setting the `layout` prop to `responsive` and defining both `width` and `height` attributes, but the scenario continues. Here is the code snippet I am using: ```jsx import Image from 'next/image'; const MyComponent = () => { return ( <div style={{ width: '100%', height: 'auto' }}> <Image src="/path/to/image.svg" alt="My SVG Image" layout="responsive" width={500} height={300} /> </div> ); }; export default MyComponent; ``` I’ve also checked to ensure that the parent div has the correct CSS styles; however, it doesn't seem to affect the SVG rendering. The console does not show any errors, and I’m using Next.js version 12.2.0. I suspect there might be an scenario with how SVGs are handled within the Image component. Has anyone else faced this scenario or can suggest a workaround to make the SVG responsive? Has anyone dealt with something similar? The project is a CLI tool built with Javascript. Any ideas how to fix this? I'm working with Javascript in a Docker container on Windows 10. Could someone point me to the right documentation?