Vue.js convert svg $ref element to dataURL

Question

In vue.js I am trying to convert an svg element to a dataURL using the npm package svg-to-dataurl

I am using $refs to get the element,

<svg ref="referenceSVG" version="1.1" xmlns="http://www.w3.org/2000/svg">
                        <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
                </svg>

I click a button which calls a method which gets the referenced element.

refSVG(){
        this.svgStr = this.$refs.referenceSVG
        ......
    }

Next I log this variable, which is of type string,

console.log(this.svgStr);//is an object

If I pass this.svgStr to the function svgToDataUrl(this.svgStr) the dataURL is not created correctly and gives,

If on the other hand, I directly pass in the element as a string like this,

this.dataUrl = svgToDataURL('<svg ref="referenceSVG" version="1.1" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /></svg>')

This gives a dataURL which can be used,

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

So it seems that the origin svgStr needs to be converted to a string. To do this I used,

this.toString = this.svgStr.toString()

and logged it, which gives,

[object SVGSVGElement]

Which is not the full element I'd expect and so no use in the svgToDataUrl().

How can I get the element into the svgToDataUrl() function for conversion to a dataURL?

Also I am not sure if I should be talking about a dataUri or dataUrl?

Any help would be greatly appreciated.

Thanks,

TommyF · Accepted Answer · 2019-03-15 07:55:16Z

1

Your variable is not of type string but of type Object. Therefore if you call toString() on it it'll return the string representation of that object not the SVG content you're looking for.

You can access the HTML representation of a ref node though simply through its outerHTML property:

this.svgStr = this.$refs.referenceSVG.outerHTML

answered Mar 15, 2019 at 7:55

TommyF

7,1708 gold badges39 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ofey Over a year ago

Wonderful, that's it. Thank you so much for this answer. I knew there was an innerHTML but not that there is an outerHTML. Works perfectly.

Collectives™ on Stack Overflow

Vue.js convert svg $ref element to dataURL

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related