如何在网页中放置代表字符的图像？

Question

我有兴趣使用定制的svg图标集代表网页中的字符。

想象一下，我有类似这样的东西，每个方块都是一个SVG文件：

而且，在JavaScript中，我有一个自定义计数器（或其他），例如生成从1到100的数字。

我想要一个函数，为<div></div>中的数字中的每个字符放置相应的svg，例如：

//    The counter
function counter() {
    var number = 0;
    ...
    setInterval(function ...
        ...
        placeNumbers(number); // every second, it calls placeNumbers with 1, 2, 3, and so on as argument
        ...
    }, 1000);
}

//    The image placer
function placeNumbers(number) {
    //
    //    TO-DO
    //
}

...使网页看起来像这样（绿色<div></div>标签内的3个SVG文件）：

我知道如何编码，只需要关于如何操作的想法。

我曾想过使用Map并将每个文件链接到一个数字字符（'1' -> '1.svg', '2' -> '2.svg', ...）......

...或只是一个ajax调用来获取文件的名称（get(someCharacter + ".svg")）

我不赞成将其转换为字体文件，我想知道一种很好的（性能）方法来实现这一点。

谢谢。

修改

只是澄清一下，当我说SVG文件时，我会用彩色PNG或其他任何东西来改变它们，只是想让它与图像文件一起使用。

正如@CertainPerformance建议的那样，它也可以是一个包含所有字符的大精灵。