SVG icon not visible in header

[Pernilla]

—-UPDATE— sorry, it works now! My mistake!

I inserted a logo as svg in header and it is not visible. I am using the same svg in footer and it works fine.
I have enabled “Add width and height attributes” .

• This topic was modified 1 year, 5 months ago by Pernilla.

But I have another problem, the logo width does not match the settings. I want it 262px width. It does not matter what size I put in settings, but the logo does not adjust. I hope you can take a look and help me.

Hello,

The size of the logo depends on three factors:

1) The maximum specified width in the “Logo width” option (https://prnt.sc/23pdtty). The logo cannot be wider than the “Logo width” value.

2) The height of the row in which this logo is located (https://prnt.sc/23pdvit). The logo cannot be higher than the row of the header in which it is located.

3) The dimensions of the logo image and its aspect ratio (https://prnt.sc/23pemgh). The logo cannot become larger than its physical dimensions.

The “Logo width” option only sets the maximum width of the logo. For example, if its physical image size is 280px (https://prnt.sc/23pf0iz), then with this option you can set the size from 10px to 280px. In this case, any other value higher than 280 px will not do because for this you need to increase the physical size of the image in the image editor.

Kind Regards

Thank you Luke.
But it is not the case. The logo should be 262x42px and the height of the row is 105.
Also, I already have a header with the same settings and the logo as png, and it works.
I copied the same header and changed the logo to an svg and the problem occurs.

Hello,

Could you please define that SVG logo and send me a link to the page with the header that has an SVG logo? Because at the moment I see the png logo.

Thank you in advance.

Kind Regards

Yes. You can see private info please.

Hello,

I see that your SVG image doesn’t have the width and height attributes. So please, try to open your SVG image with some editor like Sublime Text or default system text editor and add e.g width=”200″ height=”80″ attributes to your svg tag, 120 and 120 are as example, you can insert the sizes as per your needs.

Best Regards.

Ok, thank you. I will try to set with in an editor.
But why does the same svg work fine in footer? It is the same svg.

Hello,

The “Logo” element from the Header builder works a little bit differently, due to the undefined width and height attributes, the “Add width and height attributes” option adds those attributes based on the “viewBox” attribute in your SVG: https://take.ms/y7UMh , thus the SVG has the 207 width in the header that is come from the SVG itself: https://take.ms/vafjT

So either you need to define those attributes or use the below code to make the SVG wider.

body .wd-main-logo img {
	width: 100%;
}

Also, the “Add width and height attributes” option was provided to avoid the “explicit width and height on image elements” issue from Insights: https://take.ms/sdQ7o

Kind Regards

Thank you Luke, thanks for explaining for a better understanding 👍

Hello,

You are welcome! Always remember that you can reach out to us with any questions you may have.

We wish you a splendid day!

Kind Regards

[Author]

Posts