Convert a SVG Image to PNG, JPEG, TIFF, WEBP, & HEIF Formats in NodeJS
Introduction
Do you need to convert a SVG file to a PNG, JPEG, TIFF, WEBP, or HEIF format? This article will walk you through how to convert to all of those types of formats.
We will use Node.js as our coding language of choice and the Sharp npm package to do most of the heavy lifting for us.
Let's get started!
Table of Contents
  1.  Install Sharp Npm Package
  2.  SVG to PNG
  3.  SVG to JPEG
  4.  SVG to TIFF
  5.  SVG to WEBP
  6.  SVG to HEIF
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
Now we're ready to start writing some code and converting images!
SVG to PNG
For the first example, let's convert a SVG file to a Portable Network Graphic (PNG) file format. Make sure you have a SVG file in the root of your project directory that we can play around with.
Here's 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.
SVG to JPEG
Now, let's convert our SVG file to a JPEG format. Make sure you have a SVG file in the root of your project directory to play around with.
Here's the full code:
Node.js
 
const sharp = require("sharp")
 
sharp("file.svg")
  .png()
  .toFile("new-file.jpg")
  .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 file as JPEG file type 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: 'jpg',
  width: 2500,
  height: 527,
  channels: 4,
  premultiplied: false,
  size: 47194
}
And you should see the new JPEG 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.
SVG to TIFF
Next, let's convert a SVG file to a Tagged Image File Format (TIFF) file. Make sure you have a SVG file in the root of your project directory that we can play around with.
Here's the full code:
Node.js
 
const sharp = require("sharp")
 
sharp("file.svg")
  .tiff()
  .toFile("new-file.tiff")
  .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 TIFF and write the 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: 'tiff',
  width: 2500,
  height: 527,
  channels: 3,
  premultiplied: false,
  size: 65778
}
And you should see the new TIFF file in your project directory.
There are also additional options you can pass to the .tiff() method to alter the output image. These include the compression type, quality level, and more. You can check them out in their documentation.
SVG to WEBP
Next, let's convert a SVG file to a WEBP file format. Make sure you have a SVG file in the root of your project directory that we can play around with.
Here's the full code:
Node.js
 
const sharp = require("sharp")
 
sharp("file.svg")
  .webp()
  .toFile("new-file.webp")
  .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 WEBP and write the 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: 'webp',
  width: 2500,
  height: 527,
  channels: 4,
  premultiplied: false,
  size: 35600
}
And you should see the new WEBP file in your project directory.
There are also additional options you can pass to the .webp() method to alter the output image. These include the losslessness, quality level, and more. You can check them out in their documentation.
SVG to HEIF
For the last example, let's convert a SVG file to a High Efficiency Image File (HEIF) format. Make sure you have a SVG file in the root of your project directory that we can play around with.
Here's the full code:
Node.js
 
const sharp = require("sharp")
 
sharp("file.svg")
  .png()
  .toFile("new-file.heif")
  .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 it as a HEIF 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.
You should also see the new HEIF 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 and happy coding!
Have any questions or comments about this article? You can contact me via email at nick@coderrocketfuel.com or on Twitter at @CoderRocketFuel.
If you enjoyed this free content, please consider supporting what I do by Buying Me a Coffee.