FabricJS - Set the height and width of an imported svg

Question

My canvas is 1000 x 1000 and I want to have the imported svg be 500 x 500 but it's svg size is 300 x 300 (size of the artboard in illustrator)

How do I just object.setHeight(400) on this loaded svg? When I do something like that the selection box ends up padded or misaligned with the object.

addShapeObject = function(canvas, element, scope) {
    loadingElementIds.push(element.id);
    fabric.loadSVGFromURL('/lib/svg/' + element.filename + '.svg', function(objects, options) {
        var object = fabric.util.groupSVGElements(objects, options);
        object.top = element.top;
        object.left = element.left;


        object.rotatingPointOffset = 20;
        object.scaleY = element.height / object.height;
        object.scaleX = element.width / object.width;

        object.padding = 5;

        canvas.add(object).renderAll();
        sortObjects(canvas);
        setObjectsZoom(canvas, scope);
    });
},

Example SVG:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
    <!ENTITY ns_flows "http://ns.adobe.com/Flows/1.0/">
    <!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
    <!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
    <!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
]>
<svg version="1.1" id="Layer_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
     x="0px" y="0px" width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
<path fill="#010101" d="M150.001,6.515c-5.545,0-10.147,3.733-11.581,8.84l-29.384,90.766h-96.49
    c-6.664,0-11.952,5.793-11.952,12.512c0,4.109,2.054,7.781,5.167,9.963c1.927,1.307,77.938,56.835,77.938,56.835
    S54.507,275.08,53.94,276.509c-0.432,1.306-0.742,2.742-0.742,4.229c0,6.726,5.412,12.141,12.075,12.141
    c2.553,0,4.917-0.809,6.912-2.176l77.816-56.655c0,0,76.073,55.408,77.817,56.655c1.986,1.367,4.358,2.176,6.906,2.176
    c6.662,0,12.078-5.477,12.078-12.141c0-1.487-0.308-2.924-0.748-4.229c-0.56-1.429-29.752-91.077-29.752-91.077
    s76.006-55.529,77.938-56.835c3.113-2.182,5.166-5.854,5.166-10.024c0-6.657-5.166-12.45-11.83-12.45h-96.488l-29.512-90.766
    C160.15,10.249,155.537,6.515,150.001,6.515z"/>
<path fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M74.5,83.5"/>
</svg>

Answer 1

You can not change width and height of a imported SVG ( pathGroup ). Widht and Height are defined by the unscaled pieces that constitute the SVG itself. What you can do is loading the SVG and then scale it properly.

scaleToWidth(x)
scaleToHeight(x)