Scratch-gui: Sprites are cut-off, missing, off-center in sprite library

[jwzimmer]

Expected Behavior

I expect all the sprites to be visible, approximately centered/ consistent in size, and not cut-off.

Actual Behavior

Some of the sprites seem to be missing bits, off-center, or missing.

Initially abby-d's legs seemed to be missing, but now I am seeing them.

However, a lot of other sprites are still examples of this issue:

Steps to Reproduce

• Look in the costume/ sprite library

Operating System and Browser

_Mac OS X El Capitan 10.11.6, Chrome Version 56.0.2924.87 (64-bit)_

[towerofnix]

Here's a few cases I found:

All of these on Safari 10.0, on macOS 10.12.

[jwzimmer]

Also reported during the internal playtest.

[tmickel]

The basic problem, I think, is that SVGs are rendered differently by the Scratch 2.0 editor than SVG renderers in-browser.

We started resolving some of these "quirks" in project rendering by transforming SVGs in scratch-render (https://github.com/LLK/scratch-render/blob/develop/src/svg-quirks-mode/svg-renderer.js). But scratch-gui is just using a basic svg-to-canvas with the untransformed SVG.

One way to make the sprite/costume library consistent with the project rendering would be to use this quirks transformer (or even just scratch-render) to render the library tiles. Alternatively, could fix the assets to be readily rendered by the browser.

[lifeinchords]

Thanks for reporting @jwzimmer and for sharing how it works @tmickel. Wondering if the bug below, is related to the image sizing:

[paulkaplan]

@rschamp do you think it is worth creating a separate issue for resolving the story letter blocks vs. all of the SVG's? The letter blocks are the most severe (totally invisible) and highest priority (play test Thursday).

WRT the letter blocks, they are not really missing, all the SVGs in that set just do not have an explicit width and height parameter, which it seems is important when using svg as the src for an image tag. I believe if you have an SVG with viewBox="0 0 W H" that adding width="W" height="H" would not impacting anything other than the way browsers render the svg-as-image. You could do something like this:

sed -E "s/viewBox=\"0 0 ([^\"]*) ([^\"]*)\"/viewBox=\"0 0 \1 \2\" width=\"\1\" height=\"\2\"/"

[rschamp]

@paulkaplan I think a new issue for the letter blocks would probably be a good idea.

All of these strangely displaying SVGs are similarly odd in their format where they are either missing width/height or view box or both. Currently they all display correctly in the renderer nonetheless, because of the special SVG rendering implemented there, which fixes a few issues at once. What I was thinking was that I could just render them all in the renderer and save out the fixed SVG file the renderer uses. I think it would be possible to fix them all at once this way, but probably at first I will just try fixing the letters.

[rschamp]

@tmickel I totally missed your comment. @cwillisf and I were thinking in the longer term we should factor out the SVG transformer from scratch-render and use it wherever we need to display Scratch 2.0 SVGs. And also do some sort of conversion when we start saving assets out of 3.0 so that they are the transformed SVGs.

[jwzimmer]

Noted by @chrisgarrity during internal playtest 3/13/17: Star1 and Star3 don't show up in the library, but are fine in the editor.

[jwzimmer]

The costumes for the story sprites show up tiny & off-center in the editor (not visible in library).

[paulkaplan]

Ray did a large fix for this. We should file any specific issues for this separately if they still exist.