[solved] homepage svg logo not displayed on Aple Ipad

[Pedalman]

I changed our homepage logo from jpg/png to a svg months ago. This is not rendered at whole on an Ipad I got my hands on accidently. This logo is a 'text logo' and displayed at header center. Left of it sits a graphic logo that I also converted to svg and that shows pixel irregularities like missing pixels in form of vertical stripes on the Ipad at hand. At least it is rendered.

Well, I know nothing about Aple devices except they are loved by others.

All I know that they often use a higher density of pixels. Double pixel resolution?

I run the Warehouse theme from IQUIT on the latest ThirtyBees and the theme allows to point to a logo for use on higher density devices if I got that right. I set it to a svg logo that has 400x200 pixels instead of the normal 200x100 px logo. This is double the standard resolution of the normal one, and hence double pixel densitiy? Well, I do not know. Fact is the logo is not shown and perhaps you can give me tips how to solve this issue.

PS: I know I could go for a jpg/png logo but I like the idea of having a svg logo since it is a pretty simple logo (I am open for any adice for a better one ;) and it is the first time it looks always sharp as possible (jpg logos looked often blured at differen resolutions).

thank you

website: www.gruenes-spielzeug.de

[AndyC]

I always use http://browsershots.org/ to test different browsers to get an idea

[gonssal]

SVG is a vectorial format and doesn't have "pixel density" like bitmap images. You can upload a 130x100px svg file (viewbox of that size) that looks perfect at 1300x1000px or 13000x10000px.

The only thing I can tell you is that I can see both logos using Safari in my macOS VM, so maybe that iPad has an old Safari version. Your best bet is probably to run the SVG through svgomg.

If that doesn't work, maybe disable lazy loading images just in case.

[MockoB]

No logo on my iPhone X either. You should use jpeg fallback for your logo in the tpl file I believe. Actually it tried to load something for part of a second but I’m not sure if it was the logo... it was something pink I think ...

[Traumflug]

Browsers like Firefox have a developer console. There one can choose the Network Analysis tab, reload the page and see all the files requested and which response they got.

[Pedalman]

Thank you all. I could isolate the problem and I know what to do because of your good tips.

[MockoB]

I’m glad you fixed it. Could you share with us what was the issue, because it looks your svg is loading fine now on my iPhone?

[x97wehner]

I have the same setup and didn't have the display issue being described. I did have to modify CSS to keep the logo scale the same where needed so it wasn't just displaying a larger image.

[Pedalman]

Well, Traumflug's hint revealed to me that I had an issue with the source of the image. It was loaded froma sub domain. After correcting it the image was shown on the Ipad. Then I checked www.svgomg.com and came to the conclusion that I had compressed my svg to much (size). So I redid my svg in Inkscape and reuploaded that to my ftp and all was fine. So, I am happy that you see the logo now, too :)

@ Xaver Wehner I am curious if you could share with us the href code you use. I think I should implement that, too.

with regards