Overview

Inspiration

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

Breakdown

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

Improvements

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:

• Wikimedia Commons
• W3C

Code

See JSFiddle or Gist.