Как из строки сгенерировать png?

new Vue({ 
  el: '#app', 
  vuetify: new Vuetify(), 
  data() { 
    return { 
      expand: false, 
      svg: '', 
      result: [], 
      svgs: [ 
        '<svg width="400" height="400" viewBox="-30 -40 336.6666666666667 283.3333333333333" id="maker-svg" style="padding : 10px; display: none;" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events"><g id="svgGroup" stroke-linecap="round" fill-rule="evenodd" font-size="13.333333333333334" stroke="#03a9f4" stroke-width="0.5mm" fill="rgba(3, 169, 244, 0.1)" style="stroke:#03a9f4;stroke-width:0.5mm;fill:rgba(3, 169, 244, 0.1)"><path d="M 23.333 223.333 L 73.333 23.333 L 173.333 23.333 L 223.333 223.333 L 23.333 223.333 Z" vector-effect="non-scaling-stroke"/><path d="M 173.333 23.333 L 173.333 13.333 L 223.333 13.333 L 223.333 223.333 L 223.333 233.333 L 23.333 233.333 L 23.333 223.333 L 23.333 13.333 L 73.333 13.333 L 73.333 23.333 L 13.333 23.333 L 13.333 223.333 L 23.333 223.333 L 23.333 13.333" id="gray" stroke="gray" style="stroke:gray" vector-effect="non-scaling-stroke"/><g id="captions"><text alignment-baseline="middle" text-anchor="middle" transform="rotate(0,123.333,246.667)" x="123.333" y="246.667">L: 200</text><text alignment-baseline="middle" text-anchor="middle" transform="rotate(0,198.333,0)" x="198.333" y="0">L1: 50</text><text alignment-baseline="middle" text-anchor="middle" transform="rotate(0,48.333,0)" x="48.333" y="0">L2: 50</text><text alignment-baseline="middle" text-anchor="middle" transform="rotate(270,0,123.333)" x="0" y="123.333">H: 200</text></g></g></svg>', 
        '<svg width="400" height="400" viewBox="-72.35 -10 694.6166666666667 1495.6166666666666" id="maker-svg" style="padding : 10px;" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events"><g id="svgGroup" stroke-linecap="round" fill-rule="evenodd" font-size="83.13333333333333" stroke="#03a9f4" stroke-width="0.5mm" fill="rgba(3, 169, 244, 0.1)" style="stroke:#03a9f4;stroke-width:0.5mm;fill:rgba(3, 169, 244, 0.1)"><path d="M 145.483 1247 L 591.483 1247 L 591.483 0 L 145.483 0 L 145.483 1247 Z" vector-effect="non-scaling-stroke"/><path d="M 145.483 0 L 83.133 0 L 83.133 1247 L 145.483 1247 L 145.483 1309.35 L 591.483 1309.35 L 591.483 1247" id="gray" stroke="gray" style="stroke:gray" vector-effect="non-scaling-stroke"/><g id="captions"><text alignment-baseline="middle" text-anchor="middle" transform="rotate(0,368.483,1392.483)" x="368.483" y="1392.483">L: 446</text><text alignment-baseline="middle" text-anchor="middle" transform="rotate(270,0,623.5)" x="0" y="623.5">H: 1247</text></g></g></svg>', 
                '<svg width="400" height="400" viewBox="-30 -40 336.6666666666667 283.3333333333333" id="maker-svg" style="padding : 10px; display: none;" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events"><g id="svgGroup" stroke-linecap="round" fill-rule="evenodd" font-size="13.333333333333334" stroke="#03a9f4" stroke-width="0.5mm" fill="rgba(3, 169, 244, 0.1)" style="stroke:#03a9f4;stroke-width:0.5mm;fill:rgba(3, 169, 244, 0.1)"><path d="M 23.333 223.333 L 73.333 23.333 L 173.333 23.333 L 223.333 223.333 L 23.333 223.333 Z" vector-effect="non-scaling-stroke"/><path d="M 173.333 23.333 L 173.333 13.333 L 223.333 13.333 L 223.333 223.333 L 223.333 233.333 L 23.333 233.333 L 23.333 223.333 L 23.333 13.333 L 73.333 13.333 L 73.333 23.333 L 13.333 23.333 L 13.333 223.333 L 23.333 223.333 L 23.333 13.333" id="gray" stroke="gray" style="stroke:gray" vector-effect="non-scaling-stroke"/><g id="captions"><text alignment-baseline="middle" text-anchor="middle" transform="rotate(0,123.333,246.667)" x="123.333" y="246.667">L: 200</text><text alignment-baseline="middle" text-anchor="middle" transform="rotate(0,198.333,0)" x="198.333" y="0">L1: 50</text><text alignment-baseline="middle" text-anchor="middle" transform="rotate(0,48.333,0)" x="48.333" y="0">L2: 50</text><text alignment-baseline="middle" text-anchor="middle" transform="rotate(270,0,123.333)" x="0" y="123.333">H: 200</text></g></g></svg>', 
      ], 
    } 
  }, 
 
  methods: { 
    generate() { 
       
      for (let i = 0; i < this.svgs.length; i++) { 
      setTimeout(() => { 
        this.svg = this.svgs[i]; 
        const doctype = '<?xml version="1.0" standalone="no"?>'; 
        const source = (new XMLSerializer()).serializeToString(d3.select('#svg-container svg').node()); 
        const blob = new Blob([doctype + source], { 
          type: 'image/svg+xml;charset=utf-8' 
        }); 
        const url = window.URL.createObjectURL(blob); 
        const img = d3.select(document.createElement('div')).append('img') 
          .attr('width', 400) 
          .attr('height', 400) 
          .node(); 
 
        img.onload = () => { 
          // Now that the image has loaded, put the image into a canvas element. 
          var canvas = d3.select(document.createElement('div')).append('canvas').node(); 
          canvas.width = 400; 
          canvas.height = 400; 
          var ctx = canvas.getContext('2d'); 
          ctx.drawImage(img, 0, 0); 
          var canvasUrl = canvas.toDataURL("image/png"); 
           
          console.log(canvasUrl); 
           
          this.result.push(canvasUrl); 
        } 
        img.src = url; 
        }, 0); 
      } 
       
      console.log(this.result); 
    }, 
  }, 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script> 
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet"> 
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet"> 
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet"> 
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script> 
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script> 
<div id="app"> 
  <template> 
    <v-app> 
      <v-content> 
        <v-btn 
          @click="generate" 
        > 
          Generate PNG 
        </v-btn> 
        <div id="svg-container" v-html="svg"> 
           
        </div> 
      </v-content> 
    </v-app> 
  </template> 
</div>