SVG Attributes for Sizing Doesn’t Work on iPhone
- By : Mydatahack
- Category : Front-End, Web Technologies
- Tags: Front End, iphone, safari, svg, Troubleshoot
I created a website that uses SVG files imported in img tags. It looked fine. When I tested the mobile version with iPhone, the SVG was bloated. It worked fine with Android with Chrome, Windows with Chrome and Mac with both Safari and Chrome. For some reason, the sizing attributes, with, height, and viewbox, are not working on iPhone Safari.
So, my svg looked like this and I was importing it in an img tag.
I never really figured out the reason why it was happening. In the end, I opted to add css to specify with and height. This works fine for iPhone.
It is important to add both with and height because iPhone Safari doesn’t honour the viewbox attribute, either.
It is a little strange that svg sizing attributes do not work. But, this is the quick win. If you have the same issue, don’t waste too much time on this. Just add with and height. If you have any other solutions, I would like to hear from you!