SVGO https://github.com/svg/svgo is used by many graphics software but hasn't seen donations commensurate with usage https://opencollective.com/svgo
Running the JS client side, like GitHub, means blocking the thread. You're either going to be 1. delaying other JS from running, or 2. rendering late, shifting the layout – which is what GitHub has chosen: https://imgur.com/a/y47haf9
(Sending the rendered div's is a non-starter. Large document sizes delay domContentLoaded, slow down browsers, aren't shared cacheable resources, etc.)
Your approach, then. On your page there are 178 SVGs. Total gzipped size is 490KB. SVGO[0] gets that down to 311KB – that's 1.74KB transferred per equation. These are non-blocking, immutable, cacheable assets. Brilliant.
Upgrades:
- Figure out viewbox and inline height/width values on the HTML so no layout jank (aka "Cumulative Layout Shift"/CLS) occurs. Unsure if this is possible for inline math.
- Add `loading="lazy"` afterwards. Users that don't scroll the entire length of the page won't suffer unneeded downloads, and the inlined sizes will prevent late CLS for those that do.
- Maybe re-add interactivity? Cheap option: just support copying alt-text in a context menu.
The awesome SVG Optimizer [1] has a filter (cleanupNumericValues) to process SVG files to a fixed precision.
The equally awesome SVG Optimizer Missing Gui (SVGOMG) [2] provides a web-based GUI [3] to interactively adjust precision and see the resulting render (and file-size).
[1] https://github.com/svg/svgo
svgo (SVG Optimization)
colorist / avifenc (AVIF)
cwebp (webp)
convert (ImageMagick, everything else)
https://github.com/joedrago/colorist
If anyone likes the icons, doesn't like the float precision, and is in a Node environment, https://github.com/svg/svgo has a bunch of config options to help optimize SVGs. https://lean-svg.netlify.app/ is a site that lets you play with settings to see what kind of gains you can get.
SVGO is an incredible project driven by a single volunteer in spare time (originally Kir Belevich https://twitter.com/deepsweet , and for the last few years Lev Solntsev https://twitter.com/ruGreLI). It's the type of project you probably use regularly behind another tool like Sketch or SVGOMG (https://jakearchibald.github.io/svgomg/). They accept donations (https://www.paypal.me/deepsweet) and you should definitely consider contributing if you find it useful.
Available in JavaScript (works both in the browser and with Node.js), "desktop" Java and "Android" Java:
https://github.com/jankovicsandras/imagetracerjs
https://github.com/jankovicsandras/imagetracerjava
https://github.com/jankovicsandras/imagetracerandroid
You can use svgo to optimize the SVG afterwards: https://github.com/svg/svgo
Optimization tools do exist [1] to simplify the tree but they can do only so much good[0]. I think this format, built with optimality might be a solution.
[0]: Anecdotal. I once had to edit ~20 icons. The client had provided SVGs because they'd somehow lost the original AI files. When I imported them in Sketch 3, the nesting, masks, and transforms applied were absolutely horrifying! I had to optimize the icons using [1], which did remove the masks and transforms, but in the end I had to manually edit SVG's XML source to fix nestings. sigh.
npm install -g svgo
svgo -f /path/to/svg/filesI prefer to find the SVG elements I need and base64 encode them directly into my CSS. That way you only include the assets you are using, minimize total KB and network requests. There are two tools I use to help with this:
1. https://github.com/svg/svgo (node)
2. https://gist.github.com/mrinterweb/11303706 (ruby - I wrote this one)