Having spent three days researching and failing to enable user-generated svg upload to the server, I'm completely stumped.

I've built an HTML and Javascript site for users to create a basic model of a vehicle, by entering dimensions into a form.

Those dimensions are then used to edit each svgs 'x' and 'y' coordinates.

I've had success with converting the nested svg to base64 and then downloading to the users filesystem using a button (although it isn't working on JSFiddle), and also experimented with saving the file to local storage.

The output javascript has proven to work absolutely fine, but I just can't figure out how to get that output onto the server in any way.

I'd like to be able to have a user submit their edited svg to the server, where I can then reference it on another page.

I'm fairly unfamiliar with server side code and practise but so far have tried the common suggestions such as:

  $.ajax({
  url: ajaxurl,
  type: 'POST',...

as well as various iterations of PHP code to receive the svg.

Here's the (mostly) working Fiddle of my site so far.

JSFiddle

Edit for better context

This is a very simplified version of the nested svg that I'm trying to export to server

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" id="Layer_1">
    <rect id="rect1"/>
    <rect id="rect2"/>
</svg>

Export is attached to this button

<button id="downloadSVG">Download</button>

And then the export script

 <script>
                    function downloadSVGAsText() {
                        const svg = document.querySelector('svg');
                        const base64doc = btoa(unescape(encodeURIComponent(svg.outerHTML)));
                        const a = document.createElement('a');
                        const e = new MouseEvent('click');
                        a.download = 'download.svg';
                        a.href = 'data:image/svg+xml;base64,' + base64doc;
                        a.dispatchEvent(e);
                    }

                    const downloadSVG = document.querySelector('#downloadSVG');
                    downloadSVG.addEventListener('click', downloadSVGAsText);

                </script>

Simplified JSFiddle

What I'm completely lost about is how to post the nested svg to the server, so that users can edit or use it later.

So far I understand that I will need Ajax to pass the Base64 image from javascript to PHP file on the server, then the PHP file will place the image on to the server. I just don't seem to be able to make it work. The main issue is how to get the generated Base64 to PHP. The rest I'm happy to work out.