- This topic has 17 replies, 4 voices, and was last updated 1 year, 7 months ago by Leo.
November 17, 2020 at 1:05 am #1534277Julien
We use SVG logo for our site and we found that GeneratePress doesn’t set the width and height for it, even after selecting logo width in theme setting. This can cause CLS problem.
How to set width and height for SVG logo ?
Thank you !November 17, 2020 at 2:44 am #1534359DavidStaffCustomer Support
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.November 17, 2020 at 2:54 am #1534380Julien
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.November 17, 2020 at 3:10 am #1534389DavidStaffCustomer Support
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.November 17, 2020 at 4:13 am #1534439Julien
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”.
ThanksNovember 17, 2020 at 5:05 am #1534484DavidStaffCustomer Support
GP 3.0 ( Flexbox ) uses the core
wp_get_attachment_metadatafunction 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.November 17, 2020 at 7:49 am #1534898Suraj Katwal
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.
ThanksNovember 17, 2020 at 9:11 am #1535015DavidStaffCustomer Support
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.November 17, 2020 at 9:17 am #1535021Julien
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)).November 17, 2020 at 9:29 am #1535037DavidStaffCustomer SupportNovember 17, 2020 at 11:49 am #1535173Julien
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.November 17, 2020 at 2:39 pm #1535378DavidStaffCustomer SupportNovember 17, 2020 at 5:01 pm #1535451Suraj Katwal
Yes, it has a size attribute and also I have resized it with CSS.
Uploaded my logo using Safe SVG plugin but still same problemNovember 17, 2020 at 6:00 pm #1535479LeoStaffCustomer SupportNovember 17, 2020 at 9:40 pm #1535571Suraj Katwal
Hi, It’s the same question so I don’t want to duplicate it.
Do I need to?
- You must be logged in to reply to this topic.