👀 Views: 56 💬 Answers: 1 📅 Created: 2025-06-09

next.js svg image JavaScript

I've encountered a strange issue with I'm relatively new to this, so bear with me. I'm trying to debug I'm reviewing some code and I tried several approaches but none seem to work... I'm working with an scenario with the Next.js Image component when trying to render SVGs that have custom `viewBox` attributes. The SVGs are not displaying correctly, and instead of rendering the image as expected, I'm getting a blank space. Here's an example of the SVG I am trying to use: ```xml <svg width="100" height="100" viewBox="0 0 50 50"> <circle cx="25" cy="25" r="20" fill="red" /> </svg> ``` In my Next.js application (version 13.1), I'm trying to import the SVG like this: ```javascript import MyCircle from './path/to/circle.svg'; export default function MyComponent() { return <Image src={MyCircle} alt="Red Circle" width={100} height={100} />; } ``` When I run the application, I see a blank space where the SVG should be rendered. I've checked the console and there are no obvious errors, but I do see a warning related to the `Image` component saying that it's not optimized for SVG images. I've also tried using the `next/image` package's `unoptimized` prop like this: ```javascript return <Image src={MyCircle} alt="Red Circle" width={100} height={100} unoptimized />; ``` Still, no luck. I also attempted to convert the SVG to a PNG format and used that instead, which worked, but I’d much rather keep the SVG for scalability purposes. Any thoughts on how I can get the Next.js Image component to render SVGs correctly with custom attributes? Is there a better way to handle SVGs in Next.js? Thanks for your help. My development environment is Ubuntu. Any help would be greatly appreciated! This issue appeared after updating to Javascript 3.9. I'd be grateful for any help. Any suggestions would be helpful. This is happening in both development and production on macOS. I'm open to any suggestions. Thanks for any help you can provide!