Scaling svg images

We are using GoJS 1.4.5 and are having difficulty with scaling SVG images in IE11. We have a node template that we are placing an image in the lower right hand corner to indicate the status for the node. The SVG image file we are using is natively 32x32 pixels, but we need to resize it to 21x21 so it looks better. Note: the image is from a common image library our company uses so it’s not easy to get a custom one that is 21x21. In the example below it is the complete.svg image that is in question. For the latest version of Chrome it looks like this (which is correct):
<span style=“font-size:11.0pt;font-family:“Calibri”,“sans-serif”; mso-fareast-font-family:Calibri;mso-fareast-theme-font:minor-latin;mso-ansi-: EN-US;mso-fareast-:EN-US;mso-bidi-:AR-SA”>

But in IE11 it looks like this:

I have tried all the different suggestions on the Pictures link in the Intro section on the web site, and as you will see in the node template definition below I have tried setting the different values desiredSize, maxSize, scale, width, height. But nothing has worked. Here is the header section of the SVG file:

<svg version=“1.1” id=“Layer_1” xmlns=“SVG namespace” xmlns:xlink=“XLink namespace” x=“0px” y=“0px”
<span =“Apple-tab-span” style=“white-space:pre”> width=“32” height=“32” viewBox=“0 0 32 32” style=“enable-background:new 0 0 32 32;” xml:space=“preserve”>

And here is the node template definition (it is the Picture information at the bottom of the definition that is in question) Note: I have left all the different things I have tried commented out in the code:

var taskNodeTemplate =
    GO(go.Node, "Spot",
        new go.Binding("position","", getPosition),
        {
            selectionAdorned: false
        },
        // the main content:
        GO(go.Panel, "Vertical",
            GO(go.Shape, "RoundedRectangle",
                {
                    fill:  taskNodeFillColor,
                    strokeWidth: 2,
                    stroke: taskNodeStrokeColor,

},
new go.Binding(“width”, “width”),
new go.Binding(“height”, “height”),
)
),
GO(go.TextBlock, new go.Binding(“text”, “name”), {
margin: 5,
doubleClick: handleNodeDoubleClick,
font: nodeFont
}),
GO(go.Picture,
{
alignment: go.Spot.BottomRight,
desiredSize: new go.Size(21, 21),
source: “images/complete.svg”
// maxSize: new go.Size(21,21),
// minSize: new go.Size(21,21),
// scale: 0.5,

// width: 21,
// height: 21
// stretch: go.GraphObject.Fill,
// imageStretch: go.GraphObject.Uniform
},
)
);

Any suggestions (beside the obvious one of don’t use IE Wink ) would be greatly appreciated.

IE has some very odd bugs with SVG, but most of them so far have had workarounds.

Can I have the rest of the SVG file?

Here it is:

<?xml version="1.0" encoding="iso-8859-1"?>

<svg version=“1.1” id=“Layer_1” xmlns=“SVG namespace” xmlns:xlink=“XLink namespace” x=“0px” y=“0px”
<span =“Apple-tab-span” style=“white-space:pre”> width=“32” height=“32” viewBox=“0 0 32 32” style=“enable-background:new 0 0 32 32;” xml:space=“preserve”>

<span =“Apple-tab-span” style=“white-space:pre”>
<span =“Apple-tab-span” style=“white-space:pre”>
<span =“Apple-tab-span” style=“white-space:pre”>



<span =“Apple-tab-span” style=“white-space:pre”>
<span =“Apple-tab-span” style=“white-space:pre”>

<path style=“fill:url(#SVGID_2_);” d=“M15.5,1.5c-7.72,0-14,6.28-14,14c0,7.719,6.28,14,14,14c7.719,0,14-6.281,14-14
<span =“Apple-tab-span” style=“white-space:pre”> C29.5,7.78,23.219,1.5,15.5,1.5z M15.5,28.5c-7.168,0-13-5.832-13-13c0-7.168,5.832-13,13-13c7.168,0,13,5.832,13,13
<span =“Apple-tab-span” style=“white-space:pre”> C28.5,22.668,22.668,28.5,15.5,28.5z”/>

<span =“Apple-tab-span” style=“white-space:pre”>
<span =“Apple-tab-span” style=“white-space:pre”>
<span =“Apple-tab-span” style=“white-space:pre”>

<path style=“opacity:0.5;fill:url(#SVGID_3_);” d=“M12.675,24.587c-0.941,0-1.404-0.854-2.943-3.68
<span =“Apple-tab-span” style=“white-space:pre”> c-0.971-1.774-2.985-5.471-3.893-5.772c-0.492-0.164-0.791-0.673-0.693-1.185c0.146-0.746,2.14-2.285,3.191-2.285
<span =“Apple-tab-span” style=“white-space:pre”> c1.218,0,3.225,2.418,4.405,4.1c4.369-5.987,6.598-8.22,8.17-8.22c0.972,0,2.216,0.879,2.702,1.258c0.253,0.188,0.4,0.484,0.409,0.8
<span =“Apple-tab-span” style=“white-space:pre”> c0.004,0.314-0.134,0.616-0.375,0.818c-3.936,3.275-6.66,8.126-8.29,11.029C14.042,23.796,13.596,24.587,12.675,24.587
<span =“Apple-tab-span” style=“white-space:pre”> L12.675,24.587z”/>
<path style=“fill:#FFFFFF;” d=“M22.986,9.623c-6.224,5.186-9.398,13.923-10.311,13.923c-0.808,0-4.337-8.673-6.507-9.398
<span =“Apple-tab-span” style=“white-space:pre”> c-0.063-0.02,1.446-1.446,2.169-1.446c0.722,0,3.374,3.075,4.337,4.881c0.056,0.105,6.151-8.997,8.237-8.997
<span =“Apple-tab-span” style=“white-space:pre”> C21.633,8.586,22.986,9.623,22.986,9.623z”/>

Ahh I see what it is, I should have known.

Your desired size is 21x21, but the SVG width and height are 32, 32. For SVG to work in IE, they must be the same (this is a limitation of IE).
As a workaround, you can set the desiredSize to 32x32 and give it a smaller scale:
desiredSize: new go.Size(32, 32), scale: 0.66,
A slightly more complex way to do it would be to use a viewbox panel, which forces its contents to fit, doing the scaling for you. you'd write:
GO(go.Panel, "Viewbox", { desiredSize: new go.Size(21, 21) }, GO(go.Picture, { //alignment: go.Spot.BottomRight, desiredSize: new go.Size(32, 32), source: "assets/images/test.svg" } ) )

Thats it!!! We went with option 2. It’s working great. Thanks so much for your help.