SVG to PNG

⇨

Convert SVG to image with a single line of code

This method works only on IE (v11), but not on Edge, Chrome or Firefox.

HTML element img accepts an SVG file as its source, therefore you can convert SVG to PNG with a single line of code:

<img src="svg-logo.svg" />

Then you can right click it and save it as a PNG image. This way is not only the simplest, but also gets the same picture quality as the SVG file.

You can also set a customized size for it:

<img src="svg-logo.svg" width="256" height="256" />

Demo:

Note: If your SVG references a font, the font will be replaced by a default one in the image, meaning referenced fonts are not supported.

Using HTML5 canvas

svg to png provides a more complicated method, it uses HTML5 canvas’s drawImage method to draw the SVG on canvas and gets an encoded PNG from it.

svg to png online is a live demo that you can use it to convert your SVG to a PNG image. Or you can do it yourself with below code:

let svg     = document.querySelector('#svg'),
    image   = document.querySelector('#png'),
    canvas  = document.createElement('canvas'), // New element
    context = canvas.getContext('2d'),
    loader  = new Image;

loader.width  = canvas.width  = image.width;
loader.height = canvas.height = image.height;
loader.onload = function() {
    context.drawImage(loader, 0, 0, loader.width, loader.height);
    image.src = canvas.toDataURL();
};
var svgXML = (new XMLSerializer).serializeToString(svg);
loader.src = 'data:image/svg+xml,' + encodeURIComponent(svgXML);

I find there will be some quality loss.

Note:

This method does not support referenced fonts.

Other methods

svgexport

svgexport is a open-source nodejs module. You need to install node.js and install svgexport module to use it.

The biggest disadvantage is that it does not support referencing elements in SVG.