Bug 205941

Summary:	Blurry SVG image when shadows enabled
Product:	WebKit	Reporter:	Lucas Johnston <lucas>
Component:	SVG	Assignee:	Nobody <webkit-unassigned>
Status:	RESOLVED DUPLICATE
Severity:	Normal	CC:	bfulgham, dino, sabouhallawa, simon.fraser, webkit-bug-importer, zimmermann
Priority:	P2	Keywords:	InRadar
Version:	Safari 13
Hardware:	Mac
OS:	macOS 10.15

Description Lucas Johnston 2020-01-08 11:25:20 PST

I've exported two identical SVGs from my design tool, Figma, except one has shadows enabled and one does not.
The image with shadows looks compressed and is nowhere near as clean as the standard option - this means I don't have a clear way to add shadows to my svgs (as it's a rounded shape and the css properties apply to the whole square of allocated space, leaving white borders).

SVG with shadows: https://github.com/lucasjohnston/temp-svgs/blob/master/shadow.svg
SVG without shadows: https://github.com/lucasjohnston/temp-svgs/blob/master/no_shadow.svg
Screenshot of comparison within Safari: https://github.com/lucasjohnston/temp-svgs/blob/master/Screenshot%202020-01-08%20at%2019.20.06.png
Screenshot of comparison within VS Code's previewer (for comparison): https://github.com/lucasjohnston/temp-svgs/blob/master/Screenshot%202020-01-08%20at%2019.23.34.png

Comment 1 Simon Fraser (smfr) 2020-01-09 10:35:04 PST

I guess shadows are triggering a code path that fails to take the 2x Retina scale factor into account.

Comment 2 Brent Fulgham 2022-07-01 09:24:30 PDT

This seems to still be an issue.

Comment 3 Radar WebKit Bug Importer 2022-07-01 09:24:44 PDT

<rdar://problem/96296736>

Comment 4 Simon Fraser (smfr) 2023-08-21 10:35:22 PDT


*** This bug has been marked as a duplicate of bug 193492 ***