feat(gatsby-plugin-sharp): Add tracedSVG option in fluid and fixed processors (#11981)

* Add tracedSVG option in fluid and fixed processors

Fix: #11912

* Add unit tests

Author: oorestisime

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

@@ -24,6 +24,7 @@ Object {
   "srcSet": "/static/1234/56b42/test.png 200w,
 /static/1234/a3030/test.png 281w",
   "srcSetType": "image/png",
+  "tracedSVG": undefined,
 }
 `;
 
@@ -41,6 +42,7 @@ Object {
   "srcSet": "/static/1234/4df82/test.png 200w,
 /static/1234/67b29/test.png 281w",
   "srcSetType": "image/png",
+  "tracedSVG": undefined,
 }
 `;
 
@@ -57,6 +59,7 @@ Object {
   "src": "/static/1234/4ce1a/test.png",
   "srcSet": "/static/1234/4ce1a/test.png 1w",
   "srcSetType": "image/png",
+  "tracedSVG": undefined,
 }
 `;
 
@@ -70,3 +73,33 @@ Object {
   "width": 746,
 }
 `;
+
+exports[`gatsby-plugin-sharp tracedSVG runs on demand 1`] = `
+Object {
+  "aspectRatio": 1,
+  "base64": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAGElEQVQ4y2P4TwFgGNU8qnlU86jmgdUMAOBEq42KgAyMAAAAAElFTkSuQmCC",
+  "height": 1,
+  "originalName": undefined,
+  "src": "/static/1234/05eb0/test.png",
+  "srcSet": "/static/1234/05eb0/test.png 1x",
+  "tracedSVG": "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' version='1'/%3e",
+  "width": 1,
+}
+`;
+
+exports[`gatsby-plugin-sharp tracedSVG runs on demand 2`] = `
+Object {
+  "aspectRatio": 1,
+  "base64": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAGElEQVQ4y2P4TwFgGNU8qnlU86jmgdUMAOBEq42KgAyMAAAAAElFTkSuQmCC",
+  "density": 72,
+  "originalImg": "/static/1234/c1fac/test.png",
+  "originalName": undefined,
+  "presentationHeight": 1,
+  "presentationWidth": 1,
+  "sizes": "(max-width: 1px) 100vw, 1px",
+  "src": "/static/1234/c1fac/test.png",
+  "srcSet": "/static/1234/c1fac/test.png 1w",
+  "srcSetType": "image/png",
+  "tracedSVG": "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' version='1'/%3e",
+}
+`;

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

@@ -319,6 +319,53 @@ describe(`gatsby-plugin-sharp`, () => {
       expect(result).toMatchSnapshot()
     })
   })
+
+  describe(`tracedSVG`, () => {
+    it(`doesn't always run`, async () => {
+      const args = {
+        maxWidth: 100,
+        width: 100,
+        tracedSVG: { color: `#FF0000` },
+      }
+
+      let result = await fixed({
+        file,
+        args,
+      })
+
+      expect(result.tracedSVG).toBeUndefined()
+
+      result = await fluid({
+        file,
+        args,
+      })
+
+      expect(result.tracedSVG).toBeUndefined()
+    })
+
+    it(`runs on demand`, async () => {
+      const args = {
+        maxWidth: 100,
+        width: 100,
+        generateTracedSVG: true,
+        tracedSVG: { color: `#FF0000` },
+      }
+
+      let result = await fixed({
+        file,
+        args,
+      })
+
+      expect(result).toMatchSnapshot()
+
+      result = await fluid({
+        file,
+        args,
+      })
+
+      expect(result).toMatchSnapshot()
+    })
+  })
 })
 
 function getFileObject(absolutePath, name = `test`) {

packages/gatsby-plugin-sharp/src/index.js

@@ -557,6 +557,18 @@ async function base64(arg) {
   return await memoizedBase64(arg)
 }
 
+async function getTracedSVG(options, file) {
+  if (options.generateTracedSVG && options.tracedSVG) {
+    const tracedSVG = await traceSVG({
+      file,
+      args: options.tracedSVG,
+      fileArgs: options,
+    })
+    return tracedSVG
+  }
+  return undefined
+}
+
 async function fluid({ file, args = {}, reporter, cache }) {
   const options = healOptions(pluginOptions, args, {})
   // Account for images with a high pixel density. We assume that these types of
@@ -686,6 +698,8 @@ async function fluid({ file, args = {}, reporter, cache }) {
   // Get base64 version
   const base64Image = await base64({ file, args: base64Args, reporter, cache })
 
+  const tracedSVG = await getTracedSVG(options, file)
+
   // Construct src and srcSet strings.
   const originalImg = _.maxBy(images, image => image.width).src
   const fallbackSrc = _.minBy(images, image =>
@@ -729,6 +743,7 @@ async function fluid({ file, args = {}, reporter, cache }) {
     density,
     presentationWidth,
     presentationHeight,
+    tracedSVG,
   }
 }
 
@@ -796,6 +811,8 @@ async function fixed({ file, args = {}, reporter, cache }) {
   // Get base64 version
   const base64Image = await base64({ file, args: base64Args, reporter, cache })
 
+  const tracedSVG = await getTracedSVG(options, file)
+
   const fallbackSrc = images[0].src
   const srcSet = images
     .map((image, i) => {
@@ -829,6 +846,7 @@ async function fixed({ file, args = {}, reporter, cache }) {
     src: fallbackSrc,
     srcSet,
     originalName: originalName,
+    tracedSVG,
   }
 }