How to add Svg images Dynamically from the js file in html5

Question

My scenario is

Am having 24 svg images, when loading js i can show the first svg image,but after sometime i should delete/empty the 1st one and have to add second svg. Doing this until last svg image added..

<div id="svgId" style="width: 660px; height: 463px; left: 84px; top: 31px;">

<object type="image/svg+xml" data="resources/images/small_0.svg"></object>

</div>

remember it should work in Chrome 26+ IE10 Ipad6 and Windows Surface-RT

Answer 1

Assuming your 24 image names are small_0.svg to small_23.svg , try this:

var image = 0;
function changeImage() {
    image++;
    if (image < 24) {
        setTimeout(function() {
            $('#svgId object').attr('data', 'resources/images/small_' + image + '.svg');
            changeImage();
        }, 2000);
    }
}
changeImage();