0

I want to download an SVG image in my DOM. I've searched around on stack overflow and the common approach to do this is following these steps:

Serialize the svg to a XML string

var svgImage = document.getElementById('maskedImage')
var svgXML = (new XMLSerializer).serializeToString(svgImage)

Create a javascript Image with the XML string as a 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 that Image on a 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 the canvas to an URL and make the user download that

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

The thing is, my SVG has an <image> tag with an SVG mask (which is a black and white <image>). To make things worse, one of these images has an object URL (those returned by URL.createObjectUrl(...)). These are requirements and cannot be changed.

Following the mentioned process, the initial SVG "looses" images on the second step. The image img doesn't display the <image>, even if I remove the mask and display.

I've also tried removing the mask and changing the <image> url from something created with URL.createObjectURL to an inline image (data:image/png;base64,...), to a dummy URL (http://www.tuvotacion.com/imagenes_unicas/cual-perrito-es-mas-tierno-450089.jpg) and I'm still not able to display images.

Note that this question is not a duplicate of all the questions asking how to download an SVG, but a special case when you have images.

The question

How can I "translate" my SVG to an image without loosing <image>s, so I can effectively print it on the canvas?

Marco Lavagnino
  • 1,140
  • 12
  • 31
  • Possible duplicate of [Convert SVG to image (JPEG, PNG, etc.) in the browser](https://stackoverflow.com/questions/3975499/convert-svg-to-image-jpeg-png-etc-in-the-browser) – Salketer Jul 25 '17 at 15:01
  • 1
    Possible duplicate of [Convert SVG to PNG with applied images as background to svg elements](https://stackoverflow.com/questions/34042910/convert-svg-to-png-with-applied-images-as-background-to-svg-elements) – Kaiido Jul 25 '17 at 15:09
  • 2
    base64 encode all your `` tags before serializing your svg. – Kaiido Jul 25 '17 at 15:11
  • @Salketer my question takes that into account (see 'the common approach' part). There are tons of questions which ask the same, but my problem is a specific case for which the answer of those questions fails. – Marco Lavagnino Jul 25 '17 at 15:15
  • @Kaiido interesting ideas, I will try them now. – Marco Lavagnino Jul 25 '17 at 15:16
  • @Kaiido base64 encoding all images worked. Post it as a answer so I can accept it. – Marco Lavagnino Jul 25 '17 at 20:10
  • Well that's already the content in my answer to the duplicate question I did link to. I would rather prefer you to accept this dupe. – Kaiido Jul 26 '17 at 00:19

0 Answers0