How To Reuse The Same Animation More Times

Consider the animation below, which starts on click:

Having the SVG animation inserted to the page directly (as inline svg) more times will cause page conflicts - namely ids to be in conflict as per HTML's definition.

See an example below:

• depending on the implementation, clicking the 3rd figure will either do nothing or start the animation but won't change the color
• clicking the 2nd figure will have the same effect
• clicking the 1st figure will start the animation having color animated as well, however in this case color of the other 2 figures will change, too

In HTML, this would look similar to the lines below:

<svg id="epXYG7cVTFr1" xmlns="http://www.w3.org/2000/svg"<!--..+.all.other.attributes.....-->><defs><radialGradient id="epXYG7cVTFr8-fill" cx="0" cy="0" r="0.5" spreadMethod="pad" gradientUnits="objectBoundingBox" gradientTransform="translate(0.5 0.5)"><!--....SVG'S.ACTUAL.CONTENT......................................--></svg>

<svg id="epXYG7cVTFr1" xmlns="http://www.w3.org/2000/svg"<!--..+.all.other.attributes.....-->><defs><radialGradient id="epXYG7cVTFr8-fill" cx="0" cy="0" r="0.5" spreadMethod="pad" gradientUnits="objectBoundingBox" gradientTransform="translate(0.5 0.5)"><!--....SVG'S.ACTUAL.CONTENT......................................--></svg>

<svg id="epXYG7cVTFr1" xmlns="http://www.w3.org/2000/svg"<!--..+.all.other.attributes.....-->><defs><radialGradient id="epXYG7cVTFr8-fill" cx="0" cy="0" r="0.5" spreadMethod="pad" gradientUnits="objectBoundingBox" gradientTransform="translate(0.5 0.5)"><!--....SVG'S.ACTUAL.CONTENT......................................--></svg>

The solution is to use <object> html tags, which creates a separate context for the animation, making it reusable on the same (or other) page(s) unlimited times. In the example below, each animation starts when clicked, having the background color animated as well & not affecting any other animation on the page.

Given usage looks in HTML's source something like this one:

<div>
	<object data="https://cdn.svgator.com/media/2024/12/The-Walking-Ball.svg?v=2"></object>
	<object data="https://cdn.svgator.com/media/2024/12/The-Walking-Ball.svg?v=2"></object>
	<object data="https://cdn.svgator.com/media/2024/12/The-Walking-Ball.svg?v=2"></object>
</div>

Use Export Settings to Regenerate Unique IDs

In the Export Settings of the editor, there is an option to regenerate the exported IDs to ensure they are unique for each export.

This feature is designed to prevent ID conflicts when reusing inline SVGs. Refer to the screenshot below to locate this option in the Export Settings panel:

Following the steps above would result in the same desired functionality as with object tags.

More articles:

What if You Can’t Import a File? | SVGator Help

This can happen for one of the reasons explained below: if it’s not a static file, if it includes unrecognizable tags or if it’s too complex.

SVGator

Browser Support for Animated SVG | SVGator Help

Discover a detailed compatibility overview, highlighting SVGator’s animation support for CSS and JavaScript (JS) animations, along with the earliest browser versions that fully support each feature.

SVGator

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