Web Development

Ask something
Question Locked

SVG header graphic distorted on Mobile device

0 helpful
4 replies

by ameliabear 1 view

Closed to new repliesThis discussion is closed. It stays readable, but it takes no new replies.
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.

4 replies

by Wizard57M-TR

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!
Wiz

by ameliabear

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.

by Wizard57M-TR

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.

by tekhniqsblog

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.

This discussion is closed to new replies.