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

next.js svg css animation JavaScript

I am experiencing an scenario with the Next.js Image component where it does not seem to support SVG images that rely on external CSS for animations... I am using Next.js version 13.1.0 and have a simple SVG file that animates its elements using CSS transitions defined in an external stylesheet. However, when I try to use the Image component to render this SVG, the animations don't work. Here’s how I’ve implemented it: ```jsx import Image from 'next/image'; import mySvg from '../public/my-animation.svg'; function MyComponent() { return ( <div> <Image src={mySvg} alt="Animated SVG" layout="responsive" width={500} height={300} /> </div> ); } export default MyComponent; ``` In my external CSS file, I have defined some animations like this: ```css .svg-animation { transition: transform 0.5s ease; } .svg-animation:hover { transform: scale(1.1); } ``` The question is that while the SVG renders correctly, the animations do not trigger on hover. I’ve tried applying the class `svg-animation` directly to the `Image` component, but it seems that the CSS is not applied because the `Image` component does not expose the underlying SVG elements directly. I attempted to import the SVG as a React component instead using the `@svgr/webpack` loader, and the animations worked fine there: ```jsx import { ReactComponent as MySvg } from '../public/my-animation.svg'; function MyComponent() { return ( <div> <MySvg className="svg-animation" /> </div> ); } export default MyComponent; ``` But I want to stick with the Image component for optimization purposes like lazy loading and image optimization. Is there a way to make CSS animations work with the Next.js Image component when using SVG images? Any insights or best practices would be appreciated! Also, I'm seeing this behavior in the console: `Warning: React attempted to access the Image component's child elements directly, which is not supported.` This leads me to believe that the Image component might be wrapping the SVG in a way that prevents CSS from being applied correctly.