How to Convert an SVG to an Image in the Browser?

Sometimes, we may want to convert an SVG image into another image format like JPEG and PNG in our web app.

We can do this completely from the client-side.

In this article, we’ll look at how to convert an SVG into another image format completely from the client-side.

Convert an SVG to an Image

We can convert an SVG to an image completely with client-side JavaScript code.

To do this, we write:

const svg = `
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="full" width="300" height="200">
   <rect width="100%" height="100%" fill="red" />
   <circle cx="150" cy="100" r="80" fill="green" />
   <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
</svg>
`
svgToPng(svg, (imgData) => {
  const pngImage = document.createElement('img');
  document.body.appendChild(pngImage);
  pngImage.src = imgData;
});

function svgToPng(svg, callback) {
  const url = getSvgUrl(svg);
  svgUrlToPng(url, (imgData) => {
    callback(imgData);
    URL.revokeObjectURL(url);
  });
}

function getSvgUrl(svg) {
  return URL.createObjectURL(new Blob([svg], {
    type: 'image/svg+xml'
  }));
}

function svgUrlToPng(svgUrl, callback) {
  const svgImage = document.createElement('img');
  document.body.appendChild(svgImage);
  svgImage.onload = () => {
    const canvas = document.createElement('canvas');
    canvas.width = svgImage.clientWidth;
    canvas.height = svgImage.clientHeight;
    const canvasCtx = canvas.getContext('2d');
    canvasCtx.drawImage(svgImage, 0, 0);
    const imgData = canvas.toDataURL('image/png');
    callback(imgData);
    document.body.removeChild(imgPreview);
  };
  svgImage.src = svgUrl;
}

We have the svg variable with the SVG string.

To start, we call svgToPng with the svg string and the callback .

Then we create an img element with document.createElement and assign it to pngImage .

Then we call document.body.appendChild to append the img element to the body.

Then we set pngImage.src to the URL that we’ll get from the callback imgData parameter.

Then we create the svgToPng function which takes an svg string and the callback function.

Next, we create the svgToPng function that takes the svg and callback .

It calls the getSvgUrl function to get the base64 URL from the svg .

Then we call the svgUrlToPng functioon that does the conversion with the url and the callback to get the image data.

To create the getSvgUrl function, we just call URL.createObjectURL with the svg string converted to a Blob instance to return the base64 version of the SVG.

Then we create the svgUrlToPng function that puts the SVG into a canvas.

We do this so that we can extract the canvas content as an image binary later.

In the svgUrlToPng function, we create an img element.

Then we append the created element to the body with document.body.appendChild .

Then we set the width and height of the canvas from the svgImage sizes.

And then we call drawImage on the canvas context to draw the SVG base64 URL into the canvas.

Next, we call toDataURL with the MIME type of the image format to convert to.

Then we call the callback so that the callback runs with the imgData image data passed into it.

Then we call documen.body.removeChild to remove the preview.

We also set svgImage.src to the svgURL to add a preview.

Conclusion

We can convert an SVG into another image format with JavaScript.