JSFiddle - React, Tailwind, and code Playground

HTML

<!-- change background from white to black to see what's going on -->

<!-- The SVG is large. The <rect> can be located a bit to the right of the center of the SVG -->
<!-- When BG is black, you can see a white edge on the left and bottom -->
<!-- When BG is white, you can see a dark edge on the top and right -->
<body style="background: white;">
    <div style="position: fixed; x: 0; y: 0;">
        <button onclick="whiteBG()">White BG</button>
        <button onclick="blackBG()">Black BG</button>
    </div>
    <svg height="1965" version="1.1" width="5760" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <defs>
            <pattern x="0" y="0" width="100%" height="100%" patternContentUnits="objectBoundingBox" id="patternSieyywid32k">
                <!-- image is base64 encoded 415 x 512 image -->
                <image ...

JavaScript

var whiteBG = function() {
    document.querySelector('body').style.background = '#FFF';
}

var blackBG = function() {
    document.querySelector('body').style.background = '#000';
}