svg animation

Create a new SVG animation now!

New project

Trigger the SVG animation manually using JavaScript

We will show you how to start the animation with a custom event by simulating a click on the SVG element.

First, add the SVG with an object tag, like this:

<object id ="animated-svg" type="image/svg+xml" data="animated.svg"></object>

You can get to the SVG element in a few steps:

Get the object element : a = document.getElementById("animated-svg")

Get the content document : b = a.contentDocument

Copy the ID from the beginning of the SVG that looks like this <svg id="e5478wvxh25l1">. Please note that it will be different in your case so change it accordingly.

Use the ID to get to the SVG element:

c = b.getElementById("e5478wvxh25l1")

Now you can trigger the click to start the animation

c.dispatchEvent(new Event('click'));

Unfortunately, the SVG will animate on the first click only, due to implementation limitations.

We hope it helps!

Still got questions? Send us an email to and we will get back to you as soon as we can.