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:
Inkscape and PNG showing shadows

The text of the logo is splitted in 3 main layers: The back text (G and A and top of B), the shadows (applied with a mask so they don’t go outside the text) and the front text (A horizontal bar and bottom of B).

However, when I export it in Optimized SVG, Inkscape still shows the text shadows (of the front text), but not the web browsers…… What to do?

Here’s what the SVG looks like on browsers:

SVG in web browsers not showing shadows

I have played with the Save As settings (checking and unckecking Group Similar Objects and Reduce Groups), nothing worked…

Please help!


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:

  1. Duplicate the object that creates a shadow
  2. Change its fill and stroke color to full black (#000000ff). This
    will be the shadow.
  3. Set its offsets (by adding or substracting values to X and Y position axis)
  4. Set its blur
  5. Set its opacity (To imitate the Shadow filter, should be around
    50% to 60%)
  6. 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:

  1. Duplicate the object that will cast the shadow
  2. Put the shadow object on top
  3. Select both, right-click > Set Clip
  4. 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!

Source : Link , Question Author : lolgab123 , Answer Author : Community

Leave a Comment