DEV Community

Hrishikesh Pathak
Hrishikesh Pathak

Posted on • Originally published at hrishikeshpathak.com

Convert SVG into PNG in the browser using Resvg

#webdev #javascript #beginners #programming

To convert SVG into PNG in the browser, you can use the Resvg-js wasm module.

Setting up the project

  1. Create an index.html file and fetch resvg-wasm module. 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img id="output">
    <script src="https://unpkg.com/@resvg/resvg-wasm"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode
  1. Create an index.js file and link it to the index.html file. 
<script type="module" src="./index.js"></script>
Enter fullscreen mode Exit fullscreen mode

Working with Resvg-wasm

Inside the index.js file, I am using an IFEE function expression. You can also add some event handlers to invoke javascript functions. But for simplicity, the code inside index.js will run immediately when the page loads.

  1. First, initialize the resvg-wasm module using the initWasm method. 
await resvg.initWasm(
    fetch("https://unpkg.com/@resvg/resvg-wasm/index_bg.wasm")
  );
Enter fullscreen mode Exit fullscreen mode
  1. Now defining some options. You can check out for more options in the documentation. 
const opts = {
    fitTo: {
      mode: "width", // If you need to change the size
      value: 800,
    },
  };
Enter fullscreen mode Exit fullscreen mode
  1. This is the final part. Convert an SVG image into a PNG image using resvg-wasm 
const svg ='<svg>...</svg>'; // Input SVG, String or Uint8Array
  const resvgJS = new resvg.Resvg(svg, opts);
  const pngData = resvgJS.render(svg, opts); // Output PNG data, Uint8Array
  const pngBuffer = pngData.asPng();
  const pngURL = URL.createObjectURL(
    new Blob([pngBuffer], { type: "image/png" })
  );
  document.getElementById("output").src = pngURL;
Enter fullscreen mode Exit fullscreen mode
  1. Wrap the code inside an IFEE to invoke immediately on page load. 
(async function () {
    await resvg.initWasm(
    fetch("https://unpkg.com/@resvg/resvg-wasm/index_bg.wasm")
  );

    const opts = {
    fitTo: {
      mode: "width", // If you need to change the size
      value: 800,
    },
  };

    const svg ='<svg>...</svg>'; // Input SVG, String or Uint8Array
  const resvgJS = new resvg.Resvg(svg, opts);
  const pngData = resvgJS.render(svg, opts); // Output PNG data, Uint8Array
  const pngBuffer = pngData.asPng();
  const pngURL = URL.createObjectURL(
    new Blob([pngBuffer], { type: "image/png" })
  );
  document.getElementById("output").src = pngURL;
})();
Enter fullscreen mode Exit fullscreen mode

Further read:

Top comments (1)

Collapse
 
kirtirajsinh profile image
kirtirajsinh •

yo thank you so much for writing this. I spent the whole day first figuring out how to create dynamic image and then found out I needed png or jpg and cloudflare doesn't support nodejs based packages.

Again thanks. keep writing.

Read next

mikeyoung44 profile image

New AttackVector Jailbreaks LLMs by Prompt Manipulation

Mike Young -

truongpx396 profile image

🔐 Solidity Limitations, Solutions, Best Practices and Gas Optimization 🚀

Truong Phung -

dmitry_bas profile image

Using SCP with ssh2 in Node.js Applications without SFTP

Dmitry Bas -

mikeyoung44 profile image

Unraveling the Might of "Super Weights" in Massive Language Models: Identification and Management

Mike Young -