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
    6 Things You Didn’t Know About Firefox OS

    Firefox OS is all over the tech news and for good reason:  Mozilla's finally given web developers the platform that they need to create apps the way they've been creating them for years -- with CSS, HTML, and JavaScript.  Firefox OS has been rapidly improving...

  • By
    Facebook Open Graph META Tags

    It's no secret that Facebook has become a major traffic driver for all types of websites.  Nowadays even large corporations steer consumers toward their Facebook pages instead of the corporate websites directly.  And of course there are Facebook "Like" and "Recommend" widgets on every website.  One...

Incredible Demos

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

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