[Support request] SVG Dimensions – Best Way to Add?

[Brent Wilson]

What is the best way to solve the issue of missing svg image dimensions?

On ericollila.com, I am using an SVG logo file on the home page hero section. It keeps getting called out when I run page tests for not having dimensions. It is using the core image block inside a GB container block.

Screenshot here: https://i.postimg.cc/Hxsn5tRp/Screenshot-2022-04-18-19-56-52.jpg

[Fernando]

Hi Brent,

With regards to image dimensions of SVG, see David’s response here: https://generatepress.com/forums/topic/image-elements-do-not-have-explicit-width-and-height-7/#post-1962439

For Image Blocks, you can set a specific width and height as such: https://share.getcloudapp.com/xQuqNP6L

Hope this clarifies. 🙂

[Brent Wilson]

Could you reshare that link to David’s response? The link you included is the link to my question thread here.

Am I seeing correctly that when adding an SVG to an image block, there is no option to set specific width and height?

[Fernando]

Sorry about that. Fixed the link above.

With regards regards to the Image Block, there should be one: https://wordpress.com/support/wordpress-editor/blocks/image-block/#:~:text=image%20to%20100%2C%2075%2C%2050%2C%20and%2025%25%20of%20its%20original%20size.

You may also try setting its width and height it through custom CSS. For instance:

img.wp-image-29735 {
    width:1000px !important;
    height:500px !important;
}

Kindly replace the values to your preference. Moreover, you may also set a class for the Image Block and use it as a selector for the CSS above instead.

Please let us know how it goes. 🙂

[Author]

Posts