Convert SVG to PNG
Earlier this year I became obsessed with different types of media (images, audio, video) and how to convert and merge one format to/with another. Half of that obsessions is due to fascination in how it's done, the other half is love of performance. A few of my favorites include:
- Resize an Animated GIF
- Combine Audio and Video with ffmpeg
- Create an Image Preview from a Video
- Convert Video to GIF or GIF to Video
- Get the First Frame of an Animated GIF with ImageMagick
Image format conversion and optimization tantalizes me the most because it's usually a case of very little effort making a big difference, a la using image compression utilities like ImageOptim to turn a bloated image to an image half the size with little reduction in quality. The latest tool I've found is svg2png, a Node.js utility for turning a SVG image into a static PNG!
require('svg2png')('dino.svg', 'dino.png', function(err) {
if(err) {
console.log('An error occurred during conversion: ', err);
}
});
You can even perform scaling via another argument:
require('svg2png')('dino.svg', 'dino.png', 2.5, function(err) {
if(err) {
console.log('An error occurred during conversion and upscaling: ', err);
}
});
Here's a side by side comparison of the SVG and PNG:
A simple API, performs one function well -- what more can you ask for? I look forward to using this module to decrease the image sizes on each of the sites I work on!
Thanks for this info. It could be a nice way to provide a png fallback scenario, by generating pngs for all svgs and having a js script replacing all
src="*.svg"withsrc="*.png"The generation of pngs could be a step in the deploy/build process.BTW: I noticed that the svg-dino scales larger than the png-dino, when I set my viewport to 400%
Hey David,
I’ve also had luck with another Node.js utility, svgexport.
https://github.com/shakiba/svgexport
Though it’s a command line utility, which may or may not be a plus for some. It’s works well for scaling similar to your example:
Anyway, thought I’d share in case anyone finds it helpful.
Thank you for posting this! Would it be possible to modify the code to export a specific pixel dimension? I believe the way SVG to PNG works is you can scale the PNG to be some percentage of the SVGs size. So if the SVG was 100px wide and we scaled it by 2 (200%) it would export a PNG 200px wide. But what if the SVG sizes varied but you always wanted the PNG result to be 200px wide?
Do you think this is possible?
Thanks,
Michael
Fun fact: in your example of the dinosaur image, the filesize of the PNG is about three times as large as that of the SVG. What more can you ask for?