Next.js Image Component Not Handling SVG with External Resources Properly
I'm sure I'm missing something obvious here, but I'm following best practices but I'm working on a personal project and I'm having an scenario with the Next.js Image component when trying to load SVG images that reference external resources (like fonts or gradients). When rendering these SVGs, they appear broken or not at all in the browser. I'm using Next.js version 13.1.0 and React 18.0.0. The SVG files I'm working with include the following snippet: ```xml <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> <defs> <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" /> <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" /> </linearGradient> </defs> <rect width="100" height="100" fill="url(#grad1)" /> </svg> ``` I have also tried loading the SVG as a regular image tag instead of using the Image component. That worked but I would prefer the optimizations that come with the Next.js Image component. When I inspect the rendered output using the Image component, I see the following behavior in the console: `Failed to load resource: the server responded with a status of 404 (Not Found)` for the gradient definitions. I've checked my Next.js configuration and have ensured that SVG support is enabled. My `next.config.js` looks like this: ```javascript module.exports = { images: { domains: ['example.com'], formats: ['image/avif', 'image/webp', 'image/svg+xml'], }, }; ``` I've also looked into whether the scenario might stem from how SVGs are being processed or optimized during the build. I saw some recommendations about customizing the loader, but I am unsure how to implement that correctly for SVGs with external references. Any assistance on how to properly handle SVGs with external resources in the Next.js Image component would be greatly appreciated! I'd be grateful for any help. Am I missing something obvious? I'm open to any suggestions.