This doesn't answer your question, but asks another: are you using SVG elements embedded in your skin.js file?
They're stored by default (up to 10000 bytes) in skin.js, encoded as base64 text; which is then decoded into the SVG format, which is then interpreted before being displayed.
As well as needing more data for buffers and time to decode, I find my embedded hotspots show up before anything else does on the screen (using Lite, so no Transitions, not even the broken ones) floating in space while I wait for everything else to load.
Here's a small Up arrow:
D=n._up__img=document.createElement("img")).className="ggskin ggskin_svg",t="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0nMS4wJyBlbmNvZGluZz0ndXRmLTgnPz4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgJy0vL1czQy8vRFREIFNWRyAxLjEgQmFzaWMvL0VOJyAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEtYmFzaWMuZHRkJz4KPCEtLSBHYXJkZW4gR25vbWUgU29mdHdhcmUgLSBTa2luIEJ1dHRvbnMgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB5PSIwcHgiIHdpZHRoPSIzMnB4IiBoZWlnaHQ9IjMycHgiIGJhc2VQcm9maWxlPSJiYXNpYyIgaWQ9IkxheWVyXzEiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDMyIDMyIiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4Ij4KIDxnIG9wYWNpdHk9IjAuNCI+CiAgPHBhdGggc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Ik0xNi45MTksMTAuOTIzYy0wLjIyNy0wLjI1MS0wLjU1MS0wLjM5Ni0wLjg4OS0wLjM5NmMtMC4zMzcsMC0wLjY2MywwLjE0NS0wLjg4OSwwLjM5NmwtNS44MjcsNi40NjgmI3hkOyYjeGE7JiN4OTsmI3g5OyYjeDk7Yy0wLjQ0MiwwLjQ5MS0wLjQwMywxLjI0OCwwLjA4OCwxLjY4OWMwLjQ5MSwwLjQ0MiwxLjI0NywwLjQwMywxLjY4OS0wLjA4OGw0LjkzOC01LjQ4MWw0LjkzOCw1LjQ4MSYjeGQ7JiN4YTsmI3g5OyYjeDk7JiN4OTtjMC4yMzYsMC4yNjMsMC41NjMsMC4zOTYsMC44OSwwLjM5NmMwLjI4NSwwLDAuNTcxLTAuMTAyLDAuOC0wLjMwOGMwLjQ5MS0wLjQ0MSwwLjUzLTEuMTk4LDAuMDg4LTEuNjg5TDE2LjkxOSwxMC45MjN6IE0xNiwzLjUmI3hkOyYjeGE7JiN4OTsmI3g5OyYjeDk7QzkuMDk2LDMuNSwzLjUsOS4wOTYsMy41LDE2YzAsNi45MDMsNS41OTYsMTIuNDk5LDEyLjUsMTIuNWM2LjkwMy0wLjAwMSwxMi40OTktNS41OTcsMTIuNS0xMi41QzI4LjQ5OSw5LjA5NiwyMi45MDMsMy41LDE2LDMuNXomI3hkOyYjeGE7JiN4OTsmI3g5OyYjeDk7IE0yMy4xNDcsMjMuMTQ2Yy0xLjgzMywxLjgzMS00LjM1MywyLjk2LTcuMTQ3LDIuOTZzLTUuMzE0LTEuMTI5LTcuMTQ2LTIuOTZDNy4wMjIsMjEuMzE0LDUuODk0LDE4Ljc5NSw1Ljg5MywxNiYjeGQ7JiN4YTsmI3g5OyYjeDk7JiN4OTtjMC4wMDEtMi43OTUsMS4xMjktNS4zMTQsMi45NjEtNy4xNDdjMS44MzMtMS44MzEsNC4zNTItMi45Niw3LjE0Ni0yLjk2MWMyLjc5NSwwLjAwMSw1LjMxMywxLjEzLDcuMTQ3LDIuOTYxJiN4ZDsmI3hhOyYjeDk7JiN4OTsmI3g5O2MxLjgzMSwxLjgzMywyLjk1OSw0LjM1MiwyLjk2LDcuMTQ3QzI2LjEwNiwxOC43OTUsMjQuOTc5LDIxLjMxNCwyMy4xNDcsMjMuMTQ2eiIgc3Ryb2tlPSIjM0MzQzNDIi8+CiA8L2c+CiA8Zz4KICA8cGF0aCBzdHJva2Utd2lkdGg9IjAuMiIgZD0iTTE2LjkxOSwxMC45MjNjLTAuMjI3LTAuMjUxLTAuNTUxLTAuMzk2LTAuODg5LTAuMzk2Yy0wLjMzNywwLTAuNjYzLDAuMTQ1LTAuODg5LDAuMzk2bC01LjgyNyw2LjQ2OCYjeGQ7JiN4YTsmI3g5OyYjeDk7JiN4OTtjLTAuNDQyLDAuNDkxLTAuNDAzLDEuMjQ4LDAuMDg4LDEuNjg5YzAuNDkxLDAuNDQyLDEuMjQ3LDAuNDAzLDEuNjg5LTAuMDg4bDQuOTM4LTUuNDgxbDQuOTM4LDUuNDgxJiN4ZDsmI3hhOyYjeDk7JiN4OTsmI3g5O2MwLjIzNiwwLjI2MywwLjU2MywwLjM5NiwwLjg5LDAuMzk2YzAuMjg1LDAsMC41NzEtMC4xMDIsMC44LTAuMzA4YzAuNDkxLTAuNDQxLDAuNTMtMS4xOTgsMC4wODgtMS42ODlMMTYuOTE5LDEwLjkyM3ogTTE2LDMuNSYjeGQ7JiN4YTsmI3g5OyYjeDk7JiN4OTtDOS4wOTYsMy41LDMuNSw5LjA5NiwzLjUsMTZjMCw2LjkwMyw1LjU5NiwxMi40OTksMTIuNSwxMi41YzYuOTAzLTAuMDAxLDEyLjQ5OS01LjU5NywxMi41LTEyLjVDMjguNDk5LDkuMDk2LDIyLjkwMywzLjUsMTYsMy41eiYjeGQ7JiN4YTsmI3g5OyYjeDk7JiN4OTsgTTIzLjE0NywyMy4xNDZjLTEuODMzLDEuODMxLTQuMzUzLDIuOTYtNy4xNDcsMi45NnMtNS4zMTQtMS4xMjktNy4xNDYtMi45NkM3LjAyMiwyMS4zMTQsNS44OTQsMTguNzk1LDUuODkzLDE2JiN4ZDsmI3hhOyYjeDk7JiN4OTsmI3g5O2MwLjAwMS0yLjc5NSwxLjEyOS01LjMxNCwyLjk2MS03LjE0N2MxLjgzMy0xLjgzMSw0LjM1Mi0yLjk2LDcuMTQ2LTIuOTYxYzIuNzk1LDAuMDAxLDUuMzEzLDEuMTMsNy4xNDcsMi45NjEmI3hkOyYjeGE7JiN4OTsmI3g5OyYjeDk7YzEuODMxLDEuODMzLDIuOTU5LDQuMzUyLDIuOTYsNy4xNDdDMjYuMTA2LDE4Ljc5NSwyNC45NzksMjEuMzE0LDIzLjE0NywyMy4xNDZ6IiBmaWxsPSIjRkZGRkZGIiBzdHJva2U9IiMwMDAwMDAiLz4KIDwvZz4KPC9zdmc+Cg==",n._up__img.setAttribute("src",t),D.setAttribute("style","position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;-webkit-user-drag:none;pointer-events:none;;")
Do you think that's going to be small and quick to load/interpret and display?
Do this to have your SVG buttons exported as PNGs, where they'll be less than half the filesize and loaded and displayed like everything else. If you have them at a large enough size for your standard display, 1920x1080? then they'll look identical. They'd also digitally upscale perfectly well to 4k etc. for futureproofing, as well as down-scaling for mobiles etc. You probably have most of your other graphics/images as PNGs anyway, so there is no measurable advantage in having a few buttons be
drawn as scalable, when they contain fiddly, intricate details that take more data to
describe how to draw, than a simple PNG needs to store the final image.
.
- buttons.jpg (36.28 KiB) Viewed 466 times
.
The only advantage of having everything (larger than 10000 bytes) stored as embedded data in skin.js is the ability to swap skins about between projects, but how often do you do that? Create the Output files, then upload those that are generated in the Images folder. Not much more effort than uploading the single skin.js file, but that file itself will be small, slim and fast.
Got identical up/down/left right arrows? Why store 4 SVG text versions? Take one of the PNGs you just exported and replace the SVG versions with one arrow, rotated to the 4 directions and then reexport that as a single PNG. On mobile platforms especially: every little helps with slimming down data usage and RAM requirements.
You can also just upload different button PNG images - if they're all the same size - to change the style of a panorama, instead of a whole new skin.js.
If you want to see what the SVG files look like individually, and also(?!) have them generated, then don't select the 'Convert SVG to PNG' option. It
will still generate the PNG files (because, of course it does....
) but also SVG versions of them, at twice the filesize. These are what ( I think) is being encoded as the text example above.
"