Firefox svg canvas drawImage error

Question

I am trying to convert an external svg icon to base64. It works in all browsers except Firefox, which gives the error message "NS_ERROR_NOT_AVAILABLE".

var img = new Image(); img.src = "icon.svg"; img.onload = function() { var canvas = document.createElement("canvas"); canvas.width = this.width; canvas.height = this.height; var ctx = canvas.getContext("2d"); ctx.drawImage(this, 0, 0); var dataURL = canvas.toDataURL("image/png"); return dataURL; }; 

Can someone help me with this please? Thanks in advance.

Answer 1

Firefox does not support drawing SVG images on canvas if the svg file does not have width and height attributes in the <svg> root element, and these width / height attributes are not percentages. This is a long-standing mistake .

You will need to edit the icon.svg file to match the above criteria.