I needed to do this transformations a few times in the past, and got tired of looking them up.
Most of the solutions I found were either more complicated, or they required heavy 3rd party libraries or frameworks.
This is a very lightweight solution, and very simple to follow.
Just include this library in your html code :
Here are some examples on how to use it :
// convert svg element to img element var img = ReImg.fromSvg(document.querySelector('svg')).toImg(); // now 'img' is the img element created // convert svg element to png var png = ReImg.fromSvg(document.getElementById('svg-element-id')).toPng(); // force client download of svg as png image ReImg.fromSvg(document.querySelector('svg')).downloadPng(); // convert canvas to png var png = ReImg.fromCanvas(document.getElementById('canvasId')).toPng();
This piece of software is issued under the MIT license. You can view the license here