thanks for the suggestion, just gave it a go and it looks super useful. Especially being able to convert to/from relative/absolute commands.
I have another project which involves some very large and complex SVG path rendering in browser and I'm sure this will be useful for helping with debugging.
Have you ever considered creating your icons at 2x size (80x80 px in this case)? Then you can avoid almost all decimals, saving 2 bytes on most numbers.
In brief they stripped everything out of a tiny jpeg thumbnail including the quantization table allowing them to include the tiny thumbnail in the inital GraphQL response. This allowed them to display a blurred version of the image while the main image loaded.
Thanks both @Peter and @Danny Engelman for the suggestions.
I ran the icon paths through SvgPathEditor which both optimised them a little, but also helped me spot a couple of errors I'd missed. Decreased the size by ~5% which is nothing at this scale, but could be meaningful for a large SaaS app with hundreds of icons.
I did try Peter's suggestion of doubling the viewBox, but it actually increased some icon sizes. I suspect that as many decimals were saved it increased some integers. Plus I had to specify line-width somewhere either css or directly on the svg rather relying upon the default which is 1px.
Like Peter says, mutiply paths and increase the viewBox to get rid of decimals:
https://svg-viewbox.github.io/
Hey Danny,
thanks for the suggestion, just gave it a go and it looks super useful. Especially being able to convert to/from relative/absolute commands.
I have another project which involves some very large and complex SVG path rendering in browser and I'm sure this will be useful for helping with debugging.
Have you ever considered creating your icons at 2x size (80x80 px in this case)? Then you can avoid almost all decimals, saving 2 bytes on most numbers.
Thanks Peter, thats a great idea, I'll give it a try! Love finding new incremental improvements.
My original inspiration for this method of stripping out just the `d` value was this 2015 blog post by facebook: https://engineering.fb.com/2015/08/06/android/the-technology-behind-preview-photos/
In brief they stripped everything out of a tiny jpeg thumbnail including the quantization table allowing them to include the tiny thumbnail in the inital GraphQL response. This allowed them to display a blurred version of the image while the main image loaded.
Thanks both @Peter and @Danny Engelman for the suggestions.
I ran the icon paths through SvgPathEditor which both optimised them a little, but also helped me spot a couple of errors I'd missed. Decreased the size by ~5% which is nothing at this scale, but could be meaningful for a large SaaS app with hundreds of icons.
https://github.com/alexduncan/super-crispy-svg-icons/commit/7168d8e1701eb4708685ca3daf6e06938d001726
I did try Peter's suggestion of doubling the viewBox, but it actually increased some icon sizes. I suspect that as many decimals were saved it increased some integers. Plus I had to specify line-width somewhere either css or directly on the svg rather relying upon the default which is 1px.
Did you mean to have Epilogue in the end, not Prologue?
You're absolutely right – fixed.
I've simultaneously been writing the Prologue for a book 🫠