Svg not showing shadows in web browsers (Inkscape)
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:
I have played with the Save As settings (checking and unckecking Group Similar Objects and Reduce Groups), nothing worked...
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
Shadowfilter, 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 >
- 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!