Convert SVG to PNG

By  on  

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:

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!

Recent Features

  • By
    JavaScript Promise API

    While synchronous code is easier to follow and debug, async is generally better for performance and flexibility. Why "hold up the show" when you can trigger numerous requests at once and then handle them when each is ready?  Promises are becoming a big part of the JavaScript world...

  • By
    Regular Expressions for the Rest of Us

    Sooner or later you'll run across a regular expression. With their cryptic syntax, confusing documentation and massive learning curve, most developers settle for copying and pasting them from StackOverflow and hoping they work. But what if you could decode regular expressions and harness their power? In...

Incredible Demos

  • By
    PHP Woot Checker – Tech, Wine, and Shirt Woot

    If you haven't heard of Woot.com, you've been living under a rock. For those who have been under the proverbial rock, here's the plot: Every day, Woot sells one product. Once the item is sold out, no more items are available for purchase. You don't know how many...

  • By
    Jack Rugile’s Favorite CodePen Demos

    CodePen is an amazing source of inspiration for code and design. I am blown away every day by the demos users create. As you'll see below, I have an affinity toward things that move. It was difficult to narrow down my favorites, but here they are!

Discussion

  1. Tune

    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" with src="*.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%

  2. 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:

    svgexport input.svg output.png 1.5x
    

    Anyway, thought I’d share in case anyone finds it helpful.

  3. 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

  4. Some Vector Guy

    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?

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!