Next.js Image Component scenarios to Render SVGs with Transformations Applied
I can't seem to get I'm upgrading from an older version and Hey everyone, I'm running into an issue that's driving me crazy..... I'm currently working on a Next.js application (version 12.2.0) where I'm trying to use the `Image` component for rendering SVGs that have transformations applied. However, I'm working with an scenario where the SVG does not display correctly, and I see a console behavior that states: `Failed to execute 'createElement' on 'Document': The tag name provided ('<svg transform=...>') is not a valid name`. I've tried various approaches to resolve this, including adjusting the `src` prop to point directly to the SVG file without transformations, but this doesn't resolve the scenario. Here’s a snippet of the code I am using: ```javascript import Image from 'next/image'; const MyComponent = () => { return ( <div> <Image src='/path/to/image.svg' alt='My SVG Image' width={500} height={300} style={{ transform: 'rotate(45deg)' }} /> </div> ); }; ``` I’ve also tried using a regular HTML `<img>` tag instead of the Next.js `Image` component, and that does render the SVG correctly with transformations, which leads me to believe this is an scenario specific to the `Image` component. I’ve checked the official Next.js documentation, and it seems like using SVGs should work. Is there a proper way to render SVGs with transformations using the Next.js `Image` component, or should I stick to the standard HTML `<img>` tag? Any insights or workarounds would be greatly appreciated! I'm working on a API that needs to handle this. How would you solve this? This is part of a larger desktop app I'm building. Thanks for your help in advance! I'm developing on Linux with Javascript.