Can't download my svg to png

Question

Can anyone tell me why is my svg to png not downloading? What am I doing wrong? I can't seem to find a solution on how to download my svg to png. Is it my libraries or my code?

function save(){
    $("#editor_save").click(function() {
        // the canvg call that takes the svg xml and converts it to a canvas
        canvg('canvas', $("#editor").html());

        // the canvas calls to output a png
        var canvas = document.getElementById("canvas");
        var img = canvas.toDataURL("image/png");
        // do what you want with the base64, write to screen, post to server, etc...
    });
}

<script src="canvg-master/canvg.js"></script>
<div id="editor" class="chart">
    <svg width="100" height="100">
        <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="red" />
    </svg><br />
    <button id="editor_save" onclick="save">Save</button>
</div>

score 0 · Accepted Answer · edited Oct 02 '17 at 13:32

You've a whole host of issues:

canvg as its name suggests works on a canvas, you even have a call to getElementById("canvas") in the code you've copied from this answer but despite that you don't actually have a canvas element in your question's markup
you are using .html() to get the data from the div but the div doesn't just have svg in it, it also has a <br /> and the button
you have wrapped the code you've copied inside a save function but the save function isn't called from anywhere
you've not included the correct canvas scripts properly
you've not included jQuery but you are using that library

In my corrected code I've left the canvas div visible so you cn see it working. Te canvas would normally be display:none though and you'd do something else with the img object.

$("#editor_save").click(function() {

// the canvg call that takes the svg xml and converts it to a canvas
  canvg('canvas', $("#svg")[0].outerHTML);

// the canvas calls to output a png
var canvas = document.getElementById("canvas");
var img = canvas.toDataURL("image/png");
// do what you want with the base64, write to screen, post to server, etc...
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://canvg.github.io/canvg/rgbcolor.js"></script>
<script src="http://canvg.github.io/canvg/StackBlur.js"></script>
<script src="http://canvg.github.io/canvg/canvg.js"></script>
<div id="editor" class="chart">
<svg id="svg" width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="red" />
</svg>
<br />
<button id="editor_save">Save</button>
</div>
<div>
  <canvas id="canvas" width="1000px" height="600px"></canvas> 
</div>

Hey Robert thank you for your answer but how do I save it to my browser when you click on save you must save it to my browser how do you do that — Jonty, Jan 15 '17 at 11:12
http://stackoverflow.com/questions/2483919/how-to-save-svg-canvas-to-local-filesystem — Robert Longson, Jan 15 '17 at 11:14
Hey Robert Im new to jquery cant you edit the solution in my code please — Jonty, Jan 15 '17 at 11:36
Ask another question, I've corrected the issues in the code you've provided. Be sure to explain why the answers linked to in my other comment don't solve your problem. — Robert Longson, Jan 15 '17 at 11:39

Can't download my svg to png

1 Answers1