SVG to Image



The JSFiddle is inspired by the article “Convert SVG to PNG using your browser”.


The steps to save SVG to image are:

  1. Load the SVG in the DOM
  2. Draw the SVG as an image in a canvas
  3. Trigger a download


The improvements made in my example are:

  • Added the ability to resize SVG in canvas
  • Added the option to update the filename
  • Added the option to change the file extension from png to jpeg
  • Used HTML5 form validation
  • Prevented memory leaks by cleaning up event listeners
  • Improved accessibility
  • Stopped supporting older browsers

Sample SVG

Here are some sample SVG’s you can use to test against the converter:


See JSFiddle or Gist.

Please support this site and join our Discord!