Shadow on ADD SVGs is built-in.

SirClickalot, it would be nice if you would provide steps to reproduce this problem. Please report what browser are you using, its version, what OS and its version as well. At the moment I see no issue with SVG on Safari Version 17.4.1 (19618.1.15.11.14), Chrome Version 124.0.6367.60 (Official Build) (arm64) and Firefox 125.0.1 (64-bit) on MacOS 14.4.1 (23E224)

The screenshot from each browser are attached.

Sure, here we go...

The appearance of the Front End Editing (FEE) toggle across my three platforms.

Windows 11, Chrome Version 123.0.6312.124 (Official Build) (64-bit) with EDITED SVG

In this screen shot I temporarily removed the filtering from form within the SVG file.
NO rough edges here confirming that it's all about the SVG content.

Windows 11, Chrome Version 123.0.6312.124 (Official Build)

Rough (jagged) edges as per original issue.

Windows 11, Firefox Developer, 126.0b3

Rough (jagged) edges as per original issue.

UBUNTU 22.10, Chrome Version 123.0.6312.124 (Official Build)

Rough (jagged) edges as on Windows.

macOS Ventura 13.5

Nice smooth edges - but macOS appears to dealing with them uniquely.

Conclusions

I hope that's fairly conclusive evidence that the only way the filtering inside the SVG itself gives acceptable screen appearance in in macOS.

HOWEVER, quite apart from all of the above, I really don't it is the right the to 'hard code' the drop shadow into the SVG itself because it makes it much more difficult for the site-build / theme developer to adapt the widget into a theme where they have opted for a no-drop-shadow LAF.

All other buttons shipped as part of the FEE use box-shadow: rgba(0,0,0,0.16) 0px 1px 4px; in #CSS to achieve the drop shadow which I think is the better (more easily overridable) approach.

I hope that is all useful stuff!

Good points SirClickalot - I agree with your conclusion.

Unfortunately, it is not so easy to add the shadow to a circle inside SVG. I have added in MR, but the shadow has a gap to circle like 3-4 px.

I don't think we want/need to add the shadow to the SVG do we?
In fact that is precisely my point...

I really don't it is the right the to 'hard code' the drop shadow into the SVG.

Surely this can be done by shaping the HTML element with rounders corners (border-radius) and then adding a box-shadow.

That way we get the best of both worlds: a default for module but the ability to override in our theme.

This is still a problem on Windows machines.

I don't understand why the shadow can't be provided via CSS.

Here's how it's done in the core Cpontextual Links...

.contextual .trigger {
  width: 32px !important;
  height: 32px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .15);
  border-radius: 50%;
  box-sizing: border-box;
}

could this possibly be addressed since it really it rather ugly in Windows and we mustn't forget Windows users - there a lot of them out there.

I can replicate this, working on it

bbruno → changed the visibility of the branch 3441696-remove-svg-shadow to hidden.

bbruno → changed the visibility of the branch 3441696-remove-svg-shadow to active.

bbruno → changed the visibility of the branch 3441696-remove-svg-shadow to hidden.

bbruno → closed merge request !113

This has been fixed, the SVG did indeed contain a built in shadow, it was also not correctly sized and included an empty space around the image itself which made it not possible to add a shadow from the CSS side - this was also fixed. The shadow is now applied using CSS and can be overwritten with CSS up to the user's liking

Up for review

Hi bruno,

Applying the patch from MR:114 (https://git.drupalcode.org/project/frontend_editing/-/merge_requests/114) does the job nicely.

It now looks much better to me on my Windows 11 machine.

Thank you!

a.dmitriiev → closed merge request !68

Automatically closed - issue fixed for 2 weeks with no activity.