title: Why are images very low quality when exporting with fabricjs?
body: <p>I am working on an application where I will need to export the canvas as an SVG at the end.</p>
  
  <p>When I add an image to the canvas, it shows with the expected quality, but when I export the canvas the image is completely blurred out.</p>
  
  <p>How can I prevent this?</p>
  
  <p>I have been playing with the setHeight/Width and scaleToHeight/Width, as well as with object caching and it doesn't seem to make any difference.</p>
  
  <p>How I am creating my canvas:</p>
  
  <pre><code>var canvas = new fabric.Canvas('canvas', {
          imageSmoothingEnabled: false
      });
  </code></pre>
  
  <p>How I am adding the image to the canvas:</p>
  
  <pre><code>fabric.Image.fromURL('hall1.svg', function (myImg) {
          let img1 = myImg.set({
              top: 0,
              left: 0,
              scaleX: 2,
              scaleY: 2
          });
          canvas.add(img1);
      });
  </code></pre>
  
  <p>How I am exporting the canvas:</p>
  
  <pre><code>$.ajax({
      method: 'post',
      url: '/path/to/project/svg.php',
      data: {
         preview: true,
         previewData: canvas.toSVG({ suppressPreamble: true })
      }
  })
  </code></pre>
  
  <pre><code> file_put_contents("../../preview.svg", $_POST['previewData']);
   echo 'preview.svg';
  </code></pre>
  
  <p><a href="https://i.imgur.com/gfEiydH.png" rel="nofollow noreferrer">Expected quality</a></p>
  
  <p><a href="https://i.imgur.com/kLRjj3g.png" rel="nofollow noreferrer">Actual quality</a></p>