Image component and SVG width and height | Community
Skip to main content
JonMaguire
JonMaguire
Level 3
May 10, 2023

Image component and SVG width and height

  • May 10, 2023
  • 1 reply
  • 1785 views

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.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

1 reply

ManviSharma
Adobe Employee
ManviSharmaAdobe Employee
Adobe Employee
May 10, 2023

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
    JonMaguireAuthor
    Level 3
    May 10, 2023

    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?

      Terms & ConditionsAccessibility statement

      Loading footer...