Kibana: [Maps][Maki] add build scripts to build sprite sheet with SDF

[nreese]

https://github.com/elastic/maki needs some build scripts to convert SVGs into sprite sheet with SDF enabled

cc @nyurik

[elasticmachine]

Pinging @elastic/kibana-gis

[nyurik]

The relevant article is (in Russian) - https://habr.com/ru/post/215905/ describes a process of converting a PNG into an SDF PNG using ImageMagick:

convert in.png -filter Jinc -resize 400% -threshold 30% \( +clone -negate -morphology Distance Euclidean -level 50%,-50% \) -morphology Distance Euclidean -compose Plus -composite -level 45%,55% -resize 25% out.png

[nickpeihl]

I can take a look at this.

Also, an older version of Maki included a script to generate SDF icons.

[nyurik]

I am not sure that script generates sdfs. It seems it just converts SVGs -> PNGs... Also, I suspect convert (imagemagic) could take svgs directly, but i'm no expert.

[nickpeihl]

Apologies @nyurik. I meant to link this file. https://github.com/mapbox/maki/blob/v0.5.0/sdf-render.js

[nickpeihl]

imagemagick

The example in the link Yuri posted above did not work well for the Maki icons. I assume this is because the Maki icons are much more intricate and have holes rather than a complete fill as seen in the jaguar example.

This is the script I wrote based on the Russian article.

convert -resize 1024x icons/bicycle-15.svg -threshold 50% -alpha off \
    \( +clone -negate -morphology Distance Euclidean -level 50%,-50% \) \
    -morphology Distance Euclidean -compose Plus -composite -level 50%,50% \
    -filter Jinc -transparent white -resize 15x \
    png/bicycle.png

Here's the result PNG for the bicycle icon.

And here is what it looks like in Mapbox-gl

fontnik

I had much better luck with directly rendering SDF images from SVGs in the browser using a fork of Mapbox's fontnik library (I had to fix a bug, hence the fork). Here is a demo that shows this in action.

Here is a screenshot from the demo.

spritezero

I also have been working on a POC for rendering an SDF sprite sheet using Spritezero. Currently spritezero only creates regular PNGs from SVG icons. My changes to Spritezero uses the Fontnik example above, but it creates a sprite sheet of SDF PNG images and a JSON file. These could be used in the sprite parameter of the Mapbox Style Spec.

[nickpeihl]

Fixed by https://github.com/elastic/maki/pull/3 and #42499