I have an SVG set as a background image of an element. The first time the element is displayed, the animation plays correctly.
On subsequent displays (e.g. if a dupl
I think your guess "... as the image is not considered to have been reloaded by the browser - it uses the in memory version which is already animating" is correct, as the SVG file is cached! So without a (real) 'reload' the animation is not triggered (again).
Well, firstly let's have a look at SVG animations. There are two attributes you can use inside an animation element which are used to repeat the animation - see Repeating Animations and The ‘animate’ element. In your case the animation runs only once (no repetition).
So you would need Javascript to somehow "trigger" the animation.
This is possible in principle (example: Advanced SVG Animation Techniques), but only if the SVG file is part of the DOM, which you can access via Javascript. Therefor you have to include the SVG file as an .
As soon as you use a SVG file in an
tag or as a CSS background-image
you have no script access to the file.
So the only way I could think of to achieve your goal is to prevent the browser from caching the SVG file (see How (and how not) to Control Caches), or to use the SVG file in an element so that you can control the animation via Javascript.
BTW: luigifab's answer is not that bad. This is an often used "trick" to force reload of a file/ an image - see The Cache Trick