Skip to main content
T
tambi990205
Participant
June 13, 2024
Question

Shadow bug for svg image

  • June 13, 2024
  • 1 reply
  • 2244 views

The problem occured when I was making an icon with a size of 44x44 pixels, to which I added drop shadow (detailed information: 72% Opacity, 3px X Offset, 3px Y Offset, 3px Blur). With these settings, exporting my icons in SVG format was working for quite a long time. Then suddenly Illustrator started to save my drop shadow as an individual PNG file, and after some time it didn’t get exported at all, only the icon itself.

When exporting the SVG files I worked with the settings below (which used to work before):

    Styling: Presentation Attributes
    Font: SVG
    Images: Embed
    Object IDs: Layer Names
    Decimal: 2

Of course I checked out the problem online and I found that other people were dealing with this issue as well:

https://forum.figma.com/t/drop-shadow-not-exporting-with-svg/38727
https://stackoverflow.com/questions/61829925/why-does-adobe-illustrator-rasterize-drop-shadows-instead-of-using-fedropshadow
https://www.reddit.com/r/AdobeIllustrator/comments/z49yuc/problem_exporting_drop_shadows_in_svg_format/

Though there are suggestions for the SVG Filters/Effects option in 2 of the links, for me it didn’t work (a fully pixeled shadow got exported to which I couldn’t add coloring modifications).

 

Can you give me any suggestions to solve this problem?

    1 reply

    Ton Frederiks
    Community Expert
    Ton FrederiksCommunity Expert
    Community Expert
    June 13, 2024

    Which Illustrator version do you use? 28.5 is the latest.

    How and where do you save your svg, Export,Asset Export, Export for Screens?

    If I try your example settings it will use svg filters to create the dropshadow.

    Can you share an example Illustrator file (use pdf to be able to attach it on this forum).

    T
    tambi990205Author
    Participant
    July 1, 2024

    We updated to version 28.5, but our problem was not solved. The exact phenomenon is that the shadow is visible when opened in a browser, but not in my C# UWP application, and the shadow is visible on the previously created svgs, so we rule out that the error is from the coding part, because we are using the same implementation. (I tried it on other platforms and also in Microsoft's "123 Photos" application, and the shadow does not appear there either.) I am sending the exported file.

    Monika Gause
    Community Expert
    Monika GauseCommunity Expert
    Community Expert
    July 1, 2024

    Does it show in a browser?

    Is the SVG valid? If it is, then the issue is with your other apps not reading SVG correctly.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices