Export SVG as PNG using canvg.js and Canvas

Scenario

Instead of the post which shows how it exports SVG using XMLSerializer, this time we are going to export Raster Graphics(PNG, JPEG, etc.) using canvg.js and also HTML5 Canvas.

2016-06-02_104328

DEMO SOURCE

Solution

That’s quite easy to do it. You can imagine that a painter paints a view. Canvas is the painter, the view is SVG, and the picture which is made by the painter is Raster Graphic.

pexels-photo-47482
Canvas paints SVG as a PNG.

The above photo was added three words by me. And the souce and license are as following links: SOURCE LICENSE.

Preparation

At first, import libraries and dependencies.

<html>
  <head>
    ...
    <script type="text/javascript" src="http://gabelerner.github.io/canvg/rgbcolor.js"></script>
    <script type="text/javascript" src="http://gabelerner.github.io/canvg/StackBlur.js"></script>
    <script type="text/javascript" src="http://gabelerner.github.io/canvg/canvg.js"></script>
    ...
  </head>
  <body>
    ...
  </body>
</html>

The next step, add a download button and SVG in body.

<html>
  <head>
    ...
    <script type="text/javascript" src="http://gabelerner.github.io/canvg/rgbcolor.js"></script>
    <script type="text/javascript" src="http://gabelerner.github.io/canvg/StackBlur.js"></script>
    <script type="text/javascript" src="http://gabelerner.github.io/canvg/canvg.js"></script>
    ...
  </head>
  <body>
    <div>
      <input id='downloadBtn' type='button' value='Download'/>
    </div>
    <svg xmlns="http://www.w3.org/2000/svg" class="item" id="svg-01" width="600" height="250">
      <rect fill="none" stroke="#000" stroke-width="1" x="0" y="0" width="600" height="250" />
      <text class="item-title" style="font-family:monospace; font-size: 20px;" lengthAdjust="spacing" textLength="580" transform="translate(300,40)" text-anchor="middle">Export SVG as PNG using canvg.js and Canvas</text>
    </svg>
</body>
</html>

You will see like this:

2016-06-02_104328

Render SVG as PNG

We create a function named SVG2PNG with 2 parameters: svg and callback. callback means callback function and it will be executed at last of SVG2PNG; however, you must understand what callback function is.

function SVG2PNG(svg, callback) {
  var canvas = document.createElement('canvas'); // Create a Canvas element.
  var ctx = canvas.getContext('2d'); // For Canvas returns 2D graphic.
  var data = svg.outerHTML; // Get SVG element as HTML code.
  canvg(canvas, data); // Render SVG on Canvas.
  callback(canvas); // Execute callback function.
}

Link Generator

We use a element for downloading.

function generateLink(fileName, data) {
  var link = document.createElement('a');
  link.download = fileName;
  link.href = data;
  return link;
}

Bind Click Event & Download

document.getElementById('downloadBtn').onclick = function() { // Bind click event on download button.
  var element = document.getElementById('svg-01'); // Get SVG element.
  SVG2PNG(element, function(canvas) { // Arguments: SVG element, callback function.
    var base64 = canvas.toDataURL("image/png"); // toDataURL return DataURI as Base64 format.
    generateLink('SVG2PNG-01.png', base64).click(); // Trigger the Link is made by Link Generator and download.
  });
}

Author: jsgao0

My name is Jia-Siang Gao. Or call me Anson. At present, I'm a full-stack web developer in Kinpo Group. I love to sovle problems of technology.

One thought on “Export SVG as PNG using canvg.js and Canvas”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s