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

Incredible Demos

  • By
    CSS content and attr

    CSS is becoming more and more powerful but in the sense that it allows us to do the little things easily.  There have been larger features added like transitions, animations, and transforms, but one feature that goes under the radar is generated content.  You saw a...

  • By
    Custom Scrollbars in WebKit

    Before each of the browser vendors we like was providing unique CSS controls, Internet Explorer was setting the tone.  One such example is IE's early implementation of CSS filters. Internet Explorer was also the first browser that allowed developers to, for better or worse, customize...

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!