Shopify / Shopify/liquid

image_tag filter, incorrect width and height attribute values for SVG

Open
#1,814 0 comments 0 reactions 0 assignees View on GitHub

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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.