Vector Tile styles require icons are served in a sprite sheet. This contains all of the icons in one file. Years ago there were a few options for these, none of them great. These days, there are three common options: spreet, @basemaps/sprites, and sprite-one. The first is written in Rust while the other two are written in Javascript.
All have the same basic functionality of turning a folder of SVGs into a json+png spritesheet, and doing so at multiple resolutions. Spreet has the additional option of de-duplicating icons. If two icons are identical it will only put one copy in the PNG and reference the same image twice.
I benchmarked all three options with two sets of sprites: all the SVGs from OpenStreetMap Carto, and the OpenStreetMap Americana icons. The former is 973 icons and the latter is 248 icons. These are larger than a typical set of icons but are a good test.
Test | spreet | sprite-one | @basemaps/sprites | |
---|---|---|---|---|
osm-carto SVGs | @1x pixels | 4194304 | 4078074 | 8339456 |
osm-carto SVGs | @1x bytes | 513159 | 763531 | 837792 |
osm-carto SVGs | @1x bytes after oxipng | 474750 | 649894 | 706845 |
osm-carto SVGs | @2x bytes | 1442588 | 2176457 | 2411489 |
osm-carto SVGs | @2x bytes after oxipng | 1325707 | 1896784 | 2088729 |
osm-americana | @1x pixels | 128265 | 122400 | 151760 |
osm-americana | @1x bytes | 75749 | 91870 | 92066 |
osm-americana | @1x bytes after oxipng | 75497 | 84986 | 85828 |
osm-americana | @2x bytes | 136177 | 213876 | 210650 |
osm-americana | @2x bytes after oxipng | 132462 | 197687 | 194950 |
… 查看全文