visualizer.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <img id="image" src="./frames/0.svg" height="600"/>
    <div>
        <button id="btnprev">prev</button>
        <button id="btnnext">next</button>
    </div>

    <script type="text/javascript">

        var hash = document.location.hash;
        if (!!hash) {
            hash = hash.substring(1);
            var src = window.image.src;
            var idx = src.lastIndexOf('/');
            window.image.src = src.substring(0, idx) + '/' + hash + src.substring(idx);
        }

        var i = 0;

        function loadAnother() {
            var idx = window.image.src.lastIndexOf('/');
            window.image.src = window.image.src.substr(0, idx+1) + i + '.svg';
        }

        window.btnprev.onclick = function() {
            i--;
            loadAnother();
        }
        window.btnnext.onclick = function() {
            i++;
            loadAnother();
        }

    </script>

</body>
</html>