: Svg not showing shadows in web browsers (Inkscape) I have newly created a logo that has shadows applied with masks, so they only affect the logo itself, and not the background. Here's a picture:

@Sims5801359

Thanks to Yorik, a solution has been found.

As he said, drop shadows may cause trouble when rendered on a web browser. So, you can easily replace them by other elements without affecting the rendering of your drawing.

Here's the solution to replace the shadows:


Duplicate the object that creates a shadow
Change its fill and stroke color to full black (#000000ff). This
will be the shadow.
Set its offsets (by adding or substracting values to X and Y position axis)
Set its blur
Set its opacity (To imitate the Shadow filter, should be around
50% to 60%)
Put it back one layer


Then, if you want to imitate the shadow mask (like the picture above), but with Clipping (which I found better), do this:


Duplicate the object that will cast the shadow
Put the shadow object on top
Select both, right-click > Set Clip
Put the object that creates the shadow back on top


There we go. The shadow will now only be cast by the objects you want. Plus it fixes a bug with the Drop Shadow filter when putted on a rectangle object.

Thanks again to Yorik for the solution!

Vote Up Vote Down