SVG doesn't display in FireFox

Hello everyone,

I’ve added a logo to my website in SVG format:
http://imutz.org

<img id="desktoptitle" src="/images/title.svg" title="..." alt="...">

On Chrome and Edge it displays fine, but on FireFox it doesn’t.
As far as I saw it requires adding some fixed dimensions for it to display, but I don’t want to do that on a responsive website.

That’s the logo I speak of:

Any thoughts?

Adding width and height attributes to an img element will not fix the size, CSS will override those settings if you have CSS to make the images responsive, Eg: img {max-width: 100%; height: auto;}

1 Like

Hi,

The reason that it doesn’t display in Firefox is that you have placed the image inside a display:table-cell structure which is a shrink to fit algorithm. This makes it hard for the browser to work out the image size. i.e. The 100% image width is based on the width of the parent but the parent’s width is determined by its child content so you have an endless loop that is hard to resolve.

I believe the behaviour is undefined in the specs so some browsers apply the images default width and some will give you zero which is basically what you told it to do (100% of zero is zero).

It’s an awkward conundrum but if you look at your image in other browsers then you see that they are simply applying the default 300px width so I suggest that you use a media query for larger screens and apply the 300px width by default.

@media screen and (min-width:435px){
  #desktoptitle{width:300px;height:auto;}
}

As far as I see it that makes no difference to any of the other browsers as they are not zooming at all until small screen anyway.

Or alternatively give the h1 that holds the image a percentage width of around 30% and that will allow the width:100% to take effect on the image. You would need to adjust using media queries when you switch to hamburger and small screen.

2 Likes

Thank you both :slight_smile:
Decided to go with your first suggestion @PaulOB
The second one still caused problems when screen size was < 1000px
It was displaying the logo with a width of only 32px, I guess from the very same reason you mentioned, the navigation is a table-cell and after it collapses it takes only a small width so it makes the logo shrink aswell.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.