When it comes to web images, PNG is a go-to format for its support of transparency and broad compatibility. On the other hand, SVG is a favorite for its scalability, making it ideal for logos, icons, and other vector-based graphics. Despite SVG’s many advantages, there are times when converting SVGs to PNGs is necessary, especially to ensure compatibility across different platforms and devices. In this blog post, we’ll guide you through the process of converting SVG graphics to PNG format using Node.js.

Convert SVG to PNG using Node.js (Grayscale, Rotate, Flip, Bright Watermark)

Node.js API to Convert Images

GroupDocs provides a powerful Conversion API that enables developers to convert image formats and manipulate the resulting images during the conversion process. The API supports a wide range of advanced options, making it a great choice for converting SVG to PNG in Node.js. We’ll use GroupDocs.Conversion for Node.js for this task.

To get started, you can install GroupDocs.Conversion for Node.js by running the following command in your project:

npm i @groupdocs/groupdocs.conversion

For further details, visit the documentation and the API Reference.

Convert SVG to PNG Image using Node.js

Let’s begin by converting SVG vector graphics into PNG format using the default settings. The following steps outline how to convert an SVG image into PNG using Node.js.

  • Load the SVG file using the Converter class.
  • Set up the conversion options.
  • Specify the output format as PNG.
  • Invoke the convert() method with the prepared options.

Here’s the Node.js code that converts the SVG to PNG:

// Convert SVG file into PNG format using Node.js Conversion API with default options
const converter = new groupdocs.conversion.Converter("path/vector-graphic.svg")
const convertOptions = new groupdocs.conversion.ImageConvertOptions()
convertOptions.setFormat(groupdocs.conversion.ImageFileType.Png)
converter.convert("path/converted-svg-to-png.png", convertOptions)
view raw svg_to_png.js hosted with ❤ by GitHub

Advanced SVG to PNG Conversion with Node.js

GroupDocs.Conversion for Node.js offers a variety of customization options that you can apply to the PNG output during the conversion process. These options include:

  • Brightness adjustment
  • Contrast adjustment
  • Gamma correction
  • Grayscale conversion
  • Horizontal or vertical flip
  • Rotation angles
  • Custom image dimensions (height and width)
  • Watermark addition

Let’s take a look at how you can apply these advanced options during SVG to PNG conversion in Node.js.

  • Load the SVG file using the Converter class.
  • Set up the image conversion options.
  • Specify the output format as PNG.
  • Define the customizations, such as brightness, rotation, or any other available.
  • Invoke the convert() method to generate the PNG.

Here’s the Node.js code that applies some of these advanced options:

// Convert SVG vector into PNG format with Node.js using various customizations
const converter = new groupdocs.conversion.Converter("path/vector-graphic.svg")
const convertOptions = new groupdocs.conversion.ImageConvertOptions();
convertOptions.setFormat(groupdocs.conversion.ImageFileType.Png);
convertOptions.setFlipMode(groupdocs.conversion.ImageFlipModes.FlipY);
convertOptions.setBrightness(50);
convertOptions.setContrast(50);
convertOptions.setGamma(0.5);
convertOptions.setGrayscale(true);
convertOptions.setHorizontalResolution(300);
convertOptions.setVerticalResolution(100);
convertOptions.setPageNumber(1);
convertOptions.setPagesCount(2);
converter.convert("path/converted-svg-to-png.png", convertOptions)
view raw svg_to_png_adv.js hosted with ❤ by GitHub

Try SVG to PNG Conversion Online for FREE

Need a quick and easy solution to convert SVG files to PNG? Use this free online SVG to PNG converter. It’s accessible from any device with a web browser, making it convenient and hassle-free.

Convert Word Document to PDF using Node.js.

Get a Free API License

You can get a free temporary license for GroupDocs.Conversion, allowing you to use the API without evaluation limitations.

Conclusion

In this post, we have explored how to convert SVG vector graphics into PNG images using Node.js with GroupDocs.Conversion for Node.js. We’ve also shown how you can enhance the conversion process by applying customizations such as rotation, grayscale, watermarking, brightness adjustments, and more. These advanced features allow you to tailor the PNG output to your exact requirements.

For more examples, check out the GroupDocs GitHub repository, where you can find various code samples to help you build your own SVG to PNG converter. If you have any questions, feel free to reach out to us via the forum.

See Also