Overview

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

Features

The features in my example are:

• Add the ability to resize the SVG in the canvas
• Add the option to update the filename
• Try to retrieve the filename from the SVG <title>
• Add the option to change the file extension from png to jpeg
• Use HTML5 form validation

Sample SVG

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

• Wikimedia Commons
• W3C

Links

• JSFiddle
• Gist
• SVG to Image