DEV Community

Hrishikesh Pathak
Hrishikesh Pathak

Posted on • Originally published at hrishikeshpathak.com

Convert SVG into PNG in the browser using Resvg

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 (0)