[Resolved] Set width and height for SVG logo

Home Forums Support [Resolved] Set width and height for SVG logo

Home Forums Support Set width and height for SVG logo

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #1534277
    Julien

    Hello,

    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 !

    #1534359
    David
    Staff
    Customer Support

    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.

    #1534380
    Julien

    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.

    #1534389
    David
    Staff
    Customer 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.

    #1534439
    Julien

    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

    #1534484
    David
    Staff
    Customer Support

    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.

    #1534898
    Suraj 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.
    Thanks

    SEO, WordPress Optimization, Blogging Tutorials.
    GeneratePress Tutorial: https://www.wplogout.com

    #1535015
    David
    Staff
    Customer Support

    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.

    #1535021
    Julien

    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)).

    #1535037
    David
    Staff
    Customer Support

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

    #1535173
    Julien

    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.

    #1535378
    David
    Staff
    Customer Support

    Glad to hear its working

    #1535451
    Suraj 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 problem

    SEO, WordPress Optimization, Blogging Tutorials.
    GeneratePress Tutorial: https://www.wplogout.com

    #1535479
    Leo
    Staff
    Customer Support

    Can you open a new topic for your question?

    Thanks 🙂

    #1535571
    Suraj Katwal

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

    SEO, WordPress Optimization, Blogging Tutorials.
    GeneratePress Tutorial: https://www.wplogout.com

Viewing 15 posts - 1 through 15 (of 18 total)
  • You must be logged in to reply to this topic.