-
Notifications
You must be signed in to change notification settings - Fork 5.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Docs Site] chore: optimize SVGs #17350
Conversation
Interesting work. All the reference architecture SVGs are exported from Figma, not Illustrator. Some of our docs have 15+ SVGs in them. Is there a process we can add into our release of new documents to optimize our images? |
I'm not sure if Figma has a more web-optimised export honestly - that's something worth looking into. But once this lands, ideally eventually in PRs the optimisation will run automatically and transparently to contributors (out of scope for this PR, and probably something more suited in addition to #17011), but in the meantime, if folks will just run Or, someone can do a fly-by pass optimisation PR every so often to crunch any SVGs that didn't get optimised. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thank you for your contribution! This'll save our end-users a lot of network bytes!
Congratulations @Cherry, the maintainer of this repository has issued you a holobyte! Here it is: https://holopin.io/holobyte/cm1ys4rka26960clbpenssst8 This badge can only be claimed by you, so make sure that your GitHub account is linked to your Holopin account. You can manage those preferences here: https://holopin.io/account. |
This PR optimizes all of the SVGs in the repo currently, saving a total of ~33.12MB across all of the docs!
Before: ~68.44 MB of total SVGs
After: ~35.33 MB of total SVGs
Astro's image service doesn't process SVGs today, so it just passes them through entirely unoptimized. Many of the SVGs in this repo are exported from Illustrator and the likes which massively inflates their sizes, sometimes into the megabytes. Some pages with multiple SVGs can end up loading over a MB of SVG content which not only takes longer at a network level, but also longer for the browser to parse and then render.
I originally made this an Astro integration plugin, but it was taking a minute or two per SVG on some of the more large and complex ones, so adding tens of minutes to the build every time didn't make sense. I've instead moved it to a generic script in a new
scripts
folder. The long-term goal is to run these automatically and then push back to the repo any time a new SVG file is added, but for now, they can just be run manually every so often.It might make more sense to build these optimised versions to another folder, and then somehow tweak Astro/rehype's file loading to pull from there first if exists, before the raw sources, I'm not sure.