Image component and SVG width and height

[JonMaguire]

Lighthouse is listing "Image elements do not have explicit width and height" for SVG images on our site. I saw there is an open issue about missing width and height for SVG files, https://github.com/adobe/aem-core-wcm-components/issues/2270, but has anyone come up with a decent workaround in the meantime using the image component?

We are using an on-prem implementation of AEM 6.5.12.0, Core component version 2.19.0, and v3 of the Image component.

[ManviSharma]

Hi,

Yes, setting explicit width and height values for SVG images is a recommended practice to avoid layout shifts and improve performance. The issue you mentioned is related to the AEM Core WCM Components and it seems that the component is not setting the width and height attributes for SVG images.

One workaround for this issue is to create a custom image component that sets the width and height attributes for SVG images. Here are the steps you can follow:

1. Create a new image component by copying the v3 Image component from the core components folder to your project folder.
2. Rename the component to something unique to avoid conflicts with the core component.
3. Open the jsp file of the new component and modify the image tag to add the width and height attributes if the image is an SVG.

[JonMaguire]

Thanks. I assumed this was the case but was hoping to not have to create a custom component. One thing, AEM does not capture width and height properties of SVGs when we upload them into the DAM to then use in the component HTL. I assume this is intentional?