javascript - Download SVG with images -

i want download svg image in dom. i've searched around on stack overflow , common approach following these steps:

serialize svg xml string

var svgimage = document.getelementbyid('maskedimage') var svgxml = (new xmlserializer).serializetostring(svgimage) 

create javascript image xml string source

var img = new image(); var svgblob = new blob([data], {type: 'image/svg+xml;charset=utf-8'}); var url = domurl.createobjecturl(svgblob);  img.onload = function () {     /* next steps go here */ }  img.src = url; 

draw image on canvas

var canvas = document.createelement('canvas') var ctx = canvas.getcontext('2d') canvas.width = width canvas.height = height ctx.drawimage(img, 0,0, width, height) 

dump canvas url , make user download that

window.open(canvas.todataurl('image/png'))  // not point of question 

---

the thing is, svg has <image> tag svg mask (which black , white <image>). make things worse, 1 of these images has object url (those returned url.createobjecturl(...)). these requirements , cannot changed.

following mentioned process, initial svg "looses" images on second step. image img doesn't display <image>, if remove mask , display.

i've tried removing mask , changing <image> url created url.createobjecturl inline image (data:image/png;base64,...), dummy url (http://www.tuvotacion.com/imagenes_unicas/cual-perrito-es-mas-tierno-450089.jpg) , i'm still not able display images.

---

note question not duplicate of questions asking how download svg, special case when have images.

the question

how can "translate" svg image without loosing <image>s, can print on canvas?