Namespace prefix NS1 for href on %tagElement% is not defined, setAttributeNS

Question

I got this error in safari while trying to convert svg to base64 url via code:

$svgCopy = $('svg').clone()
html = $('<div>').append($svgCopy).html()
imgSrc = 'data:image/svg+xml;base64,' + btoa(html)
imgEl.src = imgSrc

The problem is that when you set attribute with NS (setAttributeNS) safari sets NS\d+ namespace and do not sets xmlns:NS\d+ attribute in svg, so it looks like

<use NS1:href="#source" />

When you copy such svg in Chrome - you have not such problem because this svg element will look like this:

<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#source" />

And in result (on svg copy) we getting invalid file.

UPD: @Robert with setAttributeNS all is ok:

el.setAttributeNS('http://www.w3.org/1999/xlink', 'href', '#source')

Without proper call it won't work in Chrome.

Answer 1

I did not find a better solution than to simply replace those occurrences with:

html = html.replace(/NS\d+:href/gi, 'xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href')

Now it works well.

EDIT: Firefox requires xmlns:xlink="http://www.w3.org/1999/xlink at the root, and Safari likes that, so now I'm adding this attribute to the Root:

draw.canvas.setAttributeNS('http://www.w3.org/2000/svg', 'xlink', 'http://www.w3.org/1999/xlink') 

...and correcting HTML of the SVG copy for further use in base64:

// Firefox, Safari root NS issue fix
html = html.replace('xlink=', 'xmlns:xlink=')
// Safari xlink NS issue fix
html = html.replace(/NS\d+:href/gi, 'xlink:href')