Comments (14)
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!
from spreet.
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?
from spreet.
@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! :)
from spreet.
@flother np, thanks for releasing! Martin tile server has been upgraded to the new v0.10 now, works great, thx
from spreet.
@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
from spreet.
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
from spreet.
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
.
from spreet.
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
from spreet.
@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.
from spreet.
Really cool, thank you! I will give it a try as soon as possible.
from spreet.
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 :)
from spreet.
@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?
from spreet.
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
from spreet.
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.
from spreet.
Related Issues (14)
- Add `--unique` command-line argument
- Add a CLI argument to allow sprite index file to be minified
- Crates.io release HOT 1
- Use dtolnay/rust-toolchain to run a Rust toolchain on GitHub Actions
- Include sub directories HOT 1
- Support for optional properties (content, stretchX & stretchY) HOT 6
- Support for png/jpg source images HOT 5
- Convert all `.unwrap()` and similar panics to proper errors HOT 3
- Unable to parallelize pixmap loading HOT 4
- Please rename primary branch to `main` HOT 2
- Padding support HOT 4
- The SDF icons seem to lack antialiasing HOT 1
- File Input or SymLinks HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from spreet.