arrow14 Comments
  1. Sip
    May 05 - 8:52 am

    Only left corner part of the chart is coming when i am trying for svg export
    here is my code:

    saveSvgAsPng(document.getElementById(“chart-svg”), “diagram.png”, 3);

  2. Kimberly Nicholls
    Jun 19 - 3:41 pm

    Thanks, this was very helpful. I found all sorts of much more complicated ways to do it, so I really like the simplicity.

  3. Amirali
    Jun 24 - 9:27 pm

    Looks great, but could not get it to work in my case. I have some linked images in my SVG code (png and svg files, less than 50KB) and your code seems to stop recreating them in canvas. I have also used markers on my paths. is it able to reproduce those as well?

    Thanks again.

    • Eric Shull
      Jun 25 - 9:43 am

      It’s true: the code above doesn’t go into being able to save images in the SVG, but if you look at the GitHub repo (specifically here: there’s some code for inlining images that you can use before putting the SVG on a canvas an exporting as a PNG. I can’t guarantee that it works in all cases, but it’s worked for me so far.

      The only path markers I’ve tried exporting are end markers, but those worked fine. If you’re seeing something that isn’t exported correctly, feel free to file an issue on GitHub ( with some sample SVG code.

      • Amirali
        Jun 27 - 10:20 am

        Thanks for the reply.
        I was actually talking about your latest script on github, updated 3 days ago. I now tried it with multiple linked png and svg images. what I can see in the png outcome is only the enlarged linked png that is used inside the svg code and not the rest. here is my svg:



        The 2 linked images are here:
        png :

        • Eric Shull
          Jun 27 - 10:27 am

          It’s possible I’ve broken that functionality. I’m in the process of adding tests to make sure the script doesn’t break. If you could, create an issue on the GitHub repository with your example code (especially since example code doesn’t appear in our blog’s comments).

      • Amirali
        Jun 27 - 10:27 am

        Apparently the code vanished from the comment. here it is:

        I realized that saving svg with online image sources linked, will result in a security error by your script. therefore please try it with offline copies.

  4. Peter
    Jul 10 - 12:38 pm

    I downloaded your script and tried it, but I’ve got a problem… Chrome says:

    Uncaught SyntaxError: Unexpected token ILLEGAL saveSvgAsPng.js:1

    If I click on saveSvgAsPng.js:1, Chrome does show me lots of Chinese characters.

    • Eric Shull
      Jul 10 - 12:51 pm

      If you would, post an issue on GitHub ( with a screenshot of what you’re seeing.

    • Peter
      Jul 10 - 1:28 pm

      I opened your script file with Notepad and then saved it in Unicode format. Now its working fine.
      Strange is, that your demo page (index.html) did work before I did this…

  5. David
    Dec 22 - 2:52 pm

    Thanks for this. I’ve just spent a long time working on a bug though. Turns out that sending an SVG with an xmlns attribute will do nothing. I commented out lines:

    //clone.setAttributeNS(xmlns, “xmlns”, “”);
    //clone.setAttributeNS(xmlns, “xmlns:xlink”, “”);

    And now it works.

  6. edward valadez
    Jan 07 - 2:07 pm

    Is there a way to save the .png file with a relative or an absolute path, without the need for open a window?
    Thanks in advice for the replies.
    And great work for the plugin ;)

    • edward valadez
      Jan 08 - 12:25 pm

      I found a solution :D!
      If someone want the code that I used feel free for ask.
      Also, if there is a better way than my code let us know on the replies.
      Thanks in advice.

  7. Lenny Turetsky
    Jan 09 - 7:32 pm

    Thank you so much for making this! It’s incredibly helpful, and solves my problem better than canvg (lack of CSS support, tho it handles embedded images).

    However, I found that some of my CSS wasn’t getting applied. It seems that it can’t handle:
    1) @font-face {...} – an easy change to the code around
    2) CSS rules where my SVG isn’t at the top level, such as body div svg {...} because once the rule.selectorText needs to remove the body div prefix in order to work correctly. (I solved this by passing in a selectorRemap function, but it’s not a general purpose fix so I didn’t make a pull-request.)

    Thanks again for this wonderfully helpful code!

Leave a Reply

Mobile Theme