Gatsby: Gatsby image sharp traced SVG does not respect forced aspect ratio

[nakedible]

Description

When using gatsby-image and gatsby-plugin-sharp to produce traced SVG images for image loading, and specifying both maxWidth and maxHeight for the resulting image, the traced SVG image is from the full (uncropped) source image, where as the actual generated image is cropped to aspect ratio with the crop location defined by cropFocus. The end result is very jarring where the traces do not match at all with the actual image when loaded.

Instead the traced SVG should match the cropped actual resulting image, meaning that the image should be cropped to correct aspect ratio first, and then traced.

Steps to reproduce

Following GraphQL query:

childImageSharp {
              fluid(
                maxWidth: 600
                maxHeight: 600
              ) {
                ...GatsbyImageSharpFluid_tracedSVG
              }
}

And usage:

<Img fluid={childImageSharp.fluid} />

Expected result

Traced SVG should match the image that is to be loaded.

Actual result

Traced SVG is from uncropped image, meaning all lines are at different places.

Environment

Cannot get gatsby info because of #8502.

[nakedible]

Doing some additional testing, this seems to be broken in a few ways. The healOptions handler seems really weird, only converting some values from strings to integers, filling in hardcoded width even when both maxHeight and maxWidth are present. In addition to that, the fluid handler does a lot more processing for width and height and other things before passing on those things to resize (through the job queue). Even small changes in the image pipeline can change the cropFocus attention or entropy strategy result.

The only reasonable way that I can see this being fixed would be to first do the cropping and resizing to correct size in the job queue, and then trace the exact generated image without any resize or crop - which constitutes of somewhat of a rewrite of the current code.

[kakadiadarpan]

@nakedible can you provide a reproduction repo for this? That would make it much easier to diagnose this issue.

As you are not able to provide the result of gatsby info --clipboard, can you share your package.json here?

[fk]

I can confirm that traced SVGs do not match the cropped images. :(
Really sorry you're running into this @nakedible and thanks for opening up this issue! 🙏

[fk]

Looked into this for a couple minutes, and want to clarify that this only is happening for fluid queries (that crop images), not for fixed ones.

[nakedible]

No worries, it's nice to get actual bugs found and fixed. I added a comment about healOptions to the pull.

[gatsbot[bot]]

Old issues will be closed after 30 days of inactivity. This issue has been quiet for 20 days and is being marked as stale. Reply here or add the label "not stale" to keep this issue open!

[gatsbot[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

Thanks again for being part of the Gatsby community!