Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Haz07

Animating svg images in React

Go to solution Solved by OSUblake,

Recommended Posts

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

  • Solution

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/

 

 

  • Like 3
Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×