liquid
liquid copied to clipboard
image_tag filter, incorrect width and height attribute values for SVG
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%.