How to convert svg to png and save in ie 11?

Question

I try to convert svg to png, but I have some problem with canvg, and I cant understand why.If i delete style from svg it is work,but i want to have png with styles.

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div>
//my svg element
    <svg xmlns='http://www.w3.org/2000/svg' width='526' height='233' style='width: 100%; height: 100%; overflow: hidden; display: block; min-height: 431px; min-width: 481px;'><g><g /><g><g style='visibility: visible;' transform='translate(0.5 0.5)'><ellipse fill='#ffffff' pointer-events='all' stroke='#000000' cx='235' cy='268' rx='7.5' ry='7.5' /><path visibility='hidden' fill='none' pointer-events='stroke' stroke='white' stroke-miterlimit='10' stroke-width='9' d='M 235 275 L 235 300 M 235 280 L 220 280 M 235 280 L 250 280 M 235 300 L 220 320 M 235 300 L 250 320' /><path fill='none' stroke='#000000' stroke-miterlimit='10' d='M 235 275 L 235 300 M 235 280 L 220 280 M 235 280 L 250 280 M 235 300 L 220 320 M 235 300 L 250 320' /></g><g style='visibility: visible;' transform='translate(0.5 0.5)'><path fill='#ffffff' pointer-events='all' stroke='#000000' stroke-miterlimit='10' d='M 280 60 L 340 60 L 370 100 L 340 140 L 280 140 L 250 100 Z' /></g><g style='visibility: visible;' transform='translate(0.5 0.5)'><rect fill='#ffffff' pointer-events='all' stroke='#000000' x='400' y='200' width='80' height='80' /></g><g style='visibility: visible;' transform='translate(0.5 0.5)'><ellipse fill='#ffffff' pointer-events='all' stroke='#000000' cx='425' cy='390' rx='40' ry='40' /></g></g><g /><g /></g></svg>
</div>
<a href="#">save</a>
<br/>
<a href="https://github.com/gabelerner/canvg">Canvg</a>
<script type="text/javascript" src="http://canvg.github.io/canvg/rgbcolor.js"></script>
<script type="text/javascript" src="http://canvg.github.io/canvg/StackBlur.js"></script>
<script type="text/javascript" src="http://canvg.github.io/canvg/canvg.js"></script>
<script type="text/javascript" src="https://fastcdn.org/FileSaver.js/1.1.20151003/FileSaver.js"></script>
<script>
    document.querySelector('a').addEventListener('click', function (e) {
        e.preventDefault();
        var svg = document.querySelector('svg');//get svg element
        var canvas = document.createElement('canvas');//create canvas
        canvas.height = svg.getAttribute('height');//set attribute
        canvas.width = svg.getAttribute('width');
     canvg(canvas, svg.parentNode.innerHTML.trim());//draw svg to canvas
        var dataURL = canvas.toDataURL('image/png');//get url
        var data = atob(dataURL.substring('data:image/png;base64,'.length)),
                asArray = new Uint8Array(data.length);

        for (var i = 0, len = data.length; i < len; ++i) {
            asArray[i] = data.charCodeAt(i);
        }

        var blob = new Blob([asArray.buffer], {type: 'image/png'});
        saveAs(blob, 'export_' + Date.now() + '.png');//save as png
    });
</script>
</body>
</html>

As result i want to have image or url in base64 for it

What's the result of your code and what are you expecting it to be? I.e. what is the exact problem you are experiencing? Btw. it would be sufficient to only post the JS code (without the HTML) as long as we know which libraries you use. — Kay, Jul 26 '18 at 10:06
@Kay As result i want to have png file which saved into computer and use ie 11. — Nikita, Jul 26 '18 at 10:13

score 1 · Answer 1 · answered Jul 26 '18 at 10:13

You can use the code as follows without using any plugin:

var svgString = new XMLSerializer().serializeToString(document.querySelector('svg'));

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var DOMURL = self.URL || self.webkitURL || self;
var img = new Image();
var svg = new Blob([svgString], {
  type: "image/svg+xml;charset=utf-8"
});
var url = DOMURL.createObjectURL(svg);
img.onload = function() {
  ctx.drawImage(img, 0, 0);
  var png = canvas.toDataURL("image/png");
  document.querySelector('#png-container').innerHTML = '<img src="' + png + '" width=100%/>';
  DOMURL.revokeObjectURL(png);
  var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // here is the most important part because if you dont replace you will get a DOM 18 exception.


  window.location.href = image; // it will save locally
};
img.src = url;

#canvas,
#png-container {
  width: 800px;
  height: 400px;
}

<div>
  //my svg element
  <svg xmlns='http://www.w3.org/2000/svg' width='526' height='233' style='width: 100%; height: 100%; overflow: hidden; display: block; min-height: 431px; min-width: 481px;'><g><g /><g><g style='visibility: visible;' transform='translate(0.5 0.5)'><ellipse fill='#ffffff' pointer-events='all' stroke='#000000' cx='235' cy='268' rx='7.5' ry='7.5' /><path visibility='hidden' fill='none' pointer-events='stroke' stroke='white' stroke-miterlimit='10' stroke-width='9' d='M 235 275 L 235 300 M 235 280 L 220 280 M 235 280 L 250 280 M 235 300 L 220 320 M 235 300 L 250 320' /><path fill='none' stroke='#000000' stroke-miterlimit='10' d='M 235 275 L 235 300 M 235 280 L 220 280 M 235 280 L 250 280 M 235 300 L 220 320 M 235 300 L 250 320' /></g><g style='visibility: visible;' transform='translate(0.5 0.5)'><path fill='#ffffff' pointer-events='all' stroke='#000000' stroke-miterlimit='10' d='M 280 60 L 340 60 L 370 100 L 340 140 L 280 140 L 250 100 Z' /></g><g style='visibility: visible;' transform='translate(0.5 0.5)'><rect fill='#ffffff' pointer-events='all' stroke='#000000' x='400' y='200' width='80' height='80' /></g><g style='visibility: visible;' transform='translate(0.5 0.5)'><ellipse fill='#ffffff' pointer-events='all' stroke='#000000' cx='425' cy='390' rx='40' ry='40' /></g></g><g /><g /></g></svg>
</div>
<a href="#">save</a>
<br/>
<canvas id="canvas" width="800" height="400"></canvas>
<div id="png-container"></div>

It's just not letting you download the image which will be required to do manually but it is converting the svg to image in the pngcontainer — Ullas Hunka, Jul 26 '18 at 10:18
In new browsers like chrome and firefox yes but I have doubt about IE — Ullas Hunka, Jul 27 '18 at 08:25

How to convert svg to png and save in ie 11?

1 Answers1