search

phetsims / scenery

Scenery is an HTML5 scene graph.
MIT License
54 stars 12 forks source link

Should scenery be able to display *.svg files instead of only raster files? #1578

Open samreid opened 1 year ago

samreid commented 1 year ago

How difficult would it be to add support for scenery to load .svg files with colors in the same way it loads .png files? We have numerous image files in https://github.com/phetsims/center-and-variability/issues/498 and .svg files are a fraction of the size of the .png files, without losing any resolution.

The only way we use svg data in scenery at the moment is via custom Paths, but that doesn't support colors: https://github.com/phetsims/ratio-and-proportion/blob/2e004e3fff80a71d4b42dba7adcd2ffed74c56f8/js/common/view/RatioHandNode.ts#L227-L274

jonathanolson commented 1 year ago

That's an interesting question. (a) it's probably possible to convert most SVG files to a scenery Node structure, wouldn't take too long to write a parser, (b) I've done some testing related to this, and it wasn't clear-cut. Some browsers have permissions issues with data URIs that contain SVG. https://github.com/phetsims/scenery/blob/74d804306b1d4152fc8cc7e10fe02f8cdc01d0d7/tests/browsers/data-urls.html explores this concept. (c) We could figure out the best way, and create an SVGImage Node.

Theoretically, we could display them with SVG/Canvas with Data URIs (data:image/svg+xml;utf8,<svg...), however this likely runs into browser security issues, and doesn't hit our needs for WebGPU/WebGL/etc. as nicely as I'd like.

I'm thinking a parser/simplifier that could convert an SVG file to a Scenery node tree would be great (although implementing ALL of SVG is a lot... so maybe we could output simplified SVG from editors?)

samreid commented 1 year ago

I'm concerned that transforming a SVG file (into a scenery subtree) like the soccer player images for center-and-variability would create a lot of memory overhead and increase startup time.

pixelzoom commented 10 months ago

I posted in Slack#planning:

Re file size due to regional character sets… Perhaps PhET should investigate support for .svg files in scenery — a feature that has come up many times — so that we’re adding small .svg files instead of large .png files.

marlitas commented 10 months ago

@amanda-phet, @jonathanolson, and I did a proof of concept test with Arithmetic to make sure that the svg work we were all doing is actually resulting in smaller sim file sizes. Below are the results:

Published: 1.4 MB png Build: 3.7 MB svg Build: 3.0 MB --encodeStrings & --compressScripts & svgs Build: 1.3 MB

This info gave us enough evidence to determine that the svg work is worth continuing in other sims.