Haz07 Posted September 30, 2021 Share Posted September 30, 2021 I am trying to animate svg images in React. I am using object tags since I was not able to get Ids from the image using img tag, but this is affecting the caching of the images and is taking time to load. Is there any way I can use image tag and get it to animate or Is there any other way to get it working? Link to comment Share on other sites More sharing options...
Solution OSUblake Posted September 30, 2021 Solution Share Posted September 30, 2021 Welcome to forums @Haz07 You can't animate SVG elements inside an image, and I really wouldn't use an object tag either as it makes targeting more complicated. You should let your tooling do the importing for you. If you're using Create React App, you can just import an SVG as a component. import { MyLogo } from './logo.svg'; const App = () => { return ( <div> <MyLogo /> </div> ); } Which uses SVGR under the hood. https://react-svgr.com/ 3 Link to comment Share on other sites More sharing options...
Cassie Posted September 30, 2021 Share Posted September 30, 2021 Well you *can* use CSS animation in a style tag within an SVG, but that's convoluted af. Go with blake's suggestion! 2 Link to comment Share on other sites More sharing options...
Haz07 Posted October 3, 2021 Author Share Posted October 3, 2021 On 9/30/2021 at 11:32 AM, OSUblake said: Welcome to forums @Haz07 You can't animate SVG elements inside an image, and I really wouldn't use an object tag either as it makes targeting more complicated. You should let your tooling do the importing for you. If you're using Create React App, you can just import an SVG as a component. import { MyLogo } from './logo.svg'; const App = () => { return ( <div> <MyLogo /> </div> ); } Which uses SVGR under the hood. https://react-svgr.com/ Thanks @OSUblake, I was not able to directly import svg image as component as I was getting an error since my images were greater than 500kb. So I used react svgr playground and converted all my images into components and I was able to use these components instead. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now