ブラウザに描画したSVGをPNGにしてダウンロード

Question

前提・実現したいこと

ブラウザに描画したSVGをPNGにしてダウンロードさせたいです。
SVGファイル自体はサーバーにアップロードしてありますが、ユーザーがfillの値を操作して塗り絵したデータをPNでGダウンロードさせたいという状況です。

試したこと

SVGをcanvasに再描画させ、canvg.jsでPNGに変換・ダウンロードする方法を試しています。
方法そのものがスマートでない場合は、代替手段の手がかりを頂けるとありがたいです。

###コード

<template>
  <div>
    <b-button class="block is-info" @click="downloadSvg">download</b-button>
  </div>
</template>

<script>
import canvg from "canvg";
export default {
  methods: {
    downloadSvg: function() {
      const svgimage = document.getElementsByClassName("calendar-heatmap")[0];
      this.convertSvgToImg(svgimage, this.downloadImg.bind(this));
    },
    convertSvgToImg: function(svg, callback) {
      const canvas = document.createElement("canvas");
      canvas.width = svg.width.baseVal.value;
      canvas.height = svg.height.baseVal.value;
      // svgをcanvasに描画
      const data = new XMLSerializer().serializeToString(svg);
      canvg(canvas, data);
      callback(canvas);
    },
    // 画像ダウンロード
    generateLink: function(fileName, img) {
      const link = document.createElement("a");
      link.download = fileName;
      link.href = img;
      return link;
    },
    downloadImg: function(canvas) {
      const img = canvas.toDataURL("image/png");
      this.generateLink("twithub-result.png", img).click();
    }
  }
};
</script>

エラー

vue.runtime.esm.js?ff9b:619 [Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'width' of undefined"

vue.runtime.esm.js?ff9b:1888 TypeError: Cannot read property 'width' of undefined

補足情報

"canvg": "^3.0.6",
"vue": "^2.5.2",
"vue-head": "^2.2.0",
"vue-router": "^3.0.1"
"buefy": "^0.9.3",