Scratch-gui: Uploaded costumes disappear

[ChampikaF]

Expected Behavior

Costumes should not disappear

Actual Behavior

Uploaded svg costumes disappear on project load and then only reappear when going into the paint editor and moving the costume around on the canvas. This happens repeatedly to certain costumes in the project referenced below.

Might be related to #2007 but these costumes haven't been switched between vector and bitmap. These costumes were created in photoshop and saved as svg.

Steps to Reproduce

• Go to this project: https://scratch.mit.edu/projects/299836206/
• Notice that you do not see a cloud (only the button sprite). This is the bug!
• Click on the "cloud" sprite and move the "cloud" image.
• The cloud should now appear in the player and move when the button is clicked.

Operating System and Browser

Can replicate on Debian, Chrome.

[thisandagain]

This is an issue we have been seeing on Safari in particular (both on MacOS and iOS). Needs further investigation.

[thisandagain]

/cc @kchadha @BryceLTaylor

[BryceLTaylor]

There are a few related issues to sprites not appearing on the stage. Many of them have to do with svg files imported from other software:
https://github.com/LLK/scratch-paint/issues/816
https://github.com/LLK/scratch-paint/issues/782
https://github.com/LLK/scratch-paint/issues/793

[spectranaut]

@BryceLTaylor do you know a way to fix/resave the SVGs so that they aren't broken in Scratch?

[thisandagain]

@ktbee Do you mind looking into this after you wrap up your current task?

/cc @kchadha

[ktbee]

@thisandagain sure thing!

[ktbee]

After digging into this a little bit, I'm finding that this issue at least originates outside of Scratch. In Chrome and Safari this Codepen's canvas silently fails to load the cloud SVG, but in Firefox it loads successfully: https://codepen.io/ktbee/pen/zXZbOQ

I'm taking a look at why Chrome/Safari are able to display this SVG after updating it in the costume editor, perhaps we can make sure this update logic can happen on first render as well. Also let me know if anyone has thoughts or has run into something similar before.

[gnarf]

I was messing around a bit with this pen trying various things... found some interesting followups:

<img src=""> doesn't render either:

Chrome Left - FF right

but if you load the URL into the address bar chrome seems to be able to display it:

[gnarf]

Found it... Viewing the source of the cloud SVG:

<image x="57.5376" y="359.28938" transform="scale(0.46927,0.46927)" width="358" height="202" 
xlink:href="data:img/png;base64,........">

img/png is not a mime type and needs to say image/png and then the image loads correctly

[ktbee]

Thanks for tracking that down @gnarf! I'll add a fix in svg-renderer to account for non-existent mime types.

[thisandagain]

Wonderful! Thanks @gnarf and @ktbee!

[ktbee]

For anyone curious, I also submitted an issue with the Chromium team for this browser incompatibility: https://bugs.chromium.org/p/chromium/issues/detail?id=952423

[BryceLTaylor]

Inkscape also appears to produce .svg images with a similar problem: https://github.com/LLK/scratch-gui/issues/4242

[ktbee]

For the original issue of SVGs with invalid mime types, this has been solved by https://github.com/LLK/scratch-svg-renderer/pull/82. Existing projects with this issue may just need to toggle the costume type between vector, bitmap and back to vector again for this fix to take effect. It will be fine for new costumes as they're uploaded as well.

[ktbee]

Re-opening this for now since the fix in https://github.com/LLK/scratch-svg-renderer/pull/82 allows the SVG to appear on the stage but not in the paint editor. I'm working on a fix now for the paint editor.

[ktbee]

After digging into why this fix wasn't working, I found part of the issue was that my test file had a new line inserted on the first line of the SVG, which was causing it to fail to load for unrelated reasons. However, the sprite tile still doesn't show the cloud, so I'll leave this open for now until that is fixed.