Remove tracedSVG

e2e-tests/contentful/cypress/integration/gatsby-plugin-image.js

@@ -78,7 +78,7 @@ describe(`gatsby-plugin-image`, () => {
     testGatsbyPluginImage(`dominant-color`, hasColorPlaceholder)
   )
   it(`traced`, testConfig, () =>
-    testGatsbyPluginImage(`traced`, hasSVGPlaceholder)
+    testGatsbyPluginImage(`traced`, hasColorPlaceholder)
   )
   it(`blurred`, testConfig, () =>
     testGatsbyPluginImage(`blurred`, hasBase64Placeholder)

e2e-tests/contentful/src/pages/gatsby-plugin-image.js

@@ -94,7 +94,9 @@ const GatsbyPluginImagePage = ({ data }) => {
         ))}
       </Grid>
 
-      <h2>gatsby-plugin-image: Traced SVG Placeholder</h2>
+      <h2>
+        gatsby-plugin-image: Traced SVG Placeholder (fallback to DOMINANT_COLOR)
+      </h2>
       <Grid data-cy="traced">
         {data.default.nodes.map(node => (
           <div key={node.title}>

e2e-tests/development-runtime/cypress/integration/remote-file/gatsby-plugin-image.js

@@ -126,8 +126,9 @@ describe(`remote-file`, () => {
     cy.get(".constrained_traced [data-placeholder-image]")
       .first()
       .should($el => {
-        expect($el.prop("tagName")).to.be.equal("IMG")
-        expect($el.prop("src")).to.contain("data:image/svg+xml,%3csvg")
+        // traced falls back to DOMINANT_COLOR
+        expect($el.prop("tagName")).to.be.equal("DIV")
+        expect($el).to.be.empty
       })
     cy.get(".full [data-placeholder-image]")
       .first()

e2e-tests/development-runtime/cypress/integration/static-image/traced.js

@@ -5,12 +5,14 @@ describe(`fixed`, () => {
     cy.visit(`/static-image/traced`).waitForRouteChange()
   })
 
-  it(`renders a traced svg`, () => {
+  it(`traced svg (falls back to DOMINANT_COLOR)`, () => {
     cy.getTestElement(tracedTestId)
-      .find(`.gatsby-image-wrapper > img`)
-      .should(`have.attr`, `src`)
-      .and(src => {
-        ;[`data:image/svg+xml`].forEach(part => expect(src).to.include(part))
+      .find(`.gatsby-image-wrapper > [data-placeholder-image]`)
+      .first()
+      .should($el => {
+        // traced falls
+        expect($el.prop("tagName")).to.be.equal("DIV")
+        expect($el).to.be.empty
       })
   })
 

e2e-tests/production-runtime/cypress/integration/remote-file.js

@@ -1,149 +1,158 @@
-Cypress.on('uncaught:exception', (err) => {
-  if ((err.message.includes('Minified React error #418') || err.message.includes('Minified React error #423') || err.message.includes('Minified React error #425')) && Cypress.env(`TEST_PLUGIN_OFFLINE`)) {
+Cypress.on("uncaught:exception", err => {
+  if (
+    (err.message.includes("Minified React error #418") ||
+      err.message.includes("Minified React error #423") ||
+      err.message.includes("Minified React error #425")) &&
+    Cypress.env(`TEST_PLUGIN_OFFLINE`)
+  ) {
     return false
   }
 })
 
 describe(
-  `remote-file`, 
+  `remote-file`,
   {
     retries: {
       runMode: 4,
     },
   },
   () => {
-  beforeEach(() => {
-    cy.visit(`/remote-file/`).waitForRouteChange()
+    beforeEach(() => {
+      cy.visit(`/remote-file/`).waitForRouteChange()
 
-    // trigger intersection observer
-    cy.scrollTo("top")
-    cy.wait(100)
-    cy.scrollTo("bottom", {
-      duration: 500,
-    })
-    cy.wait(500)
-  })
-
-  async function testImages(images, expectations) {
-    for (let i = 0; i < images.length; i++) {
-      const expectation = expectations[i]
-
-      const res = await fetch(images[i].currentSrc, {
-        method: "HEAD",
+      // trigger intersection observer
+      cy.scrollTo("top")
+      cy.wait(100)
+      cy.scrollTo("bottom", {
+        duration: 500,
       })
-      expect(res.ok).to.be.true
-      if (expectation.width) {
-        expect(Math.ceil(images[i].getBoundingClientRect().width)).to.be.equal(
-          expectation.width
-        )
-      }
-      if (expectation.height) {
-        expect(Math.ceil(images[i].getBoundingClientRect().height)).to.be.equal(
-          expectation.height
-        )
-      }
-    }
-  }
+      cy.wait(500)
+    })
 
-  it(`should render correct dimensions`, () => {
-    cy.get('[data-testid="public"]').then(async $urls => {
-      const urls = Array.from($urls.map((_, $url) => $url.getAttribute("href")))
+    async function testImages(images, expectations) {
+      for (let i = 0; i < images.length; i++) {
+        const expectation = expectations[i]
 
-      for (const url of urls) {
-        const res = await fetch(url, {
+        const res = await fetch(images[i].currentSrc, {
           method: "HEAD",
         })
         expect(res.ok).to.be.true
+        if (expectation.width) {
+          expect(
+            Math.ceil(images[i].getBoundingClientRect().width)
+          ).to.be.equal(expectation.width)
+        }
+        if (expectation.height) {
+          expect(
+            Math.ceil(images[i].getBoundingClientRect().height)
+          ).to.be.equal(expectation.height)
+        }
       }
-    })
-
-    cy.get(".resize").then(async $imgs => {
-      await testImages(Array.from($imgs), [
-        {
-          width: 100,
-          height: 133,
-        },
-        {
-          width: 100,
-          height: 160,
-        },
-        {
-          width: 100,
-          height: 67,
-        },
-      ])
-    })
+    }
 
-    cy.get(".fixed").then(async $imgs => {
-      await testImages(Array.from($imgs), [
-        {
-          width: 100,
-          height: 133,
-        },
-        {
-          width: 100,
-          height: 160,
-        },
-        {
-          width: 100,
-          height: 67,
-        },
-      ])
-    })
+    it(`should render correct dimensions`, () => {
+      cy.get('[data-testid="public"]').then(async $urls => {
+        const urls = Array.from(
+          $urls.map((_, $url) => $url.getAttribute("href"))
+        )
 
-    cy.get(".constrained").then(async $imgs => {
-      await testImages(Array.from($imgs), [
-        {
-          width: 300,
-          height: 400,
-        },
-        {
-          width: 300,
-          height: 481,
-        },
-        {
-          width: 300,
-          height: 200,
-        },
-      ])
-    })
+        for (const url of urls) {
+          const res = await fetch(url, {
+            method: "HEAD",
+          })
+          expect(res.ok).to.be.true
+        }
+      })
 
-    cy.get(".full").then(async $imgs => {
-      await testImages(Array.from($imgs), [
-        {
-          height: 1229,
-        },
-        {
-          height: 1478,
-        },
-        {
-          height: 614,
-        },
-      ])
-    })
-  })
+      cy.get(".resize").then(async $imgs => {
+        await testImages(Array.from($imgs), [
+          {
+            width: 100,
+            height: 133,
+          },
+          {
+            width: 100,
+            height: 160,
+          },
+          {
+            width: 100,
+            height: 67,
+          },
+        ])
+      })
 
-  it(`should render a placeholder`, () => {
-    cy.get(".fixed [data-placeholder-image]")
-      .first()
-      .should("have.css", "background-color", "rgb(232, 184, 8)")
-    cy.get(".constrained [data-placeholder-image]")
-      .first()
-      .should($el => {
-        expect($el.prop("tagName")).to.be.equal("IMG")
-        expect($el.prop("src")).to.contain("data:image/jpg;base64")
+      cy.get(".fixed").then(async $imgs => {
+        await testImages(Array.from($imgs), [
+          {
+            width: 100,
+            height: 133,
+          },
+          {
+            width: 100,
+            height: 160,
+          },
+          {
+            width: 100,
+            height: 67,
+          },
+        ])
       })
-    cy.get(".constrained_traced [data-placeholder-image]")
-      .first()
-      .should($el => {
-        expect($el.prop("tagName")).to.be.equal("IMG")
-        expect($el.prop("src")).to.contain("data:image/svg+xml,%3csvg")
+
+      cy.get(".constrained").then(async $imgs => {
+        await testImages(Array.from($imgs), [
+          {
+            width: 300,
+            height: 400,
+          },
+          {
+            width: 300,
+            height: 481,
+          },
+          {
+            width: 300,
+            height: 200,
+          },
+        ])
       })
-    cy.get(".full [data-placeholder-image]")
-      .first()
-      .should($el => {
-        expect($el.prop("tagName")).to.be.equal("DIV")
-        expect($el).to.be.empty
+
+      cy.get(".full").then(async $imgs => {
+        await testImages(Array.from($imgs), [
+          {
+            height: 1229,
+          },
+          {
+            height: 1478,
+          },
+          {
+            height: 614,
+          },
+        ])
       })
-  })
-})
+    })
+
+    it(`should render a placeholder`, () => {
+      cy.get(".fixed [data-placeholder-image]")
+        .first()
+        .should("have.css", "background-color", "rgb(232, 184, 8)")
+      cy.get(".constrained [data-placeholder-image]")
+        .first()
+        .should($el => {
+          expect($el.prop("tagName")).to.be.equal("IMG")
+          expect($el.prop("src")).to.contain("data:image/jpg;base64")
+        })
+      cy.get(".constrained_traced [data-placeholder-image]")
+        .first()
+        .should($el => {
+          // traced falls back to DOMINANT_COLOR
+          expect($el.prop("tagName")).to.be.equal("DIV")
+          expect($el).to.be.empty
+        })
+      cy.get(".full [data-placeholder-image]")
+        .first()
+        .should($el => {
+          expect($el.prop("tagName")).to.be.equal("DIV")
+          expect($el).to.be.empty
+        })
+    })
+  }
+)

e2e-tests/production-runtime/cypress/integration/static-image/traced.js

@@ -1,7 +1,12 @@
 const tracedTestId = `image-traced`
 
-Cypress.on('uncaught:exception', (err) => {
-  if ((err.message.includes('Minified React error #418') || err.message.includes('Minified React error #423') || err.message.includes('Minified React error #425')) && Cypress.env(`TEST_PLUGIN_OFFLINE`)) {
+Cypress.on("uncaught:exception", err => {
+  if (
+    (err.message.includes("Minified React error #418") ||
+      err.message.includes("Minified React error #423") ||
+      err.message.includes("Minified React error #425")) &&
+    Cypress.env(`TEST_PLUGIN_OFFLINE`)
+  ) {
     return false
   }
 })
@@ -11,12 +16,14 @@ describe(`fixed`, () => {
     cy.visit(`/static-image/traced`).waitForRouteChange()
   })
 
-  it(`renders a traced svg`, () => {
+  it(`traced svg (falls back to DOMINANT_COLOR)`, () => {
     cy.getTestElement(tracedTestId)
-      .find(`.gatsby-image-wrapper > img`)
-      .should(`have.attr`, `src`)
-      .and(src => {
-        ;[`data:image/svg+xml`].forEach(part => expect(src).to.include(part))
+      .find(`.gatsby-image-wrapper > [data-placeholder-image]`)
+      .first()
+      .should($el => {
+        // traced falls
+        expect($el.prop("tagName")).to.be.equal("DIV")
+        expect($el).to.be.empty
       })
   })
 

examples/using-contentful/package.json

@@ -30,6 +30,7 @@
   "scripts": {
     "develop": "gatsby develop",
     "build": "gatsby build",
+    "clean": "gatsby clean",
     "start": "gatsby serve"
   }
-}
+}

packages/gatsby-plugin-image/src/resolver-utils.ts

@@ -202,9 +202,9 @@ export function getGatsbyImageFieldConfig<TSource, TContext, TArgs>(
         type: ImagePlaceholderType.name,
         description: stripIndent`
             Format of generated placeholder image, displayed while the main image loads.
-            BLURRED: a blurred, low resolution image, encoded as a base64 data URI (default)
-            DOMINANT_COLOR: a solid color, calculated from the dominant color of the image.
-            TRACED_SVG: a low-resolution traced SVG of the image.
+            BLURRED: a blurred, low resolution image, encoded as a base64 data URI.
+            DOMINANT_COLOR: a solid color, calculated from the dominant color of the image (default).
+            TRACED_SVG: deprecated. Will use DOMINANT_COLOR.
             NONE: no placeholder. Set the argument "backgroundColor" to use a fixed background color.`,
       },
       formats: {