I ran into a strange issue last week and I want to put it out there, in case someone else needs help with it.
My SVG logo was getting cut off on iOS devices when seen from Safari and Chrome. It seems to happen only on mobile devices.
It looked something like this:
As it turns out the issue was with SVG itself, it uses <g clip-path=”url(#clip0)”> to wrap the content of the SVG and on mobile devices was messing with the file.
I ended up removing the <g> wrap and the <clipPath> that is referenced in the SVG file.
Before:
<svg width="280" height="51" viewBox="0 0 280 51" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<path d="" fill="white"/>
</g>
<defs>
<clipPath id="clip0">
<rect width="280" height="50.5533" fill="white" transform="translate(0 0.446777)"/>
</clipPath>
</defs>
</svg>
After:
<svg width="280" height="51" viewBox="0 0 280 51" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="" fill="white"/>
<defs>
</defs>
</svg>
Update 28.07.2022
You can try using the SVG as an object
<object data="image.svg" type="image/svg+xml"></object>
Carlos
Thank you! Ran into this issue on Safari in desktop and this solved it.
Paul
Many thanks!
John
Was running into the same thing. SVGs display just fine on Android but were being cut off on iphones. Sadly I don’t have “clickpath” in my svg and still can’t figure out how to fix this time suck, that I have zero time for.
George-Paul Crețu
Check if you have a
<g clip-path>maybe, if not<clipPath>Michael
Can’t believe this actually worked! Awesome! thx
Florin
Worked for me! Thank you!