[p5.js 2.0+ Bug Report]: `loadImage` cannot load SVG files

[gfrancine]

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• WebGPU
• p5.strands
• Build process
• Unit testing
• Internationalization
• Friendly errors
• Other (specify if possible)

p5.js version

2.3.0

Web browser and version

No response

Operating system

No response

Steps to reproduce this

This code snippet works perfectly fine with v1.11.13 but not v2.0.0 onwards including the latest version:

let svg; 

async function setup() {
  svg = await loadImage("image.svg");
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  background(220);
  image(svg, 0, 0, 100,100);
}

On >v2.0, it throws this error:

InvalidStateError: The source image could not be decoded.

🌸 p5.js says: It looks like there was a problem loading your image. Try checking if the file path (path...) is correct, hosting the file online, or running a local server.

Sketch: https://editor.p5js.org/gracefrancine/sketches/mnwQeZC4t

Happy to help work on a fix if needed.

[BHARATH0153]

@davepagurek @ksen0 please assign I'd like to work on this issue. The problem is that loadImage in v2.0 uses createImageBitmap(blob) which doesn't support SVG files. The fix is to detect image/svg+xml content type and use an Image element with a blob URL instead. Can I be assigned?

[vamshi567bh]

@ksen0 @davepagurek can i work on this issue

[ksen0]

Hi @vamshi567bh thanks for the interest, in the future if interested in volunteering please be sure to describe your approach not only ask for assignment. Also please do not tag individuals for general assignment requests, please, because this cuases many notifications and makes it easy to miss tags in ongoing discussions. Thanks in advance!

@gfrancine as the original reporter you indicated wanting to work on a fix, it's tours if you want it! Please confirm here that's you're working on it by end of day June 24th.