Set width and height for SVG logo

Hi there,

if you change Customizer > General --> Structure to Flexbox, the GP 3.0 should insert the Width and Height attributes.

You should also ensure that the original canvas size of your SVG is that of the size you want it displayed.

Thank you David,

But I already use Flexbox.

Also, if I use a SVG logo that already has the target width, it will only work for desktop since there's no option to upload a different logo for mobile.

I just tested your logo on a local dev site with the flexbox version and the width and height attributes are present. I notice on your site the logo has a loading="eager" attribute which is not a default setting of WP - how has that been added? As that may be affecting the way the image is output ?

As a side note - i also tested the site for CLS and there is none present.

For mobile - if required the Mobile Header option in Customizer > Header can be enabled which has its own Logo.

Hello David,

I am sorry but I can't find any width or height argument for the logo in the source code.
Also the new GTMEtrix which uses Lighthouse doesn't see dimension either.

The CLS value you see is "lab only" if any image doesn't have proper size set before loading, it will cause a CLS issue in the "real world".

Thanks

GP 3.0 ( Flexbox ) uses the core wp_get_attachment_metadata function to get the image width and height attributes. This relies on two things:

1. The Image has width and height attributes, can you check the image in your Media Library to make sure it has defined width and height?
2. No other function has modified the logo output - as i asked above the image has the loading="eager" attribute, WP does not add this by default so there must be another function or plugin that is adding this - which may in turn be removing the size attributes. Can you disable any lazyload functions / plugins to test.

I faced the same problem and I don't have anything like loading="eager" attribute but also the image tag has width and height.
Same Site as in Signature.
Thanks

Hi Suraj,

are you having an issue here ? I am seeing size attributes for you logo image. And as its an inline navigation logo its height is defined by the Menu Item height so would not be an issue if it were missing attributes.

Hello David,

There's no size specified in wordpress media for SVG ! It's only for normal images.

loading="eager" is added by a plugin of mine and has no effect on this problem (it doesn't deactivate width and height)).

I uploaded the SVG with the Safe SVG Plugin installed and it has dimensions:

Hello,

i installed your plugin and it does pu some dimension that I had not before !
It's very strange, I don't understand but it seems to work.

Glad to hear its working

Yes, it has a size attribute and also I have resized it with CSS.
Uploaded my logo using Safe SVG plugin but still same problem

Can you open a new topic for your question?

Thanks :)

Hi, It's the same question so I don't want to duplicate it.
Do I need to?
Thanks