• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
1

Shadow bug for svg image

Community Beginner ,
Jun 12, 2024 Jun 12, 2024

Copy link to clipboard

Copied

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-inste...
https://www.reddit.com/r/AdobeIllustrator/comments/z49yuc/problem_exporting_drop_shadows_in_svg_form...

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?

TOPICS
Bug , Draw and design

Views

210

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe
Community Expert ,
Jun 13, 2024 Jun 13, 2024

Copy link to clipboard

Copied

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).

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jul 01, 2024 Jul 01, 2024

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 01, 2024 Jul 01, 2024

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jul 01, 2024 Jul 01, 2024

Copy link to clipboard

Copied

Yes, it is visible in the browser and the svg is valid. The reason I don't understand the problem is that with svgs created earlier (around January), the shadow is also visible within the application. However, the mentioned problem has existed since January, even though we have not changed anything in the way svgs are read within our application.

I don't think that the problem is within our application either, because the shadows are not visible when opened in other image editors that can be downloaded from the Microsoft Store.

Can't you see any information from the example svg that would reveal what could be the reason for this?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 01, 2024 Jul 01, 2024

Copy link to clipboard

Copied

Digging through the web I have the impression that this happens quite a lot (unrelated to which app generated the SVG). It always depends on what the displaying application supports. I would put the question to Stack Exchange or Reddit into the subforums that deal with your presentation platform(s).

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jul 01, 2024 Jul 01, 2024

Copy link to clipboard

Copied

I don't know how helpful this information is, but when converting svg to pdf, the entire background of the image is not visible. On the other hand, everything looks correct in the pictures taken earlier.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Jul 01, 2024 Jul 01, 2024

Copy link to clipboard

Copied

LATEST

Hello @tambi990205,

Thanks for reaching out. Would you mind trying to install an older version of Illustrator (https://adobe.ly/3VF0n4M) and exporting SVGs from it to see if it makes a difference? Looking forward to hearing from you.

 

Thanks,

Anubhav

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines