firefox not rendering .svg image

[samheckle]

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Build Process
• Unit Testing
• Internalization
• Friendly Errors
• Other (specify if possible)

p5.js version

1.7.0

Web browser and version

firefox 119.0.1

Operating System

macOSX Ventura 13.5.1

Steps to reproduce this

Steps:

1. Upload .svg image to sketch
2. Create global image variable
3. Assign loaded image to variable
4. Render image inside draw
5. Get "InvalidStateError: CanvasRenderingContext2D.drawImage: Passed-in canvas is empty" error in console
6. Image does not show

Snippet:

// Paste your code here :)
let img

function preload(){
  img = loadImage("stock-svgrepo-com.svg")
}

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  image(img, 0, 0, 200, 200)
}

full sketch here

this sketch works in chrome, but not firefox.

[welcome]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, please make sure to fill out the inputs in the issue forms. Thank you!

[limzykenneth]

This is due to the issue identified in #6468, more specifically in this case the SVG does not have the width and height properties set so it is read as a SVG with 0 width and 0 height.

[JeukHwang]

@limzykenneth Thanks for linking the two issues and helping us to get a broader understanding :)

[limzykenneth]

Closed as duplicate of #6468