Next.js Image Optimization Issues with SVGs Resulting in Blurry Renderings
I'm stuck on something that should probably be simple. I'm currently working on a Next.js 12 project and have run into a frustrating issue with rendering SVG images. When using the Next.js Image component to load SVG files, the images appear blurry and lack the crispness that you would expect from vector graphics. Here’s how I’m implementing it: ```javascript import Image from 'next/image'; const MyComponent = () => { return ( <div> <Image src="/images/my-icon.svg" alt="My Icon" width={100} height={100} /> </div> ); }; export default MyComponent; ``` Despite correctly setting the width and height, the SVGs are rendered in a way that causes them to look pixelated. I've checked the original SVG file, and it displays sharp in other applications. I also attempted to use the `layout='responsive'` and `priority` properties, but neither approach improved the rendering quality. Additionally, I tried importing the SVG as a React component using `@svgr/webpack`, but faced issues because it seems that the Next.js Image component does not accept React components as valid sources. Here’s how that implementation looks: ```javascript import { ReactComponent as MyIcon } from '/images/my-icon.svg'; const MyComponent = () => { return ( <div> <MyIcon width={100} height={100} /> </div> ); }; export default MyComponent; ``` However, this change caused the SVG to not respect the width and height props as expected, causing further layout issues. I have cleared the cache, ensured that the image file is properly formatted, and updated my Next.js setup, but I am still facing this rendering issue. Is there a best practice for using SVG images with Next.js that can help improve their rendering quality? Any insights or alternative approaches would be greatly appreciated! What's the correct way to implement this?