Draw an SVG to canvas and download it as an image in JavaScript

What will you learn 📖 ?

Draw an SVG in canvas

Download the canvas as image(jpeg || png|| webp)

Selecting the quality of the image

Downloading multiple files as zip

Draw an SVG to canvas 🎨.

Let’s assume we have an SVG element with id svg_element. We will convert the svg into an image and then we will draw the image into Canvas.

SVG → Image → Canvas

Steps to draw an SVG to canvas:

• Find the width and height of an SVG
• Clone the SVG node
• Create a blob object from the SVG
• Create a URL for the blob
• Load the URL into an image element
• Create a canvas with width and height of the SVG
• Draw the image to the canvas

🔷 To find the width and height of the SVG, we can use svgElement.getBBox(). The getBBBox() method will return an object with left , top, width, height value. In other words, the bounding box of the svg element .

var svgElement = document.getElementById('svg_element');

let {width, height} = svgElement.getBBox();

🔷 To clone a node we can use cloneNode method.

let clonedSvgElement = svgElement.cloneNode(true);

// true for deep clone

🔷 Now we need to create a blob object from the cloned node:

let outerHTML = clonedSvgElement.outerHTML,

blob = new Blob([outerHTML],{type:'image/svg+xml;charset=utf-8'});

🔷 To create a URL from the blob Object:

🔷We have a URL for the blob, now we need to load the blobURL to the image element. Also, we need to add onload event to the image element. This will be triggered once the image is loaded. Once the image is loaded we can draw the image to canvas.

Now we have drawn the image to the canvas, The next step is, let’s download the canvas

Download canvas as image (png || webp || jpeg)

We have a canvas, and we need to convert it into png or jpg. For that we will convert the canvas into DataURL.

Data URLs are composed of four parts: a prefix (data:), a MIME type indicating the type of data, an optional base64 token if non-textual, and the data itself

let png = canvas.toDataURL(); // default png

let jpeg = canvas.toDataURL('image/jpg');

let webp = canvas.toDataURL('image/webp');

To download the image, we will write a function that will create a link element with href pointing the DataURL created from the image.

Selecting the quality of the image 🖼.

We can also set the quality of the image for jpeg and webp images.

The quality value is a number between 0 and 1, indicating the image quality to use for image formats that use lossy compression such as image/jpeg and image/webp. The default value is 0.92.

let jpeg = canvas.toDataURL('image/jpg'); // 0.92

let webp = canvas.toDataURL('image/webp', 0.5);

Downloading multiple files as zip 🗂.

Consider we have multiple files. We can zip multiple files into a single file and download it.

For creating a zip, we can use JSZip library. Download jszip.js and include in your html.

Once included, we need to:

1. Create a JSZip() object
2. Create a folder
3. Add the file to the folder
4. Download the zip

Creating a JsZip object

let jsZip = new JSZip();

Create a folder and Add an image to the folder

let folder = jsZip.folder("images");

We have two images, These two images are in the DataURL format, and we can only pass the base64 string for zipping file , for that we need to spilt the base64 string from the dataURL.

Generally a dataURL looks like this:

data:image/png;base64, base64String

We need to split the data:image/png;base64, from the data URL:

Then we need to add the baseString to the folder as file, so the final code looks like:

This will generate a zip and start the download.

If you found any errors, please let me know. Because Code without bug is like a book without title.

Thanks for Reading this article . I hope you like this article . Please follow me for more interesting articles.