liquid icon indicating copy to clipboard operation
liquid copied to clipboard

image_tag filter, incorrect width and height attribute values for SVG

Open MaxDesignFR opened this issue 7 months ago • 0 comments

Some SVG images are designed in a way that the aspect ratio is defined in the viewbox and not in the width and height attribute, such as:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2510 675" height="100%" width="100%">...</svg>

When using the image_tag, it will output an html img tag with width and height attribute of 100 (in this example, it should instead be width="2510" and height="675").

The issue is that the browsers consider the image aspect-ratio to be 1:1, which can mess a page layout, especially when the image specify the loading:'lazy' attribute. I have encountered this issue with lazy-loaded images in a carrousel. The carrousel height is jumping height as images are loaded, because the browser has been provided with a wrong aspect-ratio. Pretty poor UX.

Suggestion:

The width and height attributes should output a value based on the viewbox attribute for SVG images, especially if the SVG width and height attributes are set to 100%.

MaxDesignFR avatar Jul 14 '24 23:07 MaxDesignFR