experiment svg holderjs

gholder.js

GHolder = {
    basesvg :
    '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="%width%" height="%height%">' +
    '  <rect width="100%" height="100%" style="fill:%backcolor%;" />' +
    '  <text x="0" y="50%" fill="%forecolor%" textLength="100%" style="font-size: 48px">%text%</text>' +
    '</svg>' ,
    run : function() {
        var imgs = document.querySelectorAll("img");
        for (i=0;i<imgs.length;++i){
            if ( (imgs[i].getAttribute("src") || '').search("gholder.js/") === 0 || (imgs[i].getAttribute("data-src") || '').search("gholder.js/") === 0 ){
                var isrc = (imgs[i].getAttribute("src") || '').search("gholder.js/") === 0 ? imgs[i].getAttribute("src") : imgs[i].getAttribute("data-src");
                isrc = isrc.substr(11);
                var args = isrc.split("/");
                var dim = args[0].split('x');
                var colors = args[1].split(":");
                var text = args[2];
                
                var xmlsvg = GHolder.basesvg.replace("%width%",dim[0]).replace("%height%",dim[1]).replace("%backcolor%",colors[0]).replace("%forecolor%",colors[1]).replace("%text%",text);
                
                var imgdata = 'data:image/svg+xml;base64,' + btoa(xmlsvg);
                
                imgs[i].src = imgdata;
            }
        }
    }
}