loadImage() for SVG fails in Firefox

[joeyklee]

Nature of issue?

• Found a bug
• Existing feature enhancement
• New feature request

Most appropriate sub-area of p5.js?

• Color
• Core
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL

Which platform were you using when you encountered this?

• Mobile/Tablet (touch devices)
• Desktop/Laptop
• Others (specify if possible)

Details about the bug:

• p5.js version: 0.5.14
• Web browser and it's version: Firefox 55.0.3 (64-bit)
• Operating System: MacOS Sierra 10.12.6
• Steps to reproduce this:

var img1;
function preload(){
	img1= loadImage("module_1.svg");
}

function setup(){
	createCanvas(800, 800);
	console.log(img1);
	noLoop();
}

function draw(){
	image(img1, 0, 0);
}

svg file:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="-205 207 100 100"><path d="M-123.8 302.3l-76.5-76.5c-3.9-3.9-3.9-10.2 0-14.1 3.9-3.9 10.2-3.9 14.1 0l76.5 76.5c3.9 3.9 3.9 10.2 0 14.1-2 2-4.5 2.9-7.1 2.9-2.5.1-5.1-.9-7-2.9z"/></svg>

Feature enhancement details:

Loading svg in Chrome seems to be working as expected.

However, Firefox returns: InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable when trying to run the image() function which is probably because there doesn't seem to contain anything loaded in the img1 variable.

Any chance we might be able to find out what's causing this to fail in Firefox? Thanks so much! 🙏

[limzykenneth]

Have a look at this stackoverflow question here. Basically it's a bug in Firefox that cause it to not draw SVG images onto canvas if the SVG themselves does not have a non-percentage width and height attribute. Simply adding on the width and height attribute onto the root <svg> tag will solve this.

[joeyklee]

Hi @limzykenneth - thanks so much for this link and explanation! I will close this up now.