How to make shadows work for custom images (SVG)?

[lucasfronza]

Hey 👋

In one of our custom mapbox assets (uploaded on mapbox studio as an SVG), we have this shadow effect:

But, when this gets rendered by the app, the shadow isn't there:

The same has happened for some other assets we are trying to use and that would, ideally, have this shadow effect.
Any tips on how to make it work? Or mapbox doesn't accept shadows at all? Was anyone able to do something similar?
Another way would be to add the shadow directly in the app using the mapbox layer styles, but nothing I've tried so far worked.

Any tips on that would be really appreciated. Thanks!

[mattijsf]

Please have a look at: https://docs.mapbox.com/help/troubleshooting/studio-svg-upload-errors/#unsupported-svg-elements-and-attributes and https://github.com/mapnik/mapnik/wiki/SVG-support.

Basically Mapbox Studio only supports SVGs with limited attributes. You most likely added a shadow using the filter element, which is not supported.

The only way to render shadows is to add a SymbolLayer at runtime that references an asset (PNG) that includes shadow.

[lucasfronza]

Hey @mattijsf!

Yeah, we've seen those after a failed attempt using filter, and one using image element. Both are not supported. 😞 I'm not sure if there's another method of making the shadow baked in the SVG using the supported properties.

The only way to render shadows is to add a SymbolLayer at runtime that references an asset (PNG) that includes shadow.

If I understood correctly, this PNG with the shadow effect would be an asset read from the app then? As it is not possible to upload PNGs as custom images on Mapbox Studio, right?

Thanks!

[mattijsf]

The only way using svg I can come up with is a shade using a shape with a semi transparent background color that acts as a shadow. Possibly with multiple shape layers to mimic the blur effect somewhat. I never tried it though, might look ugly very fast. And yes, as Mapbox Studio only supports svg you can only add pngs at runtime from the app. It doesn't necessarily have to be a embedded png, you can also load one using a url. But from Mapbox Studio it is a no go.

[lucasfronza]

I see! We'll try those then.
That was very very helpful! Thank you!