Skip to content

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

@Tofandel

Description

@Tofandel

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)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions