Web Development



SVG header graphic distorted on Mobile device

By Ameliabear ·
Hello, I was wondering if anyone might know how to help me. I updated my website logo recently and updated it on my Wordpress site. I use a customizer to update my website information as I don't know coding. I converted my graphic to SVG in Illustrator and uploaded it. It shows fine on a desktop and on my customizer's "mobile viewer". But when I go to my website on my phone, the logo looks distorted and off. I tried removing the logo and having just text, deleting my browsing history on my phone and trying again. Even though the graphic isn't there any longer, it still shows up on my phone. My husband checked on his phone and it's the same thing. How do I fix this? I have a potential client looking at my website based on a referral and this is the worst timing. Thanks.

This conversation is currently closed to new comments.

Thread display: Collapse - | Expand +

All Answers

Collapse -

Might try converting the graphic format

Instead of using SVG image format, you might consider using either JPEG (JPG, JPEG) or PNG formats. These are better understood by most web browsers and seem to scale better in my experience. Be mindful also of the total filesize of the image, you may need to decrease resolution, color depth as well as the image size.. A smaller image means less bandwidth used in fetching your web page which is even more important in mobile devices with data caps!

Collapse -

Thanks and one more question

by Ameliabear In reply to Might try converting the ...

Thank you, that is very helpful. The reason I did SVG is because the PNG and JPG files look blurry. Do you have any idea why the graphic isn't removed off my mobile view of the site when I delete it off my website? Even on a new phone, with no history of viewing my site, it still shows up as a scrambled graphic after I have removed it. But only on the mobile view.

Collapse -

My guess would be your site hosting provider

is "caching" your site for mobile visitors, and may not have refreshed the content in their cache. Check back in say 12 or 24 hours and see if it still displays the scrambled graphic on your phone.

Collapse -

MaxMegaMenu will help you for sure

by tekhniqsblog In reply to SVG header graphic distor ...

I have also faced the similar kind of issue while back in 2015 as I was just a beginner of blogging. I have installed maxmegamenu wordpress plugin which automatically compressed the logo of my site to be able to view perfectly on any mobile device without any kind of cluttering issues with the main menu and pages menu, etc.
Link Removed by Moderator.

Related Discussions

Related Forums