search

mapbox / spritezero

small opinionated sprites
Other
173 stars 62 forks source link

Option to generate SDF sprites #66

Closed nickpeihl closed 3 months ago

nickpeihl commented 5 years ago

Fixes https://github.com/mapbox/spritezero/issues/57

Hey friends! The mapbox-gl-js Map.addImage method supports loading icons with SDF (signed distance fields). The icon-color and icon-halo-color properties of the Mapbox Style Specification are only supported on SDF icons.

This PR adds an options.sdf parameter to the spritezero functions. SDF icons are generated from SVGs using the pathToSDF function in the mapbox/fontnik library. Note I have an open PR in the fontnik repo that should be merged before this PR to add better SVG support. If that PR is merged, the fontnik dependency in this PR can be changed.

I have developed a proof of concept showing randomly colored SDF Maki icons. The spritesheets are created using the code in this PR (see this repo).

If this PR gets merged, I'll be happy to open another PR on spritezero-cli to add a --sdf command line option.

Screenshot_2019-08-13 Display a map

jingsam commented 5 years ago

@nickpeihl Great work! I like this feature. This will be a great enhancement to mapbox-gl to enable truly scalable and colorable icon support. Current a workaround is to use iconfonts to get this feature but not intuitive and tricky.

@mourner @peterqliu Can you look at this with priority as it is a great enhancement.

nickpeihl commented 4 years ago

I have the following file - which is a svg file generated from inkscape: cattle_grid.svg.txt It seems that the path letters are lowercase which causes this code to generate an empty sdf. I'm guessing that a toUpper() here should solve this. Any chance you can fix this and create a new npm package? I'm also not sure about the view box as my file has a viewbox that is different from the width and height which might cause problems, not sure though, but it seems that this code ignores it. I have more svg icons in case you would like to test them out. Let me know. Thanks for this great addition to spritezero!

@HarelM The lowercase letters represent a delta from the current location as opposed to absolute coordinates represented by uppercase letters. A simple way to avoid this may be to tell Inkscape to save the svg with absolute paths. I think this is in the Inkscape preferences. But feel free to open an issue (or better yet, a PR) on https://github.com/elastic/spritezero.

nerik commented 3 years ago

Using @nickpeihl 's fork with great results, thank you so much 🙂 Would be great to see this merged.

HarelM commented 3 years ago

@nickpeihl Does this PR contains the fix I did that you merged to your fork? I also used it and besides the bug I fixed it works great. Would be nice if someone from the @maintainers would merge this...

nickpeihl commented 3 months ago

I'm grooming my backlog and closing stale PRs.

HarelM commented 3 months ago

Does this mean mapbox's spritezero is officially unmaintained?