image_tag filter, incorrect width and height attribute values for SVG
Nobody has claimed this yet.
- Dominant language
- Ruby
- Stars
- 11.9k
- Forks
- 1.5k
- Avg merge
- 17h 55m
- Merged PRs (30d)
- 3
Description
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%.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start at the image_tag filter implementation and inspect how SVG width, height, and viewBox values are read when generating the HTML img tag. Reproduce the reported 100% case and verify that the generated attributes use the viewBox dimensions without changing behavior for other images.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- ruby
- Domain
- web-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100