Fit contain from SVG to any format results in size being the smallest viewbox of the svg instead of the desired size
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)
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
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 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