Inline SVGs in CSS are not working

[Overbord]

I have an inline SVG set as a background image using CSS, but modern screenshot can't seem to 'see' it. This is a screenshot:

And this is the generated image:

[Overbord]

An example of the type of CSS I'd like to be using:

.square.blue-bubble-bottom-left {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1080 1080"%3E%3Cpath fill="none" d="M0,657C0,438,0,219,0,0c360,0,720,0,1080,0c0,360,0,720,0,1080c-186.7,0-373.3,0-560,0c0.3-1.5,0.4-3.2,0.9-4.6 c19.7-58.2,24.6-117.7,13.7-178.2c-13.7-76.2-48.2-141.9-104.9-194.5c-90.3-83.8-196.9-113-317.7-90.1C71.9,620.2,34.8,635.9,0,657z"%3E%3C/path%3E%3Cpath fill="%23182430" d="M0,657c34.8-21.1,71.9-36.8,112-44.4c120.8-22.9,227.4,6.3,317.7,90.1C486.5,755.4,521,821,534.6,897.2 c10.9,60.5,6,119.9-13.7,178.2c-0.5,1.5-0.6,3.1-0.9,4.6c-173.2,0-346.5,0-520,0C0,939,0,798,0,657z"%3E%3C/path%3E%3C/svg%3E');
}

[qq15725]

Playground

There doesn't seem to be any errors.

[Overbord]

See sample here:

https://dev.overbord.no/sandbox/social/ - please choose Square, then Big Picture, then Bottom Left, which has the SVG in the CSS.

This is the capture code:

    jQuery('#download').click(function() {
        jQuery('#socialcanvas').removeClass('canvas-zoom-out');
        modernScreenshot.domToJpeg(document.getElementById('socialcanvas'), { quality: 1, width:canvWidth, height:canvHeight })
        .then(dataUrl => {
        var link = document.createElement('a');
        link.download = shapetrimmed + ' - ' + fileTitle + '.jpeg';
        link.href = dataUrl;
        link.click();
        jQuery('#socialcanvas').addClass('canvas-zoom-out');
        });
    });