SVGのimage要素での外部画像ファイル参照する場合欠落現象

Fabricjsを使って、いくつかの画像と文字を編集し、以下のように全体をsvgのdata uriとして保存し、imgタグに入れた場合、SVGファイルに「xlink:href」で外部画像を参照する部分が欠落してしまった。

var result = fabCanvas.toSVG();
var dataUri = 'data:image/svg+xml,' + encodeURIComponent(result);
$("#result").html("<img src='" + dataUri + "'/>");

そのため、参照ファイルもdata uriに変換することで対応した。

function drawFrame() {
      fabric.Image.fromURL('../img/frame.png', function(oImg) {
        var dataUri = oImg.toDataURL();
        fabCanvas.setBackgroundImage(dataUri,function(oImg) {
　　  ......
        });
      });
   
      fabric.Image.fromURL('../img/frame_resize_mask.png', function(oImg) {
        var dataUri = oImg.toDataURL();
        fabCanvas.setOverlayImage(dataUri);
      });
}

参考：http://fingaholic.github.io/posts/2012-09-10-svg.html