Next.js Image Component scenarios to Optimize SVGs with Custom ViewBox Attributes
I'm dealing with I've been banging my head against this for hours. I'm stuck on something that should probably be simple. Quick question that's been bugging me - I'm working on a Next.js project and using the `next/image` component to display SVG images. However, I'm working with an scenario where the images don't seem to be optimized correctly when using custom `viewBox` attributes. For example, I have an SVG with the following code: ```xml <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <circle cx="50" cy="50" r="40" fill="red" /> </svg> ``` In my Next.js component, I'm trying to import the SVG like this: ```javascript import Image from 'next/image'; import MySVG from '../public/my-image.svg'; const MyComponent = () => { return ( <div> <Image src={MySVG} alt="My SVG Image" width={100} height={100} /> </div> ); }; ``` I expected the SVG to render correctly and maintain its aspect ratio, but instead, it appears clipped at the edges when rendered. I've ensured that the `width` and `height` props match the dimensions specified in the `viewBox`. I've also tried adding `layout="intrinsic"`, but that didn't help either. The console doesn't show any errors related to this, but I'm seeing the following warning: `Warning: Image with src "my-image.svg" has an undefined aspect ratio.` This leads me to believe that Next.js might not be handling the SVG optimization properly. I've checked the Next.js documentation and it mentions support for SVGs, but I suspect that the custom `viewBox` might be causing an scenario. Does anyone have experience with this or can suggest a workaround? I've been exploring on this for a few days now. I'm using Next.js version 12.1.0 and React 17.0.2. I'm working on a API that needs to handle this. Is there a better approach? For context: I'm using Javascript on Ubuntu. What's the best practice here? Is there a better approach? For context: I'm using Javascript on Linux. This is part of a larger desktop app I'm building.