2020-12-30-svg-to-image.md

layout	title	date	excerpt	categories
post	SVG to Image	2020-12-30 13:04:20 -0800	Convert and download SVG to image (PNG or JPEG) on the frontend.	svg image png jpeg jsfiddle javascript

<script async src="https://jsfiddle.net/remarkablemark/fxg4Lvdt/embed/result/"></script>

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.