SVGs not rendering properly within Mac OS Big Sur and iOS 14
Closed this issue · 3 comments
Given two SVGs
<!-- add.svg -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 22.9091C5.97545 22.9091 1.09091 18.0251 1.09091 12C1.09091 5.97545 5.97545 1.09091 12 1.09091C18.0251 1.09091 22.9091 5.97545 22.9091 12C22.9091 18.0251 18.0251 22.9091 12 22.9091ZM12 0C5.37273 0 0 5.37273 0 12C0 18.6273 5.37273 24 12 24C18.6273 24 24 18.6273 24 12C24 5.37273 18.6273 0 12 0ZM18 11.4545H12.5455V6.00109C12.5455 5.69836 12.3016 5.45455 12 5.45455C11.6984 5.45455 11.4545 5.69836 11.4545 6.00109V11.4545H6C5.69836 11.4545 5.45455 11.6989 5.45455 12C5.45455 12.3016 5.69836 12.5465 6 12.5465H11.4545V18C11.4545 18.3016 11.6984 18.5455 12 18.5455C12.3016 18.5455 12.5455 18.3016 12.5455 18V12.5465H18C18.3016 12.5465 18.5455 12.3016 18.5455 12C18.5455 11.6989 18.3016 11.4545 18 11.4545Z" fill="#30353F"/>
</svg>
<!-- add-fill.svg -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 0C5.37273 0 0 5.37273 0 12C0 18.6273 5.37273 24 12 24C18.6273 24 24 18.6273 24 12C24 5.37273 18.6273 0 12 0ZM18 11.4545H12.5455V6.00109C12.5455 5.69836 12.3016 5.45455 12 5.45455C11.6984 5.45455 11.4545 5.69836 11.4545 6.00109V11.4545H6C5.69836 11.4545 5.45455 11.6989 5.45455 12C5.45455 12.3016 5.69836 12.5465 6 12.5465H11.4545V18C11.4545 18.3016 11.6984 18.5455 12 18.5455C12.3016 18.5455 12.5455 18.3016 12.5455 18V12.5465H18C18.3016 12.5465 18.5455 12.3016 18.5455 12C18.5455 11.6989 18.3016 11.4545 18 11.4545Z" fill="#30353F"/>
</svg>
When converted both are seen properly on Mac OS Catalina, however within the new release of Mac OS Big Sur the filled one (along with several other examples in my icon set) render as completely filled. Here's an example of it right from the online testing library.
Now, to be clear compiling the icon set on Mac OS Big Sur works fine when viewed in Catalina, it seems that however the font is being generated Big Sur is having issues with how to display it properly. It's basically as if you'd removed the fill-rule on the path. I've dug through previous issues and am not seeing anything similar even though others have had different rendering issues. Does anyone have any ideas?
I'd like to add that this isn't just in Big Sur, it's also icons displaying on iOS 14 from what I can tell.
Similar issue to #62
After further research this issue certainly seems to be related to the SVG fill rules. It seems for vector objects that worked fine previously are more sensitive to these issues when viewed in Big Sur and iOS 14. For those designing SVGs in Figma (like myself) you can use the Fill Rule Editor plugin to adjust the fill rule and direction.
Here's how to use the Fill Rule Editor plugin: https://youtu.be/j6dZw3K_E3M