Replace png artwork with svg

[amanda-phet]

Objects and Scenery

• cart
• cloud1
• crate
• fridge
• mountains
• mysteryObject01
• rope
• skateboard
• trashCan
• waterBucket

Ground

- [ ] brickTile
- [ ] grass
- [ ] icicle

Screen Icons

• accelerationIcon
• frictionIcon
• tugIcon
• usaMotionIcon

People

• usaGirlHolding
• usaGirlSitting
• usaGirlStanding
• usaManHolding
• usaManSitting
• usaManStanding

[amanda-phet]

All people (all regions) as well as the "objects" above are in svg and uploaded.

Credits:
Mariah: Cart, crate, fridge, rope, trashcan

Amanda: cloud1, mysteryobject01, skateboard, waterbucket

It is unlikely that I will redo the grass/brick/ice artwork.

Ice: The original ai files (ice_overlay.ai and icicle.ai) have linked pngs that I can't view, so they aren't vector art that I can modify.
Brick: The brick artwork is already svg so I don't really know what's going on there.
Grass: The grass will be a much larger file if we choose to redraw it as vector art, so I'm not sure that will be worthwhile. grass.ai has an embedded png, and it's a very small exported file, so I think we should leave this.

[amanda-phet]

TODO:
@amanda-phet

• re-export cloud with bottom shading
• scale bucket up in illustrator so it doesn't need to be scaled up (everything else is getting scaled down.. I want the strokes weights to match)

@Luisav1

• scale rope slightly bigger to match original
• shift mountains slightly so they all match each other and the original sim
• ensure the bricks aren't shifting on the last screen
• clouds slightly smaller
• bug: when changing region, people don't update until they are actually clicked on
• adjust the offsets for pushing the man and the girl (try 5px each to start... I think the man is 5px, but the girl might be less)

[Luisav1]

@amanda-phet I remember seeing the bricks shift on the last screen before, but I don’t see that happening anymore. Currently, I notice that the friction grain image shifts between the third and fourth screens, which is also present in the published version. Should we address this?

About the rope, I see them as the same size now, although I remember seeing a stark difference on your computer. Here is what I see now:

[amanda-phet]

It seems to be an issue in Safari, but not Chrome. Here is Safari:

[amanda-phet]

Safari is also where the bricks and mountains are having problems. For some reason, the Acceleration screen has the bricks shifted, and the mountains!

[amanda-phet]

new cloud and water bucket are uploaded!

[samreid]

Scenery has incorrect bounds for the svg on safari, we can see this with the helper:

This problem remains after several attempts of re-exporting the svg from illustrator with different artboard sizes and settings.

[samreid]

I opened a scenery issue to investigate the safari-specific SVG scaling bug: phetsims/scenery#1658. Until that is solved, we will use PNG for the forces and motion basics rope.

[samreid]

The old rope png was very low resolution. I'll give it a higher resolution, while keeping the file size on the lower side, and re-export as PNG-8 from illustrator. I saw that with its palette, PNG-24 was increasing the file size without a noticeable benefit. Next I will match the dimensions to the prior version.

[samreid]

I pushed the changes as described above. @amanda-phet can you please review/test on phettest?

[amanda-phet]

Unfortunately you used the old asset when you replaced the SVG. Can you use this one instead?

All assets will be updated once I'm done with this work. I didn't expect someone else to open them up while artwork was in flux!

[samreid]

Thanks, I used the image above. Can you please test? Anything else for this issue?

[amanda-phet]

The scaling might need adjusting

I'll move the screenshots to a new issue so this can be closed after the rope is done.

[samreid]

Testing locally in chrome, safari and on phettest after clearing cache, the scale is correct in my testing. How did you see that value above? Does clearing your cache seem to help? Also, is that the old rope?

[amanda-phet]

Thanks, clearing the cache helped! I think we can close this.