title: Vue.js convert svg $ref element to dataURL
body: <p>In vue.js I am trying to convert an svg element to a dataURL using the npm package <a href="https://www.npmjs.com/package/svg-to-dataurl" rel="nofollow noreferrer">svg-to-dataurl</a></p>
  
  <p>I am using $refs to get the element,</p>
  
  <pre><code>&lt;svg ref="referenceSVG" version="1.1" xmlns="http://www.w3.org/2000/svg"&gt;
                          &lt;circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /&gt;
                  &lt;/svg&gt;
  </code></pre>
  
  <p>I click a button which calls a method which gets the referenced element.</p>
  
  <pre><code>refSVG(){
          this.svgStr = this.$refs.referenceSVG
          ......
      }
  </code></pre>
  
  <p>Next I log this variable, which is of type string,</p>
  
  <pre><code>console.log(this.svgStr);//is an object
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/0FPOy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0FPOy.png" alt="enter image description here"></a></p>
  
  <p>If I pass this.svgStr to the function svgToDataUrl(this.svgStr) the dataURL is not created correctly and gives,</p>
  
  <p><a href="https://i.stack.imgur.com/YsxHc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YsxHc.png" alt="enter image description here"></a></p>
  
  <p>If on the other hand, I directly pass in the element as a string like this,</p>
  
  <pre><code>this.dataUrl = svgToDataURL('&lt;svg ref="referenceSVG" version="1.1" xmlns="http://www.w3.org/2000/svg"&gt;&lt;circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /&gt;&lt;/svg&gt;')
  </code></pre>
  
  <p>This gives a dataURL which can be used,</p>
  
  <pre><code>data:image/svg+xml,%3Csvg%20ref%3D%22referenceSVG%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2240%22%20stroke%3D%22black%22%20stroke-width%3D%223%22%20fill%3D%22red%22%20%2F%3E%3C%2Fsvg%3E
  </code></pre>
  
  <p>So it seems that the origin svgStr needs to be converted to a string. To do this I used,</p>
  
  <pre><code>this.toString = this.svgStr.toString()
  </code></pre>
  
  <p>and logged it, which gives,</p>
  
  <pre><code>[object SVGSVGElement]
  </code></pre>
  
  <p>Which is not the full element I'd expect and so no use in the svgToDataUrl().</p>
  
  <p>How can I get the element into the svgToDataUrl() function for conversion to a dataURL?</p>
  
  <p>Also I am not sure if I should be talking about a dataUri or dataUrl?</p>
  
  <p>Any help would be greatly appreciated.</p>
  
  <p>Thanks,</p>