Fix loadImage SVG file loading regression

src/image/loading_displaying.js

@@ -125,8 +125,19 @@ function loadingDisplaying(p5, fn){
 
       } else {
         // Non-GIF Section
-        const blob = new Blob([data]);
-        const img = await createImageBitmap(blob);
+        const img = await new Promise((resolve, reject) => {
+          const img = new Image();
+          const blob = new Blob([data], { type: contentType });
+          const url = URL.createObjectURL(blob);
+
+          img.onerror = e => reject(e);
+          img.onload = () => {
+            URL.revokeObjectURL(url);
+            resolve(img);
+          };
+
+          img.src = url;
+        });
 
         pImg.width = pImg.canvas.width = img.width;
         pImg.height = pImg.canvas.height = img.height;

test/unit/image/loading.js

@@ -40,6 +40,7 @@ suite('loading images', function() {
   const disposeNoneGif = '/test/unit/assets/dispose_none.gif';
   const disposeBackgroundGif = '/test/unit/assets/dispose_background.gif';
   const disposePreviousGif = '/test/unit/assets/dispose_previous.gif';
+  const svgImage = '/test/unit/assets/green.svg';
   const invalidFile = '404file';
 
   beforeAll(async function() {
@@ -238,6 +239,21 @@ suite('loading images', function() {
     assert.equal(gifImage.gifProperties.displayIndex, 0);
     assert.equal(gifImage.gifProperties.timeDisplayed, 0);
   });
+
+  test('loads vector (SVG) images', async () => {
+    await expect(mockP5Prototype.loadImage(svgImage)).resolves.not.toThrow();
+
+    const img = await mockP5Prototype.loadImage(svgImage);
+    assert.isTrue(img instanceof mockP5.Image);
+
+    // ensure the sample svg is fully parsed and drawn correctly
+    assert.equal(img.width, 48);
+    assert.equal(img.height, 48);
+
+    const GREEN = [0, 255, 0, 255];
+    assert.deepEqual(img.get(0, 0), GREEN);
+    assert.deepEqual(img.get(47, 47), GREEN);
+  });
 });
 
 suite.todo('displaying images', function() {