title: SVG in Canvas using fabric js and FileReader API
body: <p>i try to reader <strong>SVG</strong> in Canvas using <strong>fabric js</strong> and <strong>File Reader API</strong></p>
  
  <p>the following code for Image and it will work with SVG but it will not use full functionality like change color (<em>setFill</em>) and other which work only for SVGs</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var reader = new FileReader(), input = document.getElementById('imgFile');
        
        reader.onload = function (event) {
         //loadSVGFromString
          var imgObj = new Image();
          imgObj.src = event.target.result;
          imgObj.onload = function () {
              // start fabricJS stuff
              var coord = getRandomLeftTop();
              var image = new fabric.Image(imgObj);
              if($scope.ImgOption != 'bg'){
               image.set({
                   left: coord.left,
                   top: coord.top
               });
               canvas.add(image);
              }else{
               image.set({
                scaleY: canvas.height / imgObj.height,
                    scaleX: canvas.width / imgObj.width
               });
               canvas.setBackgroundImage(image, canvas.renderAll.bind(canvas));
              }
              // end fabricJS stuff
           }
        }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt;
  
  &lt;script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>