fix(gatsby-plugin-sharp): fix Traced SVG scaling issue in Internet Explorer

[flogy]

Description

Fixes the scaling issue of Traced SVG placeholdes as described in issue #22169.

Documentation

No documentation existing. Not worth documenting in my opinion, as it is just a bugfix.

Related Issues

Fixes #22169

[KyleAMathews]

Hi! Great debugging on this! The tests aren't passing on CI (ran them locally and they weren't passing here either).

[KyleAMathews]

Not clear what's wrong—perhaps one of the options.

[pieh]

Couple of tests are failing because snapshots were not updated.

The tests that fail for different reason with:

TypeError: Cannot read property 'isElem' of undefined

are all in https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-sharp/src/__tests__/trace-svg.js and they fail because mocked potrace returns empty string, which apparently svgo doesn't handle with proposed configuration (but it handles with default config for some reason).

2 options here:

• mock svgo for those tests
• or change potrace mock (

  gatsby/packages/gatsby-plugin-sharp/src/__tests__/trace-svg.js

  Line 21 in 2205811

  trace: (_, _2, cb) => cb(null, ``),

  ) to return some actual svg string

[pieh]

@floggy let me know if you got this, need a hand or would prefer for me to apply needed changes ;)

[flogy]

Hi @pieh
Thank you for your analysis! I am currently trying to solve it on gitpod but struggling a bit. Could we maybe have a quick chat on discord? I saw we are in the same time zone ;-)

[pieh]

Could we maybe have a quick chat on discord? I saw we are in the same time zone ;-)

For sure! I'm @pieh at https://gatsby.dev/discord discord server

[pieh]

Thanks for research and the fix!

[gatsbot]

Holy buckets, @flogy — we just merged your PR to Gatsby! 💪💜

Gatsby is built by awesome people like you. Let us say “thanks” in two ways:

1. We’d like to send you some Gatsby swag. As a token of our appreciation, you can go to the Gatsby Swag Store and log in with your GitHub account to get a coupon code good for one free piece of swag. We’ve got Gatsby t-shirts, stickers, hats, scrunchies, and much more. (You can also unlock even more free swag with 5 contributions — wink wink nudge nudge.) See gatsby.dev/swag for details.
2. We just invited you to join the Gatsby organization on GitHub. This will add you to our team of maintainers. Accept the invite by visiting https://github.com/orgs/gatsbyjs/invitation. By joining the team, you’ll be able to label issues, review pull requests, and merge approved pull requests.

If there’s anything we can do to help, please don’t hesitate to reach out to us: tweet at @gatsbyjs and we’ll come a-runnin’.

Thanks again!

[flogy]

Thank you @pieh for your help 🙂

[pieh]

Published in gatsby-plugin-sharp@2.5.2