layout: CONSTRAINED generates invalid HTML

[jfo8001]

Preliminary Checks

• This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

We are we are getting HTML validation errors when using the GatsbyImage component - and I've tracked it down to the placeholder SVG.

Error: Bad value “data:image/svg+xml;charset=utf-8,%3Csvg height='91' width='128' xmlns='http://www.w3.org/2000/svg' version='1.1'%3E%3C/svg%3E” for attribute “src” on element “img”: Illegal character in scheme data: space is not allowed.

Reproduction Link

(n/a)

Steps to Reproduce

Using: "gatsby-plugin-image": "^2.19.0",
And the default component (with placeholder=NONE, layout=CONSTRAINED)

A dummy SVG is injected into the dom to save space by LayoutWrapper. The image data for this SVG is incorrectly escaped.

Expected Result

No lighthouse/html validation issues with placeholder components in GatsbyImage.

Actual Result

The image generated is

<img alt="" role="presentation" aria-hidden="true" src="data:image/svg+xml;charset=utf-8,%3Csvg height=&#x27;1476&#x27; width=&#x27;2412&#x27; xmlns=&#x27;http://www.w3.org/2000/svg&#x27; version=&#x27;1.1&#x27;%3E%3C/svg%3E" style="max-width:100%;display:block;position:static"/>

Which appears to be the placeholder generated by this block of code

gatsby/packages/gatsby-plugin-image/src/components/layout-wrapper.tsx

Line 85 in 20ef7c1

src={`data:image/svg+xml;charset=utf-8,%3Csvg height='${height}' width='${width}' xmlns='http://www.w3.org/2000/svg' version='1.1'%3E%3C/svg%3E`}

The error appears for us in lighthouse, https://validator.w3.org/nu/#textarea, and also when we run html-validate-cli against the public/index.html for the site.

The error disappears when I swap the query in GQL to FULL_WIDTH. This skips the layout sizer stuff.

       featuredImage {
                                img {
                                    asset {
                                        gatsbyImageData(
                                            placeholder: NONE
                                            layout: FULL_WIDTH 
                                        )
                                    }
                                }
                            }

Environment

System:
    OS: Linux 5.15 Debian GNU/Linux 11 (bullseye) 11 (bullseye)
    CPU: (8) arm64 unknown
    Shell: 5.1.4 - /bin/bash
  Binaries:
    Node: 16.18.1 - /tmp/yarn--1670883985695-0.49910582074023613/node
    Yarn: 1.22.19 - /tmp/yarn--1670883985695-0.49910582074023613/yarn
    npm: 8.19.2 - ~/.nvm/versions/node/v16.18.1/bin/npm
  Languages:
    Python: 2.7.18 - /usr/bin/python
  npmPackages:
    gatsby: ^4.19.2 => 4.24.8
    gatsby-plugin-algolia: ^0.26.0 => 0.26.0
    gatsby-plugin-feed-generator: ^2.0.5 => 2.0.5
    gatsby-plugin-gatsby-cloud: ^4.19.0 => 4.24.1
    gatsby-plugin-google-gtag: ^4.19.0 => 4.24.0
    gatsby-plugin-google-tagmanager: ^4.19.0 => 4.24.0
    gatsby-plugin-image: ^2.19.0 => 2.24.0
    gatsby-plugin-layout: ^3.19.0 => 3.24.0
    gatsby-plugin-mailchimp: ^5.1.2 => 5.2.2
    gatsby-plugin-manifest: ^4.19.0 => 4.24.0
    gatsby-plugin-react-helmet: ^5.19.0 => 5.24.0
    gatsby-plugin-remove-serviceworker: ^1.0.0 => 1.0.0
    gatsby-plugin-sharp: ^4.19.0 => 4.24.0
    gatsby-plugin-sitemap: ^5.19.0 => 5.24.0
    gatsby-plugin-styled-components: ^5.19.0 => 5.24.0
    gatsby-plugin-tslint: ^0.0.2 => 0.0.2
    gatsby-plugin-typegen: ^3.0.0 => 3.1.0
    gatsby-plugin-typescript: ^4.19.0 => 4.24.0
    gatsby-plugin-webpack-bundle-analyser-v2: ^1.1.27 => 1.1.30
    gatsby-source-filesystem: ^4.19.0 => 4.24.0
    gatsby-source-graphql: ^4.19.0 => 4.24.0
    gatsby-source-instagram-all: ^5.2.1 => 5.2.1
    gatsby-source-lever: ^4.24.0 => 4.24.0
    gatsby-source-sanity: ^7.4.2 => 7.5.1
    gatsby-transformer-sharp: ^4.19.0 => 4.24.0

Config Flags

No