On my page, I have a button and a canvas with the following attributes -

<button onclick="openSVG()">Open</button>
<canvas></canvas>

On clicking the button, the openSVG() function is supposed to

• Let the user select and open an SVG file from their local hard drive (previously created using FabricJS)
• Read the contents of the SVG file using FileReader and storing it in a variable
• Using that variable to populate the canvas using fabric.loadSVGFromString() method

Now clicking on Open button opens a file selection window but doesnt draw objects into canvas. Here's my openSVG() function -

function openSVG() {

// importing file
var input = $(document.createElement('input'));
input.attr("id", "mySVGFile")
input.attr("type", "file");
input.trigger('click');

//storing file contents in var using FileReader
var myInputFile = document.getElementById('mySVGFile');
var myFile = myInputFile.files[0];

var fr = new FileReader();
fr.onload = function(){

    var canvasD = this.result;

    //loading data from var to canvas
    fabric.loadSVGFromString(canvasD, function(objects, options) {
        var obj = fabric.util.groupSVGElements(objects, options);
        canvas.add(obj).renderAll();
    });
};

fr.readAsText(myFile); }

I'm new to FileReader. There's no errors in console so I can't even tell where I'm going wrong. Does my approach not work? Is there a better way to achieve what I want.

On my page, I have a button and a canvas with the following attributes -

<button onclick="openSVG()">Open</button>
<canvas></canvas>

On clicking the button, the openSVG() function is supposed to

• Let the user select and open an SVG file from their local hard drive (previously created using FabricJS)
• Read the contents of the SVG file using FileReader and storing it in a variable
• Using that variable to populate the canvas using fabric.loadSVGFromString() method

Now clicking on Open button opens a file selection window but doesnt draw objects into canvas. Here's my openSVG() function -

function openSVG() {

// importing file
var input = $(document.createElement('input'));
input.attr("id", "mySVGFile")
input.attr("type", "file");
input.trigger('click');

//storing file contents in var using FileReader
var myInputFile = document.getElementById('mySVGFile');
var myFile = myInputFile.files[0];

var fr = new FileReader();
fr.onload = function(){

    var canvasD = this.result;

    //loading data from var to canvas
    fabric.loadSVGFromString(canvasD, function(objects, options) {
        var obj = fabric.util.groupSVGElements(objects, options);
        canvas.add(obj).renderAll();
    });
};

fr.readAsText(myFile); }

I'm new to FileReader. There's no errors in console so I can't even tell where I'm going wrong. Does my approach not work? Is there a better way to achieve what I want.

• javascript
• html
• canvas
• svg
• fabricjs

1 Answer 1

Here is a much more easier and better approach using URL.createObjectURL() method ...

var canvas = new fabric.Canvas('c');

function openSVG(e) {
   var url = URL.createObjectURL(e.target.files[0]);
   fabric.loadSVGFromURL(url, function(objects, options) {
      objects.forEach(function(svg) {
         svg.set({
            top: 90,
            left: 90,
            originX: 'center',
            originY: 'center'
         });
         svg.scaleToWidth(50);
         svg.scaleToHeight(50);
         canvas.add(svg).renderAll();
      });
   });
}

canvas{margin-top:5px;border:1px solid #ccc}

<script src="https://cdnjs.cloudflare./ajax/libs/fabric.js/1.7.11/fabric.min.js"></script>
<input type="file" onchange="openSVG(event)">
<canvas id="c" width="180" height="180"></canvas>