Next.js Image Component Failing to Load SVGs with Custom Attributes on Click
I'm having trouble with the Next.js Image component when trying to load SVG images that have custom attributes for interactivity. I'm using Next.js version 12.1.0 and I have an SVG file that I want to render as an image and also allow for interactive features like click events. The SVG is not rendering correctly when I use it with the Image component, and I get the following warning in the console: ``` Warning: Failed to load image '/path/to/image.svg' because it contains unsupported attributes. ``` I've tried importing the SVG directly and using it this way: ```javascript import MySVG from '../path/to/image.svg'; const MyComponent = () => { return <Image src={MySVG} alt='My SVG' width={500} height={500} />; }; ``` But the click events I was hoping to attach to the SVG elements aren't being recognized. When I try to use the SVG in an `<img>` tag instead, it works, but then I lose out on Next.js's optimization features. I also attempted to use a custom loader for the Image component, but it didn't make any difference. The SVG displays fine when rendered directly in the HTML without any optimizations, so I'm not sure what's going wrong with the Image component. Is there a way to properly render SVGs with the necessary attributes while still taking advantage of the Image component’s optimizations in Next.js? Any help would be greatly appreciated!