Next.js Image isn't displayed inside svg foreignObject in Safari

Question

I have big svg grid and some cells contains image. I use Next.js Image component for performance and wrap it in foreignObject tag. In Chrome browser this solution works fine, but in Safari I don't see any images.

Code of grid cell is below:

<svg
    xmlns="http://www.w3.org/2000/svg"
    xmlnsXlink="http://www.w3.org/1999/xlink"
    viewBox={`0 0 ${someValue} ${someValue}`}
>
    <g>
        // ...cells

        <foreignObject
            x={someValue}
            y={someValue}
            width={someValue}
            height={someValue}
        >
            <Image
                quality={50}
                src={`.../api/download/${land.mediaId}`}
                alt="Avatar picture"
                layout="fixed"
                width={someValue}
                height={someValue}
            />
        </foreignObject>

        // ...cells
    </g>
</svg>

If I will use standard svg image tag without foreignObject then everything works fine in all browsers, but this solution reduces performance because grid can contain around thousand images.

How I can solve this issue?