nuxt / nuxt/image

Fit contain from SVG to any format results in size being the smallest viewbox of the svg instead of the desired size

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

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
1.5k
Forks
331
Avg merge
19h 52m
Merged PRs (30d)
9

Description

Reproduction

https://github.com/Tofandel/nuxt-img-bug

    <NuxtImg src="caligaris.svg" background="white" width="173" height="173" fit="contain" format="webp"></NuxtImg>

With the svg being

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 211.21 40"><g fill="#ef3340"><path d="m11.06 31.31c-6.08 0-11.06-4.68-11.06-11.1s5.16-11.19 11.28-11.19c4.98 0 9.22 3.1 10.45 8.22h-5.95c-.92-1.79-2.54-2.93-4.63-2.93-3.06 0-5.51 2.45-5.51 5.86s2.45 5.86 5.51 5.86c1.97 0 3.5-1.01 4.46-2.62h5.99c-1.4 5.2-5.9 7.91-10.54 7.91"/><path d="m39.81 20.16c0-3.63-1.97-5.77-4.81-5.77-2.67 0-5.33 1.92-5.33 5.77s2.67 5.77 5.33 5.77c2.84 0 4.81-2.14 4.81-5.77m5.46-10.93v21.86h-4.28l-.61-2.1h-.66c-1.36 1.49-3.19 2.32-5.55 2.32-5.55 0-10.19-4.55-10.19-11.15s4.63-11.15 10.19-11.15c2.27 0 4.24.79 5.64 2.36v-2.14z"/><path d="m49.93 0h5.68v31.04h-5.68z"/><path d="m60.07 0h5.68v31.04h-5.68z"/><path d="m70.31 9.18h5.6v21.86h-5.6z"/><path d="m95.12 20.11c0-3.63-1.97-5.77-4.81-5.77-2.67 0-5.33 1.92-5.33 5.77s2.67 5.77 5.33 5.77c2.84 0 4.81-2.14 4.81-5.77m5.46-10.93v19.67c0 5.9-3.02 11.15-10.49 11.15-6.99 0-10.8-4.59-10.8-8.04h5.46s.83 2.84 5.16 2.84c3.67 0 5.2-2.01 5.2-5.07v-.83c-1.4 1.57-3.37 2.36-5.64 2.36-5.55 0-10.19-4.55-10.19-11.15s4.63-11.15 10.19-11.15c2.36 0 4.2.83 5.55 2.32h.66l.61-2.1h4.28z"/><path d="m119.55 20.11c0-3.63-1.97-5.77-4.81-5.77-2.67 0-5.33 1.92-5.33 5.77s2.67 5.77 5.33 5.77c2.84 0 4.81-2.14 4.81-5.77m5.46-10.93v21.86h-4.28l-.61-2.1h-.66c-1.35 1.49-3.19 2.32-5.55 2.32-5.55 0-10.19-4.55-10.19-11.15s4.63-11.15 10.19-11.15c2.27 0 4.24.79 5.64 2.36v-2.14z"/><path d="m142.78 8.96v5.6c-.44-.09-1.18-.18-1.92-.18-3.06 0-6.25 1.57-6.25 5.6v11.06h-5.81v-21.86h4.46l.79 2.4h.7c.96-.96 3.1-2.62 6.69-2.62h1.35z"/><path d="m145.95 9.18h5.6v21.86h-5.6z"/><path d="m163.03 13.6c-1.84 0-2.62.92-2.62 1.84 0 1.49 1.97 1.92 3.28 2.19 3.89.83 7.83 2.01 7.83 6.64s-3.72 6.99-8.22 6.99c-5.03 0-8.92-3.06-9.18-7.69h5.38c.13 1.31 1.01 3.02 3.67 3.02 2.23 0 2.75-1.18 2.75-2.1 0-1.62-1.53-2.1-3.02-2.45-2.58-.57-8.13-1.62-8.13-6.6 0-4.28 4.11-6.47 8.35-6.47 4.9 0 8.13 2.97 8.39 6.64h-5.38c-.17-.74-.87-2.01-3.1-2.01"/><path d="m144.99 3.77c0-2.1 1.7-3.72 3.76-3.72s3.67 1.62 3.67 3.72c0 1.97-1.66 3.67-3.67 3.67s-3.76-1.7-3.76-3.67"/><path d="m69.35 3.77c0-2.1 1.7-3.72 3.76-3.72s3.67 1.62 3.67 3.72c0 1.97-1.66 3.67-3.67 3.67s-3.76-1.7-3.76-3.67"/><path d="m195.7 4.53c-8.55 0-15.49 6.97-15.49 15.58 0 7.04 4.65 13 11.04 14.93l1.25-1.86s-1.25-3.56-1.89-6.88c-.35-1.77-1.09-7.37 3.94-13.53 0 0 .1-1.89-2.43-1.96h-3.74s-.09-.13-.09-.13 4.53-1.6 4.75-1.79c1.76-1.52 4.22-2.91 8.66-.64 0 0-2.58-.48-2.49 1.77 0 .08-.08 2.66-.08 2.66s-.17.79.89 4.36c.33 1.12.47 2.29.39 3.46-.05.79-.17 1.78-.41 2.99-.47 2.44-1.62 5.78-3.71 10.25h-.04c-1.78-4.28-2.44-7-2.42-10.3 0-2.64.59-4.87 1.73-6.62l-1-.32c-1.19 1.82-1.79 4.13-1.8 6.86-.02 3.06.5 5.45 2 9.34l-1.63 2.77c.84.14 1.71.22 2.58.22 8.57 0 15.51-6.98 15.51-15.58s-6.94-15.58-15.51-15.58"/><circle cx="195.64" cy="9.2" r=".69"/></g></svg>

The important part is viewBox="0 0 211.21 40"

I would expect the resulting webp to be 173 x 33 (with white background in contain to become 173x173) but it is instead 40x40 (40 being the size from the viewbox so it seems to be some kind of upscaling protection, but that is broken in this case and upscaling protection should not apply to svg)

Image

My suspicion was correct because with :modifiers="{enlarge: true}" the issue is not present

I tracked the issue down to clampDimensionsPreservingAspectRatio in ipx, which doesn't use the fit context, but it should (it's not just a svg specific problem)

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 with IPX's clampDimensionsPreservingAspectRatio function and reproduce the issue using the linked nuxt-img-bug example with the shown NuxtImg props. Verify the generated dimensions for SVG input with fit="contain" and format="webp"; done means the image content is 173×33 within a 173×173 white background without requiring enlarge.

Written by the indexing model from the issue text.

Assessment

Tech stack
nuxt, typescript
Domain
frontend, performance
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
50/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.