How to set height and width of canvas from imported SVG

Question

I'm wondering how to use an imported svg's width/height to set up fabricjs's canvas's width/height

Here's an example:

const svg_data = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1500" height="800" viewBox="0 0 1500 800" xml:space="preserve">
<desc>Created with Fabric.js 3.6.3</desc>
<defs>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="rgb(255, 255, 255)"></rect>
<g transform="matrix(1 0 0 1 50 50)"  >
<rect style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;"  x="-50" y="-50" rx="0" ry="0" width="100" height="100" />
</g>
<g transform="matrix(1 0 0 1 50 50)"  >
<rect style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;"  x="-50" y="-50" rx="0" ry="0" width="100" height="100" />
</g>
<g transform="matrix(1 0 0 1 50 50)"  >
<rect style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;"  x="-50" y="-50" rx="0" ry="0" width="100" height="100" />
</g>
<g transform="matrix(1 0 0 1 50 50)"  >
<rect style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;"  x="-50" y="-50" rx="0" ry="0" width="100" height="100" />
</g>
<g transform="matrix(1 0 0 1 525.5 25.5)"  >
<rect style="stroke: rgb(0,0,0); stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,91,109); fill-rule: nonzero; opacity: 1;"  x="-475" y="-25" rx="0" ry="0" width="950" height="50" />
</g>
<g transform="matrix(1 0 0 1 25.5 75.5)"  >
<rect style="stroke: rgb(0,0,0); stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,91,109); fill-rule: nonzero; opacity: 1;"  x="-25" y="-75" rx="0" ry="0" width="50" height="150" />
</g>
<g transform="matrix(1 0 0 1 1425.5 175.5)"  >
<rect style="stroke: rgb(0,0,0); stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,91,109); fill-rule: nonzero; opacity: 1;"  x="-25" y="-75" rx="0" ry="0" width="50" height="150" />
</g>
</svg>`
const canvas = new fabric.Canvas("canvas");

this.fabric.loadSVGFromString(svg_data, (objects, options) => {
    canvas.add.apply(canvas, objects);
    canvas.renderAll();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js"></script>

<div>
  <canvas id="canvas" style="border: 3px solid black;"></canvas>
</div>

Answer 1

Just use the width/height you get in the options :

this.fabric.loadSVGFromString(svg_data, (objects, options) => {
  ...
  canvas.setHeight(options.height);
  canvas.setWidth(options.width);
  ...
});

const svg_data = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1500" height="800" viewBox="0 0 1500 800" xml:space="preserve">
<desc>Created with Fabric.js 3.6.3</desc>
<defs>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="rgb(255, 255, 255)"></rect>
<g transform="matrix(1 0 0 1 50 50)"  >
<rect style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;"  x="-50" y="-50" rx="0" ry="0" width="100" height="100" />
</g>
<g transform="matrix(1 0 0 1 50 50)"  >
<rect style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;"  x="-50" y="-50" rx="0" ry="0" width="100" height="100" />
</g>
<g transform="matrix(1 0 0 1 50 50)"  >
<rect style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;"  x="-50" y="-50" rx="0" ry="0" width="100" height="100" />
</g>
<g transform="matrix(1 0 0 1 50 50)"  >
<rect style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;"  x="-50" y="-50" rx="0" ry="0" width="100" height="100" />
</g>
<g transform="matrix(1 0 0 1 525.5 25.5)"  >
<rect style="stroke: rgb(0,0,0); stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,91,109); fill-rule: nonzero; opacity: 1;"  x="-475" y="-25" rx="0" ry="0" width="950" height="50" />
</g>
<g transform="matrix(1 0 0 1 25.5 75.5)"  >
<rect style="stroke: rgb(0,0,0); stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,91,109); fill-rule: nonzero; opacity: 1;"  x="-25" y="-75" rx="0" ry="0" width="50" height="150" />
</g>
<g transform="matrix(1 0 0 1 1425.5 175.5)"  >
<rect style="stroke: rgb(0,0,0); stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,91,109); fill-rule: nonzero; opacity: 1;"  x="-25" y="-75" rx="0" ry="0" width="50" height="150" />
</g>
</svg>`

const canvas = new fabric.Canvas("canvas");

this.fabric.loadSVGFromString(svg_data, (objects, options) => {
  canvas.setHeight(options.height);
  canvas.setWidth(options.width);
  canvas.add.apply(canvas, objects);
  canvas.renderAll();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js"></script>

<div>
  <canvas id="canvas" style="border: 3px solid black;"></canvas>
</div>