Add support for SDF sprites

[bchapuis]

Really cool project!

I'm currently looking for a solution to converts SVG files to SDF sprites. In MapLibre, this kind of sprites allow to change the color of the icons in the style.

Here is a PNG storing SDF icons:
https://tiles.baremaps.com/sprites/osm/[email protected]

The corresponding sprite definition file:
https://tiles.baremaps.com/sprites/osm/[email protected]

And a demonstration:
https://demo.baremaps.com/#14.59/46.52182/6.63022

Spritezero works well for small SVG icons, but I'm struggling to convert more complex SVG files to SDF sprites (e.g. forest pattern). Is SDF in your roadmap?

[flother]

Funnily enough I had a prototype of SDF sprites working about a year ago. But before I finished it I got the feeling that SDF sprites had been abandoned as an idea — see the conversation in mapbox/mapbox-gl-style-spec#444 for details (TLDR: Mapbox originally expected multi-colour SDFs to be a thing, but since they're stuck being single colour they're not very useful). That meant that I ended up ditching the prototype.

I can't find that old code anymore, unfortunately, but I think it was based on the sdf_glyph_renderer crate. If there was a lot of interest in adding support for SDFs (starting with you!) then it's something I'd consider, but it still feels to me like a bit of a niche thing.

Spritezero works well for small SVG icons, but I'm struggling to convert more complex SVG files to SDF sprites (e.g. forest pattern). Is SDF in your roadmap?

Is the problem that you want to use raster sources for your sprites, rather than SDFs specifically? In which case would #60 be useful instead?

[bchapuis]

Thank you for the link and for taking the time to reply. I wasn't aware of this discussion and it is really interesting.

We now have a demonstration that better showcase our use of SDF. In this demo, the dropdown menu allows to select a style. SDF allows us to use the same icons everywhere and to apply different color schemes, which is very convenient.

https://baremaps.apache.org/map/

The icons we use come directly from openstreetmap-carto and are available in the SVG format.

https://github.com/bchapuis/openstreetmap-icons/tree/main/icons

[flother]

That's a compelling use for SDF icons — although I can see how a single colour is an obstacle since it really limits what designs you can use for your icons.

I've been playing around with adding support for SDF icons and it's definitely feasible. The main issue I have at the moment is that SDF icons need to have a buffer around them for halos to work properly: if the original icon has a height and width of 24px then the SDF equivalent needs to be buffered and have a height/width of 27px. (I think the 3px buffer is arbitrary, to allow for a reasonable halo, but I might be missing something.) Having a different height/width for input and output icons isn't something Spreet supports yet, but shouldn't be too difficult to solve. Once the other open PRs are merged and the code is stable I'll take a look at finishing this off.

One other thing to mention. Because the sdf property is per icon in the index file, it's possible to have a spritesheet that's a mixture of SDF and non-SDF icons. I don't know if anyone actually does that though. My plan is to support only all-or-nothing SDF icons with an --sdf flag, but to leave the door open for specifying certain icons to be SDFs through something like ---sdf a --sdf b --sdf c.

[bchapuis]

Currently, I'm not mixing sdf and regular icons in the same file, but I guess this could be usefull. The openstreetmap-carto style has a lot of patterns requiring colors that may be embed in the same file.

https://github.com/gravitystorm/openstreetmap-carto/blob/master/symbols/wetland_bog.png

[nyurik]

@flother what's the status of this PR? Do you think it might make sense to do a release now and then another one once this PR lands? Thx for all the hard work to everyone! :)

[flother]

@nyurik As I haven't yet had the time for this PR, it does indeed make sense to get everything else out now. I've just released v0.10.0.

[nyurik]

@flother np, thanks for releasing! Martin tile server has been upgraded to the new v0.10 now, works great, thx

[flother]

@bchapuis I've just merged #77 which brings support for SDF icons to Spreet. I'll get a release out later this week so you can try it out

[bchapuis]

Really cool, thank you! I will give it a try as soon as possible.

[cldellow]

After going down a rabbithole of GitHub issues explaining SDF, whether it should be removed or not, etc, I rolled up my sleeves to figure it out and support it in my project...

...and then I realized that I was already using spreet, and maybe a newer version of it supported SDF, and maybe it would all just work and I could be blissfully ignorant of the details?

And it did, and I am.

Thank you so much!

[flother]

Thanks so much for the feedback, it's always nice to hear stories of people using Spreet. I should say though that I had the easy job. Valve came up with the method, Mapbox implemented it, and Stadia Maps wrote the Rust crate. They did the hard work, I just pulled it all together at the end :)

[bchapuis]

@flother I have just been able to try the latest release and it worked like a charm. Thanks a lot!

However, I noticed that the sdf sprites generated with spreet do not render as well as the sprites generated with spritezero (example below).

Could this be related to the constant 3 pixels buffer set by spreet? I guess that the buffer should be adapted depending on the ratio. For instance spreet --sdf --ratio 2 icons icons should probably set a 6 pixels buffer?

[flother]

Well that's annoying. I like your theory about the buffer radius though. Could you create a new issue and upload the original SVG sprite plus its 1x and 2x versions as created by Spritezero? Then I can take a look

[bchapuis]

I tried to change the buffer radius in a personal branch, but it does not seem to address the issue. I will open a new issue with a description for this case.