phetsims / arithmetic

"Arithmetic" is an educational simulation in HTML5, by PhET Interactive Simulations.
http://phet.colorado.edu/en/simulation/arithmetic
GNU General Public License v3.0
5 stars 5 forks source link

Optimize svg files with svgo #201

Closed marlitas closed 5 months ago

marlitas commented 5 months ago

I experimented with a few of the Arithmetic svg files to see how much file size we can reduce by optimizing svg files with tools like svgo.

It did successfully cut down the size of both the svg and corresponding ts files between 11-17% each, and I noticed no compromises to the quality of the svg when rendered in the sim.

Results:

This savings will accumulate especially with sims that have a high number of svg files. I believe we should look into scaling this so that all svg files are run through an optimizer of some kind when added to sims.

Over to @jonathanolson and @kathy-phet for continued discussion.

kathy-phet commented 5 months ago

Thanks seems great! Tagging @amanda-phet so she is aware.

jonathanolson commented 5 months ago

Implemented the addition to chipper's modulify, so this will be run on all SVG images. Disabled the "remove viewbox" option, since we'll need that (for assorted reasons, and it's commonly disabled in other default lists - bounds and scaling issues).

@marlitas can you double-check things?

pixelzoom commented 5 months ago

PSA: This introduced a new dependency, and cd chipper; npm update is required.

marlitas commented 5 months ago

The changes look good. I double checked CT and see no errors. I also ran modulify on my machine and nothing suspicious happened. I will go ahead and paste this issue into the dev-public slack channel if any devs run into issues to report. Otherwise I believe this is ready to close. Thanks!