Convert SVG to PNG Using NodeJS & Sharp

Convert SVG to PNG Using NodeJS & Sharp

In this article, you'll learn how to convert SVG to PNG using NodeJS & Sharp

Introduction

Do you need to convert a SVG file to the Portable Network Graphic (PNG) format? This article will walk you through how to do that.

We'll use Node.js as our coding language of choice and the Sharp npm package to do most of the heavy lifting for us.

Install Sharp Npm Package

First, you need to install the npm package. You can install it with either the npm or yarn command below:

Npm

$ npm install sharp --save

Yarn

$ yarn add sharp

If everything went as planned, you should now have the Sharp npm package installed.

Convert SVG to PNG

Now we're ready to start writing some code and converting an image! Make sure you have a SVG file in the root of your project directory that we can play around with.

Using the Sharp npm package, here is the full code:

Node.js
 
const sharp = require("sharp")
 
sharp("file.svg")
  .png()
  .toFile("new-file.png")
  .then(function(info) {
    console.log(info)
  })
  .catch(function(err) {
    console.log(err)
  })

Let's break down each part of the code:

  1. First, we import the sharp npm package and hold it in the sharp variable.
  2. Then, we use the sharp package to read our file.svg file, convert it to a PNG and write the new PNG file to your directory with the .toFile() function.
  3. The sharp method is a promise and we use it to get the info for the file once it has been written to our directory.
  4. Last, we use .catch() method to catch and console.log() any errors.

When you run the code, you should get a similar output to this:

Output
 
{
  format: 'png',
  width: 2500,
  height: 527,
  channels: 4,
  premultiplied: false,
  size: 47194
}

You should also see the new PNG file in your project directory.

There are also additional options you can pass to the .png() method to alter the output image. These include the compression level, quality, colors, and more. You can check them out in their documentation.

Conclusion

Hopefully, this article helped you in your coding endeavors!

Thanks for reading

If you liked this post, share it with all of your programming buddies!

Follow us on Facebook | Twitter

Further reading

The Complete Node.js Developer Course (3rd Edition)

Angular & NodeJS - The MEAN Stack Guide

NodeJS - The Complete Guide (incl. MVC, REST APIs, GraphQL)

Best 50 Nodejs interview questions from Beginners to Advanced in 2019

Node.js 12: The future of server-side JavaScript

An Introduction to Node.js Design Patterns

node-js image

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How to Hire Node.js Developers And How Much Does It Cost?

A Guide to Hire Node.js Developers who can help you create fast and efficient web applications. Also, know how much does it cost to hire Node.js Developers.

Hire Node.JS Developers | Skenix Infotech

We are providing robust Node.JS Development Services with expert Node.js Developers. Get affordable Node.JS Web Development services from Skenix Infotech.

Hands on with Node.Js Streams | Examples & Approach

The practical implications of having Streams in Node.js are vast. Nodejs Streams are a great way to handle data chunks and uncomplicate development.

Node.js Performance: Node.js vs. Io.js

You may already be aware that Raygun uses Node.JS for our API nodes that receive your precious crash reporting data (we also do node.js crash reporting if you’re interested). We’ve peaked in the past at more than 110,000 requests per second coming...

Node.js Live | Node.js Docker Tutorial | Dockerizing Node.js App|Node.js Training|Edureka

🔥 Node.js Certification Training: https://www.edureka.co/nodejs-certification-training This Edureka video on 'Node.js Docker Tutorial' will help you in learn...