In this article I am going to explain SVG to PNG conversion using HTML5 Canvas.


As shown in the above picture there are 2 steps.
  1. Get SVG on HTML5 canvas
  2. Convert Canvas to PNG image

Get SVG on HTML5 canvas

// get Canvas Element
var myCanvas = document.getElementById('canvasid');
// get 2D context
var myCanvasContext = myCanvas.getContext('2d');
// Load up our image.
var source = new Image();
source.src = '/img/twitter.svg';
// Render our SVG image to the canvas once it loads.
source.onload = function(){
   myCanvasContext.drawImage(source,0,0,200,200);
}

Convert Canvas to PNG image

$("#resultImage").attr("src",myCanvas.toDataURL("image/png"));

10 comments:

  1. don't want to be critic, but I have a problem trying to use img.src = canvas.toDataURL(...) in Internet Explorer 11. A security issue rises. Your example here has the same problem. Have you found a workaround?. Thank you.

    ReplyDelete
    Replies
    1. use ( source.crossOrigin = "Anonymous"; )
      this will avoid security error

      Delete
  2. Its not render the external images refereed by SVG.

    ReplyDelete
    Replies
    1. use ( source.crossOrigin = "Anonymous"; )
      this will avoid security error

      Delete
  3. Is there a way where I can specify the ID of an SVG within the page as the source URL instead of an external SVG file?

    ReplyDelete
    Replies
    1. Use this

      var source = document.getElementById('give id here');

      Delete
  4. I am getting canvas as empty.
    Here is my html.


    Sorry, your browser does not support inline SVG.




    js code
    var myCanvas = document.getElementById('canvasid');
    // get 2D context
    var myCanvasContext = myCanvas.getContext('2d');
    // Load up our image.
    var source = document.getElementById("test");
    source.crossOrigin = "Anonymous";
    // Render our SVG image to the canvas once it loads.
    source.onload = function(){
    myCanvasContext.drawImage(source,0,0,200,200);
    }


    Please help me how can i fix this. I have an issue with IE.

    ReplyDelete
  5. คาสิโนออนไลน์ที่น่าเชื่อถือและมีความเป็นมืออาชีพที่สุดในตอนนี้
    โปรโมชั่นGclub ของทางทีมงานตอนนี้แจกฟรีโบนัส 50%
    เพียงแค่คุณสมัคร สล็อตออนไลน์ กับทางทีมงานของเราเพียงเท่านั้น
    ร่วมมาเป็นส่วนหนึ่งกับเว็บไซต์คาสิโนออนไลน์ของเราได้เลยค่ะ
    สมัครสล็อตออนไลน์ >>> Goldenslot
    สนใจร่วมสนุกกับ คาสิโนออนไลน์ คลิ๊กได้เลย
    มีทั้งคาสิโนออนไลน์ หวยออนไลน์ ฟุตบอลออนไลน์ สล็อตออนไลน์ และอื่นๆอีกมากมาย

    ReplyDelete
  6. Your blogs are amazing. Keep sharing. I love them Are you also searching for help with my assignment? we are the best solution for you. We are best known for delivering the best urgent assignment help.

    ReplyDelete

Blogroll

Follow this blog by Email

Popular Posts