Next.js Image Component scenarios to Optimize SVGs and Causing Layout Shifts
I'm writing unit tests and I've encountered a strange issue with I've been banging my head against this for hours... I'm working with a frustrating scenario with the Next.js Image component (v12.1.0) where SVG images are not being optimized properly, leading to noticeable layout shifts when the images load. Despite using the `next/image` component, the SVGs are rendered with a default width and height, causing the layout to jump when the actual dimensions are applied. I tried specifying the `width` and `height` attributes directly in the Image component like this: ```jsx <Image src="/path/to/image.svg" alt="Description" width={500} height={300} /> ``` However, this approach doesn't seem to prevent the layout shift since the actual SVG can vary in size, and the browser doesn't seem to respect the dimensions provided. I also attempted to wrap the Image component in a `<div>` with fixed dimensions to stabilize the layout: ```jsx <div style={{ width: '500px', height: '300px' }}> <Image src="/path/to/image.svg" alt="Description" layout="fill" objectFit="contain" /> </div> ``` This causes the SVG to scale down but still results in layout shifts during the initial load. I’ve checked my CSS to ensure there are no conflicting styles that could cause this. I've also explored using the `next-optimized-images` package but it seems to have a compatibility scenario with the latest Next.js version. The console doesn't show any warnings or errors regarding the image handling, which adds to the confusion. Is there a recommended way to handle SVGs within the Next.js Image component to prevent layout shifts? Any guidance would be appreciated! This is part of a larger API I'm building. What's the best practice here? I'm working in a CentOS environment. Am I missing something obvious?