[Resolved] SVG logo image dimensions incorrect, causes layout shift

[Jeno]

Dear Support,

I have an SVG logo that is 200×58 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 100×100 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

[David]

Hi there,

if you check the Image in the Media Library does it display the correct dimensions in the attachment details?

[Jeno]

In the media library it shows 100×100.
I didn’t check there because in Customizer -> Site Identity -> Change logo -> Attachment details – it shows the correct dimensions.

[David]

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.

[Jeno]

Thanks for the hint David! Taking out 100% from the svg solved it.

[David]

Glad to be of help

[Author]

Posts