[gatsby-plugin-sharp] Traced SVG scaling issue in Internet Explorer

[flogy]

Description

The Traced SVG placeholders for my images are not scaling in alignment to the actual images in Internet Explorer.

Steps to reproduce

1. Open this demo website in Internet Explorer 11: https://using-gatsby-image.gatsbyjs.org/traced-svg/
2. Hover some of the images to see the misaligned Traced SVGs.
3. Optionally scale the window size (so the images scale as well) and hover the images again to see that it is actually some kind of a scaling problem.
4. Open the same website in another browser and repeat those steps to see that it works fine.

Expected result

Traced SVG placeholders should be aligned with the actual images in Internet Explorer, like it is in other browsers. It should look like this:

Actual result

In most cases the Traced SVG placeholder is not aligned with the actual image in Internet Explorer (tested with IE 11). It looks like this:

Environment

  System:
    OS: Windows 10 10.0.18362
    CPU: (8) x64 Intel(R) Core(TM) i7-6700K CPU @ 4.00GHz
  Binaries:
    Node: 10.18.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.16.0 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.13.7 - C:\Program Files\nodejs\npm.CMD
  Languages:
    Python: 3.5.1 - C:\Program Files\Python35\python.EXE
  Browsers:
    Edge: 44.18362.449.0
  npmPackages:
    gatsby: ^2.19.7 => 2.19.7 
    gatsby-image: ^2.2.39 => 2.2.39 
    gatsby-mdx-tts: 0.0.2 => 0.0.2 
    gatsby-plugin-emotion: ^4.1.23 => 4.1.23 
    gatsby-plugin-manifest: ^2.2.39 => 2.2.39 
    gatsby-plugin-mdx: ^1.0.75 => 1.0.75 
    gatsby-plugin-offline: ^3.0.32 => 3.0.32 
    gatsby-plugin-polyfill-io: ^1.1.0 => 1.1.0 
    gatsby-plugin-prefetch-google-fonts: ^1.4.3 => 1.4.3 
    gatsby-plugin-react-helmet: ^3.1.21 => 3.1.21 
    gatsby-plugin-robots-txt: ^1.5.0 => 1.5.0 
    gatsby-plugin-sharp: ^2.4.8 => 2.4.8 
    gatsby-plugin-sitemap: ^2.2.27 => 2.2.27 
    gatsby-plugin-typescript: ^2.2.0 => 2.2.0 
    gatsby-remark-images: ^3.1.47 => 3.1.47 
    gatsby-source-filesystem: ^2.1.46 => 2.1.46 
    gatsby-transformer-sharp: ^2.3.17 => 2.3.17 

Some investigation

• The Internet Explorer seems to have issues with SVGs that have no viewBox property (see: https://stackoverflow.com/questions/27970520/svg-with-width-height-doesnt-scale-on-ie9-10-11).
• gatsby-plugin-sharp uses the SVGO library to optimize and minimize the generated Traced SVGs, which by default removes the viewBox property.
• Here is a issue in the SVGO repository mentioning scaling issues by removign the viewBox property by default, where I also added a comment mentioning the IE problem: What is the benefit of stripping viewBox? svg/svgo#1128

Possible fix

• Re-adding the viewBox property fixes most cases in IE11 while it seems to not change any behavior in other browsers (tested in Chrome v80).
• To prevent SVGO to remove it we could change this line of the gatsby-plugin-sharp:

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

  Line 71 in dc4e21e

  const svgo = new SVGO({ multipass: true, floatPrecision: 0 })

  to disable the removeViewBox plugin like so:

const svgo = new SVGO({ multipass: true, floatPrecision: 0, plugins: [{ removeViewBox: false }] })

• However, this will only fix cases where the aspect ratio of the gatsby-image-wrapper is 1:1. For other cases we also need to set the preserveAspectRatio='none' to fix it. I did not check if this would have side effects. But it could be done using the SVGO addAttributesToSVGElement plugin.

Next steps

• If you are familiar with SVGs it would be great if you could share your thoughts about my solution proposition: do you see any possible side-effects, especially by adding the preserveApectRatio property?
• I will create a pull request for this (at least for fixing the issue for aspect ratio 1:1 images).

[vladar]

Thanks for the great bug report!

I think we should try your solution and see if it works for all possible cases. So feel free to submit the PR!

[flogy]

I think we should try your solution and see if it works for all possible cases. So feel free to submit the PR!

Thank you, the PR is now online and can be reviewed and tested. Hope this helps & happy to hear about the results :)