Animating svg images in React

[Haz07]

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?

[OSUblake]

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/

 

 

[Cassie]

Well you *can* use CSS animation in a style tag within an SVG, but that's convoluted af. Go with blake's suggestion!

[Haz07]

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.