Rendering base64 inside nested svgs - not working :(

[Paul Walcz]

Hello,

I've got this situation: Inside svg (lets call it test.svg) there is a link to another svg (external.svg), like this:

Inside test.svg:

<image xlink:href="external.svg" height=...

And inside this external.svg:

<rect .... <- shapes, paths and other svg parts - all rendered properly.

<image width="172" height="60" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA <- this does not not render at all

Chrome opens test.svg properly with inline base64 images from external.svg visible, but phantomjs somehow simply skips those images during rendering.

I've figured out this may do something with waiting till this external.svg with base64 images inside is all loaded - so I've tried timeouts, finally end up with waiting till page has its state ready, but it is still not working. 

Can someone help a little bit? :(

Here is how rendering function looks like:

function onPageReady() {

    page.render(dirPath + fileName + '.png');

    phantom.exit();

}

page.open(url, function (status) {

    function checkReadyState() {

        setTimeout(function () {

            var readyState = page.evaluate(function () {

                return document.readyState;

            });

            if ("complete" === readyState) {

                onPageReady();

            } else {

                checkReadyState();

            }

        });

    }

    checkReadyState();

});