SVG to PNG – javascript

Contents

☰

⇨

The article provides more than one methods to convert SVG to PNG:

Install Inkscape. It is a free and open source tool which supports to convert a SVG or a batch of SVG to PNG.
Use HTML5 canvas’s drawImage method to draw the SVG on canvas and gets an encoded PNG from it.

Use a free and open source tool: Inkscape

Inkscape is a Free and open source vector graphics editor. It can be used to convert SVG to PNG and PNG to SVG.

Convert a SVG to a PNG with GUI

Inkscape > Open > Choose a SVG file > Export to PNG.

Convert a batch of SVG files with a command

Inkscape also provides command lines. To convert all the SVG to PNG, run below command in the command line terminal:

# Export all svg files to png files
# -h, the height of the generated png file
# -w, the width of the generated png file
$ inkscape --export-type='png' -h 256 -w 256 *.svg

Then all the PNG files will be generated with the same file names except the file extensions in the same folder.

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.

Method 2: 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);

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.

Internet Explorer

It is able to convert SVG to image with a single line of code with Internet Explorer (v11).