Обработка тайлов на SVG. Видны прорези между ними, что делать?

Всем привет. Перейду сразу к делу. Решил создать тестовую tilesheet картинку, разрезать её на тайлы и засетать в SVGшку. Создать что-то типа "карты" для игры. Выглядит картинка вот так:

На пустом месте в будущем будут остальные тайлы. Но не суть. Проблема в следующем, когда я размещаю тайлы и стыкую их впритык, точно попиксельно, то получается вот такое:

Проблема в прорезях между ними.

Аттрибут shape-rendering="crispEdges" помог справится с такой же проблемой когда я ставил так черные векторные rectы, их тоже видно на картинке выше (угол из чёрных ректов). Для данного случая, как видно на картинке, я попытался засетать свойство для тэга image image-rendering: pixelated; Вроде, это немного улучшило их вид, но всё равно прорези остались. В реакте это выглядит примерно вот так (если конечно это вам необходимо):

return (
            <g key={index}>
                {new Array(posY).fill(null).map((_, y) => {
                    return new Array(posX).fill(null).map((_, x) => {
                        const add = y > 0 ? y * posX : 0
                        const currentTileId = matrix[x + add] || 0
                        return (
                            <svg 
                                x={x * cell.x} 
                                y={y * cell.y}
                                width={cell.x}
                                height={cell.y}
                                data-tile={currentTileId}
                                viewBox={`${(currentTileId * 64)} ${0} ${cell.x} ${cell.y}`}
                            >
                                <image 
                                    style={{ imageRendering: "pixelated" }}
                                    href={image}
                                />
                            </svg>
                        )
                    })
                })}
            </g>
        )

Учтите, код ещё крайне сырой, например тайлы по оси Y на тайлшите еще не считываются на viewBox, и там стоит просто 0, а я лишь решаю проблемы по мере их поступления.

В общем вопрос тот же: можно ли хоть как-то избавиться от этих прорезей? Читал, что это возможно связано с сглаживанием на картинках. Возможно стоит попробовать какие-то альтернативные методы вставки тайлов в svg? Canvas не рассматриваем, слишком много нужно переделать.

UPD: Масштабирование 1920x1080 на общем вьюбоксе. Т.е. пропорция 16/9. Вьюбокс смещен по x y на -960(+32) -540(+32) чтобы центрировать игрока. Также для svg добавил свойство aspect-ratio 16/9 чтобы постоянно поддерживать данную пропорцию.

Сделал предположение, что необходимо с помощью пропорции изменить высоту для одного тайла. 64 * 1080 / 1920 = 36. Изменение размеров тайлов на 64x36 не помогло.

UPD2: Сделал jsfiddle чтобы можно было рассмотреть проблему. https://jsfiddle.net/748e5Laf/2/ На таком приближении прорези видно на хроме, а вот на фаерфокс, только лишь одна.

UPD3: Сделал еще один jsfiddle, приблизил и сместил немного игрока, чтобы можно было рассмотреть проблему. https://jsfiddle.net/8pqca6nt/1/