next/image produces invalid HTML according to W3C (again)

[theoludwig]

Run next info (available from version 12.0.8 and up)

Operating System:
  Platform: linux
  Arch: x64
  Version: #29-Ubuntu SMP Wed Jan 12 17:36:47 UTC 2022
Binaries:
  Node: 16.13.2
  npm: 8.3.2
  Yarn: 1.22.15
  pnpm: 6.11.0
Relevant packages:
  next: 12.0.9
  react: 17.0.2
  react-dom: 17.0.2

What version of Next.js are you using?

12.0.9

What version of Node.js are you using?

16.13.2

What browser are you using?

N/A

What operating system are you using?

N/A

How are you deploying your application?

N/A

Describe the Bug

Using next@12.0.7 yields no invalid HTML errors on the W3C Markup Validation Service about next/image.

After upgrading to next@12.0.9, there is now this kind of error:

Error: Bad value data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 version=%271.1%27 width=%271000%27 height=%271000%27/%3e 
for attribute src on element img: Illegal character in scheme data: space is not allowed.

There was already an error similar to this one before but that has been fixed: #18850
We might add a new e2e test or CI job to ensure that next produces valid HTML according to W3C, so it's not happening again as it is the case now...

Expected Behavior

No errors. Valid HTML according to W3C.

To Reproduce

1. npx create-next-app --example image-component image-app
2. cd image-app
3. npm run build
4. npm run start
5. Go to localhost:3000 and copy/paste the HTML in The W3C Markup Validation Service or use the
   html-w3c-validator CLI.

[theoludwig]

It might be because of this PR: #33218.
We should probably revert this PR or find a solution.

[sokra]

We should be able to encode space with +. Do you want to send a PR for that?

[theoludwig]

Sure, I can open a PR (by first working to have a failing test)! 👍
@sokra As far as I understood, the problematic line is this one:

next.js/packages/next/client/image.tsx

Line 599 in 6b11a58

sizerSvgUrl = `data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 version=%271.1%27 width=%27${widthInt}%27 height=%27${heightInt}%27/%3e`

Is adding + instead of space would resolve the issue?
So something like that:

sizerSvgUrl = `data:image/svg+xml,%3csvg+xmlns=%27http://www.w3.org/2000/svg%27+version=%271.1%27+width=%27${widthInt}%27+height=%27${heightInt}%27/%3e`

If it is what is wanted, yes I will open a PR. 😄

[theoludwig]

PR is up: #33825

Thanks for your help to resolve this issue, could you review the PR, please ? 😄 @sokra

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.