Save SVG as PNG (or other) with javascript

Question

I want to save a generated SVG (by a javascript graphing library using d3) as a PNG or other image format.

I tried: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas

This does not render my SVG to a canvas. The example works but not with my SVG as it does not contain the <foreignObject> directive.

Is there an other way to save the image that does not involve the server side?

Technical details:

• Project is in ReactJS
• I use the 'Recharts' library for charting although I consider switching to 'Victory'.

Answer 1

What about something like that:

Capture HTML Canvas as gif/jpg/png/pdf?

They suggest to create a data url:

var image = canvas.toDataURL("image/png");

Then add an img element with the data url to the DOM

document.write('<img src="'+image+'"/>');

or just assign it to the window.location

window.location = canvas.toDataURL("image/png");