website logo

Last Updated:

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>
  1. create an index.js file and link it to the index.html file.
<script type="module" src="./index.js"></script>

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")
  );
  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,
    },
  };
  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;
  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;
})();

See Also