Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

image_tag filter, incorrect width and height attribute values for SVG #1814

Open
MaxDesignFR opened this issue Jul 14, 2024 · 0 comments
Open

Comments

@MaxDesignFR
Copy link

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%.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant