It’s a bit of a long shot, but try changing the last subpath in your SVG (the eye shape) to this:
M 55.37, 39.3 c 0,0, 17, 36.58, 54.06, 36.58 c 37.2, 0, 55.89 -36.58, 55.89 -36.58
C 165.32 39.3, 153.38, 6.21, 109.43, 6.4 C 65.66, 6.21, 55.37, 39.3, 55.37, 39.3 Z
I’m taking a stab that the S/s commands in the path are not being handled correctly. That’s the only thing that is slightly odd about the path.
It doesn’t really explain why it would be happening on multiple browsers though.
I have this SVG made in AI:
<svg viewBox="0 0 218.86 147.2">
<path d="M38.68,120.52,60.06,90M34.46,59.08,3.58,80M158.8,90l21.38,30.52M215.27,80,184.4,59.08m-75,88.12V102.45M124.7,40.88a15.64,15.64,0,1,1-15.63-15.63A15.63,15.63,0,0,1,124.7,40.88ZM55.37,39.3s17,36.58,54.06,36.58c37.2,0,55.89-36.58,55.89-36.58S153.38,6.21,109.43,6.4C65.66,6.21,55.37,39.3,55.37,39.3Z" fill="none" stroke="current" stroke-miterlimit="10" stroke-width="12.8"/>
</svg>
On desktop, it shows up correctly:
But on mobile, the edges are showing up incorrectly:
Is there a way to resolve this?
Which mobile devices? Which browsers?
@PaulLeBeau iPhone 11, I have tried Safari, Chrome, Firefox, Opera, and Edge on my phone and they all displayed incorrectly.
I have fixed the circle by using
There is no path that matches that in your original SVG. Have you altered the SVG?
On iOS browsers are just shells on webkit. I.e. the rendering engine for Firefox on iOS is not gecko it’s webkit, same with Chrome because Apple don’t allow any other rendering engines than webkit.
Ah yes, of course. I forgot about that. Thanks Robert.
I’m glad. It would help others if you reported this bug to Apple.