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

* fixed Traced SVG scaling issue in Internet Explorer

* return SVG string from mocked potrace and updated snapshots

* fix snapshot

Co-authored-by: Michal Piechowiak <[email protected]>

Author: Florian Gyger

packages/gatsby-plugin-sharp/src/__tests__/__snapshots__/index.js.snap

@@ -1058,7 +1058,7 @@ Object {
   "originalName": "test.png",
   "src": "/static/1234/7e516/test.png",
   "srcSet": "/static/1234/7e516/test.png 1x",
-  "tracedSVG": "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='100'%20height='100'%3e%3cpath%20d='M41%2024c-18%207-24%2029-11%2043%2015%2017%2044%208%2046-15%201-19-17-34-35-28'%20fill='red'%20fill-rule='evenodd'/%3e%3c/svg%3e",
+  "tracedSVG": "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='100'%20height='100'%20viewBox='0%200%20100%20100'%20preserveAspectRatio='none'%3e%3cpath%20d='M41%2024c-18%207-24%2029-11%2043%2015%2017%2044%208%2046-15%201-19-17-34-35-28'%20fill='red'%20fill-rule='evenodd'/%3e%3c/svg%3e",
   "width": 100,
 }
 `;
@@ -1078,6 +1078,6 @@ Object {
 /static/1234/a1812/test.png 50w,
 /static/1234/7e516/test.png 100w",
   "srcSetType": "image/png",
-  "tracedSVG": "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='100'%20height='100'%3e%3cpath%20d='M41%2024c-18%207-24%2029-11%2043%2015%2017%2044%208%2046-15%201-19-17-34-35-28'%20fill='red'%20fill-rule='evenodd'/%3e%3c/svg%3e",
+  "tracedSVG": "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='100'%20height='100'%20viewBox='0%200%20100%20100'%20preserveAspectRatio='none'%3e%3cpath%20d='M41%2024c-18%207-24%2029-11%2043%2015%2017%2044%208%2046-15%201-19-17-34-35-28'%20fill='red'%20fill-rule='evenodd'/%3e%3c/svg%3e",
 }
 `;

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

@@ -17,8 +17,9 @@ jest.mock(`sharp`, () => {
 })
 
 jest.mock(`potrace`, () => {
+  const circleSvgString = `<svg height="100" width="100"><circle cx="50" cy="50" r="40" /></svg>`
   return {
-    trace: (_, _2, cb) => cb(null, ``),
+    trace: (_, _2, cb) => cb(null, circleSvgString),
     Potrace: {
       TURNPOLICY_MAJORITY: `wat`,
     },

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

@@ -68,7 +68,24 @@ exports.notMemoizedPrepareTraceSVGInputFile = async ({
 
 const optimize = svg => {
   const SVGO = require(`svgo`)
-  const svgo = new SVGO({ multipass: true, floatPrecision: 0 })
+  const svgo = new SVGO({
+    multipass: true,
+    floatPrecision: 0,
+    plugins: [
+      {
+        removeViewBox: false,
+      },
+      {
+        addAttributesToSVGElement: {
+          attributes: [
+            {
+              preserveAspectRatio: `none`,
+            },
+          ],
+        },
+      },
+    ],
+  })
   return svgo.optimize(svg).then(({ data }) => data)
 }