Icons with a blurry look

msp-platforme commented 3 years ago

Description

Some icons we use across projects have a blurry look - it's due to anti-aliasing, when resizing the icon becomes blurry. There is no one-size-fits-all solution in code, since different icons require different sizes to stop being blurry.

Expected vs. Observed

-	-
Expected	The icons look crisp.
Observed	The icons look blurred.

Screens

Two examples: icon icon 2

ripe-tobias-bot[bot] commented 3 years ago

Woof, Woof!

Thank you for submitting the "Icons with a blurry look" issue 😎.

Please do not forget to review our internal guidelines:

Describe the problem in the best possible way
Include at least the Description section, but considered adding other sections
Avoid suggesting immediate solutions, think deeply about the problem
Engage in the Triage process being as responsive as possible
Understand and accept the possibly large amount of execution time

Engaging in the development process in the best possible way helps it being efficient and fast.

Your friend, Tobias (Platforme's mascot)

gcandal commented 3 years ago

@BeeMargarida please share the details of the investigation you did while trying to fix this.

BeeMargarida commented 3 years ago

Based on these links (here and here), the problem is due to the way the browser (and possibly system) deals with anti-aliasing.

When scaling down the SVGs, there are some sizes that cause the icon to become blurry. With the add icon specifically, we noticed that the size 17 fixes the blurry aspect, but size 18 becomes blurry. Since we are getting our icons from Ikonate, we experimented scaling down in their website. They only support export of sizes multiple of 8 (which does not match the sizes we use in the buttons), and when forcing the icons in Ikonate to match some of ours, the problem appeared as well (this using the same stroke-width of 1.5 and color). We export their icons in 48x48.

Icon 48x48 with size 18 in ikonate

Icon 48x48 with size 17 in ikonate

Icon 16x16 with size 18 in ikonate

Icon 16x16 with size 17 in ikonate

With this we can kind of assume that the original size has not much to do with the blurriness of the resizing. I also don't know if the icons themselves have some problem.

joamag commented 3 years ago

Closing this as I believe we'll have to live with this limitation :(

ripe-tech / ripe-components-vue