Archived topic
SVG logo image dimensions incorrect, causes layout shift
5 replies · Started by Jeno on July 9, 2021
Dear Support,
I have an SVG logo that is 200x58 px. As I have tried to tracked down the source of 0.2 layout shift I noticed that the width and height dimensions are wrongly specified as 100x100 px. Due to the location of the logo, this causes the whole main content and the menu to slightly shift. Am I missing something here?
Thanks
Hi there,
if you check the Image in the Media Library does it display the correct dimensions in the attachment details?
In the media library it shows 100x100.
I didn't check there because in Customizer -> Site Identity -> Change logo -> Attachment details - it shows the correct dimensions.
I checked the logo SVG image and there are width and height attributes of 100% - which is why its grabbing those values. Generally the width/height attributes are not required as the SVG viewbox sets the dimensions.
If you can't edit those out then we can try overwriting them using this PHP snippet:
add_filter('generate_logo_attributes', function($output){
$add_attr = array(
'width' => '150',
'height' => '100',
);
$new_output = array_merge($output,$add_attr);
return $new_output;
});Just change the values to match your needs.
Thanks for the hint David! Taking out 100% from the svg solved it.
Glad to be of help
