Convert SVG Data to SVG File that can be uploaded

Question

Using canvas.toSVG as listed here: Creating a backing canvas with FabricJS I am able to convert my HTML5 Canvas to SVG Data that looks like this by calling canvas.toSVG():

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="85.999967in" height="55.812440in" style="background-color: #ffffff" viewBox="0 0 650 421.84" xml:space="preserve">
<desc>Created with Fabric.js 1.6.0-rc.1</desc>
<defs></defs>
<g transform="translate(516.24 217.93) scale(0.47 0.47)">
<image xlink:href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAyADIAAD/2wBDAAEBAQEBAQEBAQEBAQEB…lq4JVWvJFVClTiCkAAgF9IIBHyAQACB/oAf6+gMzMMVWDEN7kh5AkN0dEwR3++iCe/+ez9f//Z" x="-200" y="-193.5" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" width="400" height="387" preserveAspectRatio="none"></image>
</g>
</svg>

However, I need to be able to upload a .svg file via AJX or Node (i.e Request, or Unirest) to a vendors API.

How do I convert the SVG/XML Data above to a SVG File that can be saved then uploaded?

This is what I was using for .png, but when I used a multiplier, large canvas upscaling would crash the browser, so that is why I am attempting toSVG. The png is automatically base64 encoded, so it is decoded in Node, streamed to a temp directory, then posted as follows:

Client Side:

 // Multiply Canvas
        var img = canvas.toDataURL({
            // Multiplier appears to accept decimals
            format: 'png',
            multiplier: 5        
});

 $http.post('/postVendor', { filename: filename, file: img }).success(function (data) {...

Server-Side/Node:

app.post('/postVendor', function (req, res, next) {

    var filename = req.body.filename;
    var file = req.body.file;
    var fileloc = 'upload/' + filename;

    //var base64Data;
    fileBuffer = decodeBase64Image(file);

    fs.writeFileSync('upload/' + filename, fileBuffer.data);

 unirest.post('http://myvendorsAPI/ws/fileuploads')
.headers({ 'Content-Type': 'multipart/form-data' })
.field('filename', filename)// Form field
.attach('file', fileloc)// Attachment
.end(function (response) {
        console.log(response.body);
        //fs.unlinkSync(fileloc);
        res.send(response.body);
    });
})

Since toSVG outputs XML, how would I make this into a SVG file, and how would it be uploaded?

Answer 1

var file = canvas.toSVG({
  // Multiplier appears to accept decimals
  width: '200mm',
  height: '300mm'      
});

$http.post('/postVendor', {
  filename: 'myfile.svg', file: file 
}).success(function (data) {...}

on the server side, there is no need to decode the base64 encoding because you are just uploading text and URL encoding from ajax should be enough.