4

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!

  • How did you embed the SVG in the html? Adding the file/source code might be helpful... – AAGD Nov 19 '15 at 15:46
  • 1
    I don't have much by way of experience with this, but from my reading, drop shadows and other similar filters are not fully supported. Clipping masks seem to be and blur seems to be, so you might try eliminating the drop shadow and then drop a black version of the lower part of the B underneath with a blur attached to it. If you offset it downwards a little, you can probably achieve the same effect. – Yorik Nov 19 '15 at 15:50
  • I tried with <img> and <object> because I didn't want to have 50% of my html file filled with a single SVG file... Just tried with <svg> tag, still not working... – lolgab123 Nov 19 '15 at 15:52
  • Weird.... But yes, thinking of that, I should be able to have the same effect... Anyone knows the color of the shadow used by Inkscape? – lolgab123 Nov 19 '15 at 15:56
  • Omg, sorry, I totally forgotted! Thanks! ........ Oh well, seems I need to wait 16 hours before accepting it... – lolgab123 Nov 20 '15 at 22:40
5

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!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.