In this post, I will show you how to take an SVG file and turn it into a PNG. Before diving into how you convert and SVG, let's look at SVG and PNG file formats.

The battle of the file formats

Let's start with what both these file formats are and what they have in common. Essentially both are types of image formats, though they are very different. SVG is a vector-based image format, and PNG is a raster-based image format.

Now, if you are not familiar with what these are, here is a very quick definition. Vector files store image data using shapes such as lines, circles and paths. In comparison, raster files store image data as a grid of pixels (tiny squares) and each of these pixels stores which colour should be displayed by the program rendering the image.

This means raster images are fixed in size, and you can't upscale them without losing image quality. On the other hand, though vector images can be scaled up and down and they will retain the image quality as the shapes internally to the image will just be scaled.

Converting with Canvas and Javascript

Now that little lesson about what SVG and PNG file formats are, let's move on to using canvas and javascript. Here is the complete code, and then I will break it down and explain each step.

<canvas id="myCanvas" style="display:none;"></canvas>
<p id="imageOutput"></p>

<script>
let svg_data = `<!-- INSERT SVG DATA HERE -->`;

var canvas = document.getElementById("myCanvas");
            
canvas.width = 1170;
canvas.height = 2532;
function drawImage(imageObj) {
    var context = canvas.getContext('2d');
    var x = 0;
    var y = 0;
    context.drawImage(imageObj, 0,0);
    var imageData = context.getImageData(0, 0, imageObj.width, imageObj.height);
    var data = imageData.data;
    context.putImageData(imageData, 0, 0);
}
                
window.onload = function() {
    var imageObj = new Image();
    imageObj.onload = function() {
        drawImage(this);
        document.getElementById("imageOutput").appendChild(convertCanvasToImage(canvas));
    };
    imageObj.src = "data:image/svg+xml," + encodeURIComponent(svg_data);
}
        
function convertCanvasToImage(canvas) {
    var image = new Image();
    image.src = canvas.toDataURL("image/png");
    return image;

}
</script>
 

Let's start with the first section with all the required html tags. The first tag is the canvas tag that will do the work, and in my example I am hiding it as it is not required to be shown. This requires an id attribute so that it can be referenced in the JavaScript code.

The second tag is the placeholder section where the converted imaged will be stored. In my example, this is the paragraph tag; the only thing to make sure you include is the id attribute again to be referenced in the JavaScript code later.

<canvas id="myCanvas" style="display:none;"></canvas>
<p id="imageOutput"></p>

Ok, the rest of the code does the work of converting the SVG image with JavaScript. I have commented this code section as required.

<script>
//1. this is the variable where the contents of the SVG file needs to be stored.
let svg_data = `<!-- INSERT SVG DATA HERE -->`;

//2. This gets a reference to the canvas mentioned above.
var canvas = document.getElementById("myCanvas");

//3. The canvas needs to be set to the width and height of the image.
canvas.width = 1170;
canvas.height = 2532;

//4. This function does the hard work of drawing the SVG image to the canvas.
function drawImage(imageObj) {
    var context = canvas.getContext('2d');
    var x = 0;
    var y = 0;
    context.drawImage(imageObj, 0,0);
    var imageData = context.getImageData(0, 0, imageObj.width, imageObj.height);
    var data = imageData.data;
    context.putImageData(imageData, 0, 0);
}

//5. This function is set to be called with the window is loaded.
// It sets up a new Image and sets a onload to that image to call the drawImage function explained above and then calls the function to convert to canvas to image and stores it in placeholder tag. 
// It also sets the source of the newly created image to be the SVG data stored in the svg_data variable.
window.onload = function() {
    var imageObj = new Image();
    imageObj.onload = function() {
        drawImage(this);
        document.getElementById("imageOutput").appendChild(convertCanvasToImage(canvas));
    };
    imageObj.src = "data:image/svg+xml," + encodeURIComponent(svg_data);
}

//6. This function takes the canvas object as returns a new png image using the toDataURL method.
function convertCanvasToImage(canvas) {
    var image = new Image();
    image.src = canvas.toDataURL("image/png");
    return image;

}
</script>

As you can see, in less than 30 lines of code, you can convert an SVG file into a PNG so that it can be used where SVG files are not supported.