svg icons with circles (wrapped or solid) seem blurry on retina displays

[barlock]

This is strange because svgs are supposed to fix this problem.

I think its because the circles around the icons are made with a element instead of a which they should be so the browser can figure out the most optimal way to layout the pixels rather than specifying them exactly

https://github.com/IBM-Design/icons/blob/master/svg/action-based/add-new_32.svg?short_path=5b81d52#L8 Add new icons "circle"

^ example. Visible pixels on my thunderbolt display

[barlock]

I think these icons also suffer from sub-pixel problems. github released a great article on the development of the Octicons that discusses this.

[thundernixon]

SVGs can solve this problem to a large degree, but when it comes down to it, curves and diagonal lines are still subject to the limitations of pixel rendering – whereas straight lines can exactly use whole pixels, curves require zig zags and subpixel rendering. So, even GitHub's Octicons have straight edges which are crisper than the curved lines (check out the notifications bell at the top of the GitHub UI).

[barlock]

Totally, but I think we can be doing better. If an svg icon is made well it should look crisp when resized, all of the circles in the icon library don't. I'm not sure what the right solution to the problem is. It's possible that that page is using an icon designed to be much smaller and blown up to be bigger but I doubt it. I'll check and see if that is the case.

[seejamescode]

Let me know what your view is on this issue is now please!