Next.js Image Component Fails to Optimize SVG Images Leading to Increased Load Times
I'm currently using Next.js version 13.0.0 with the built-in Image component to manage my images, including SVGs. However, I've noticed that my SVG images are not being optimized as expected. They're being rendered with excessive file sizes, which is impacting overall load times on my site. For example, I have an SVG logo that is about 500KB, but it should ideally be under 100KB after optimization. I've implemented the following code: ```javascript import Image from 'next/image'; const Logo = () => { return ( <Image src='/logo.svg' alt='Company Logo' width={200} height={100} priority /> ); }; ``` I also noticed that when I inspect the network requests in Chrome, the `Content-Type` for the SVG image is shown as `image/svg+xml`, but the image seems to be loading without any compression applied. I tried adding the `next.config.js` optimization settings as follows: ```javascript module.exports = { images: { domains: ['mydomain.com'], formats: ['image/avif', 'image/webp'], minimumCacheTTL: 60, }, }; ``` However, these settings don't seem to affect SVG images. I'm also using `svgo` to optimize my SVG files manually before including them in my project, but I'm looking for a more automated solution within Next.js or to ensure that the Image component handles SVGs efficiently. Could anyone provide insights on how to enable optimization for SVGs using the Next.js Image component, or suggest best practices for handling SVGs in a way that improves load times? This is part of a larger service I'm building. Thanks in advance!