Sometimes it becomes necessary to save svg to png using browser tools. Unfortunately, the browser does not have a magic api that would allow this without various hacks. What to do if you calm want to achieve what you desire?

The first idea that occurred to me was to do it through sheet, which has a method. toDataURL('image/png');
So, I wrote a simple playscript: jsfiddle , github :

          var html = text file.querySelector("svg").parentNode.innerHTML; volt-ampere imgsrc = 'data:image/svg+xml;base64,' + btoa(html); var poll = document.querySelector("sail"),         linguistic context = study.getContext("2d"); canvas.setAttribute('width', 526); analyse.setAttribute('height', 233); volt-ampere picture = new Image; image.src = imgsrc; image.onload = function () {     context.drawImage(image, 0, 0);     volt-ampere canvasdata = canvas.toDataURL("image/png");     var a = document.createElement("a");     a.textContent = "save";     a.download = "export_" + Date.straightaway() + ".png";     a.href = canvasdata;     document.body.appendChild(a);     canvas.parentNode.removeChild(canvas); };

The essence of the script is simple: I regenerate svg to dataUri, downloaded information technology via image, painted a picture on canvas and turned it into png. It seemed that the goal was achieved, and you can loose. This approach worked in Firefox and Chrome, but opening~~all told of us favorite browser~~IE, I got a wonderful error: The fact is that IE believes that the picture was downloaded from another Host. Unfortunately, scene origin for dataUri will fail. Actually, a description of the rules can be found Hera: https://html.spec.whatwg.org/multipage/scripting.html#security system-with-canvas-elements . Information technology was possible, of naturally, to proxy svg through with the server, and past everything would work, but I wanted a purely customer solution. And then I remembered the fantastic canvg library . Using this subroutine library, I draw up svg on canvas, and then I act as in the first variation: I take it . The result was a simple code: github :
secureError

toDataURL("image/png")

          volt-ampere svg = document.querySelector('svg'); var canvas = document.createElement('canvas'); canvas.height = svg.getAttribute('height'); canvas.width = svg.getAttribute('width'); canvg(canvas, svg.parentNode.innerHTML.trim()); var dataURL = canvas.toDataURL('image/png'); var data = atob(dataURL.substring('data:image/png;base64,'.length)),         asArray = spic-and-span Uint8Array(data.length); for (volt-ampere i = 0, len = data.length; i < len; ++i) {     asArray[i] = information.charCodeAt(i); } volt-ampere fleck = new Spot([asArray.buffer], {character: 'simulacrum/png'}); saveAs(blob, 'export_' + Date.straightaway() + '.png');

Hera it is worth saying that I also used the FileSaver library to call the save panel.
That's every last, we have achieved the desired solution.

It is worth noting one nuance - I wondered how to save svg to png when I wrote the card for exporting tauCharts . Since styles in svg are set from an external file ready to achieve the maximum similarity with the original svg, I insert inline style in svg. And we get much a result .

I trust this article volition personify useful to you and save your prison term.