How to show the full SVG using Fabricjs?

First time user of FabricJs and I’m trying to load these SVG files using FabricJS as shown in their examples

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

var img = fabric.Image.fromURL('http://instathumbs.com.s3.amazonaws.com/assets/items/Image/Graphics/blueprint.svg?1', function(item) {
  canvas.add(item);
  canvas.renderAll();
}, {crossOrigin: "anonymous"});

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.0.0-rc.1/fabric.js"></script>

<div>
  Original Image:
  <img src="http://instathumbs.com.s3.amazonaws.com/assets/items/Image/Graphics/blueprint.svg" width="150" height="150" />
</div>

<div style="background: red">
  Canvas:
  <canvas id="c" width="500" height="500"></canvas>
</div>

If you run the code snippet you will see that only the top part of the image is loaded instead of the entire SVG. I tried doing this with the other method where I create a new Image() and then use new Fabric.Image(img.. with same results?

My question is how do I show the entire image inside the resizer? Is this a bug in FabricJS or there is something I’m doing wrong.

I’ve tried it with dozens of different SVG and it’s always the case.

Answer

var canvas = new fabric.Canvas('c');
var site_url =  'https://instathumbs.com.s3.amazonaws.com/assets/items/Image/Graphics/blueprint.svg?1';
fabric.loadSVGFromURL(site_url, function(objects, options) {
    
    var obj = fabric.util.groupSVGElements(objects, options);
    obj.set({
     left:50,top:50,scaleX:4,scaleY:4
    })
    canvas.add(obj).renderAll();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.0.0-rc.1/fabric.js"></script>

<div>
  Original Image:
  <img src="http://instathumbs.com.s3.amazonaws.com/assets/items/Image/Graphics/blueprint.svg" width="150" height="150" />
</div>

<div style="background: red">
  Canvas:
  <canvas id="c" width="500" height="500"></canvas>
</div>

You need to use loadSVGFromURL

Advertisement

Answer