Next/future/image blur placeholder have undefined to view box SVG width & height

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #25-Ubuntu SMP Wed Mar 30 15:54:22 UTC 2022
Binaries:
  Node: 18.9.0
  npm: 8.19.1
  Yarn: 1.22.10
  pnpm: N/A
Relevant packages:
  next: 12.3.1
  eslint-config-next: 12.3.1
  react: 18.2.0
  react-dom: 18.2.0

What browser are you using? (if relevant)

Brave Version 1.44.108 Chromium: 106.0.5249.103

How are you deploying your application? (if relevant)

Vercel

Describe the Bug

Wrong SVG viewBox generated when using placeHolder=‘blur’ with image filling his parent

• The blur base64

  • 

• The SVG using the blur base64

  • 

As we can see in the src/blur.svg the viewBox have weird values

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 undefined undefined'>
    <filter id='b' color-interpolation-filters='sRGB'>
        <feGaussianBlur stdDeviation='20'/>
        <feComponentTransfer>
            <feFuncA type='discrete' tableValues='1 1'/>
        </feComponentTransfer>
    </filter>
    <image filter='url(#b)' x='0' y='0' height='100%' width='100%' href='data:image/jpeg;base64[...]'/>
</svg>

So the svg have this weird artifacts and the black borders

Expected Behavior

I expected the placeHolder to be rendered without artefacts and with a corect viewBox for the SVG not undefined in width & height

Link to reproduction

https://next-future-image-issue-sigma.vercel.app/

To Reproduce

A repo with all the need to reproduce https://github.com/Balkeo/next-future-image-issue

[styfle]

Thanks for reporting! We’ll get this fixed in #41573

[github-actions[bot]]

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.