Scaling SVG in IE

estesbubba · January 15, 2016, 4:12pm

We have ran into an issue where our SVG images aren’t scaling in IE 11. It works fine in Chrome and Firefox. I’ve tried several different properties with no luck. Here is my example:

<!DOCTYPE html>
<html>
<head>
<title>IE SVG Example</title>
<meta charset="UTF-8">
<script src="go.js"></script>
<script id="code">
  function init() {
//    if (window.goSamples) goSamples();  // init for these samples -- you don't need to call this
    var $ = go.GraphObject.make;  // for conciseness in defining templates
    myDiagram = $(go.Diagram, "myDiagram",  // create a Diagram for the DIV HTML element
                  {
                    initialContentAlignment: go.Spot.Center,  // center the content
                    "undoManager.isEnabled": true  // enable undo & redo
                  });
    // define a simple Node template
    myDiagram.nodeTemplate =
      $(go.Node, "Auto",  // the Shape will go around the TextBlock
        $('Picture', {
                    name: 'templateIcon',
                    background: null,
                    alignment: go.Spot.Center,
                    imageStretch: go.GraphObject.Uniform,
                    width: 256,
                    height: 256
                },
                new go.Binding('source', 'templateSource')
        ));
    // but use the default Link template, by not setting Diagram.linkTemplate
    // create the model data that will be represented by Nodes and Links
    myDiagram.model = new go.GraphLinksModel(
    [
      { templateSource:  'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPCEtLSBHZW5lcmF0b3I6IEljb01vb24uaW8gLS0+IDwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+IDxzdmcgd2lkdGg9IjUxMiIgaGVpZ2h0PSI1MTIiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBmaWxsPSIjMDAwMDAwIj48ZyBjbGFzcz0ic3ZnR3JpZCIgaWQ9InN2Z0dyaWQiPjxsaW5lIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlPSIjQjM1MDQ3IiB4MT0iMzIiIHgyPSIzMiIgeTE9IjAiIHkyPSI1MTIiPjwvbGluZT48bGluZSBzdHJva2Utd2lkdGg9IjEiIHN0cm9rZT0iI0IzNTA0NyIgeDE9IjY0IiB4Mj0iNjQiIHkxPSIwIiB5Mj0iNTEyIj48L2xpbmU+PGxpbmUgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2U9IiNCMzUwNDciIHgxPSI5NiIgeDI9Ijk2IiB5MT0iMCIgeTI9IjUxMiI+PC9saW5lPjxsaW5lIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlPSIjQjM1MDQ3IiB4MT0iMTI4IiB4Mj0iMTI4IiB5MT0iMCIgeTI9IjUxMiI+PC9saW5lPjxsaW5lIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlPSIjQjM1MDQ3IiB4MT0iMTYwIiB4Mj0iMTYwIiB5MT0iMCIgeTI9IjUxMiI+PC9saW5lPjxsaW5lIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlPSIjQjM1MDQ3IiB4MT0iMTkyIiB4Mj0iMTkyIiB5MT0iMCIgeTI9IjUxMiI+PC9saW5lPjxsaW5lIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlPSIjQjM1MDQ3IiB4MT0iMjI0IiB4Mj0iMjI0IiB5MT0iMCIgeTI9IjUxMiI+PC9saW5lPjxsaW5lIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlPSIjQjM1MDQ3IiB4MT0iMjU2IiB4Mj0iMjU2IiB5MT0iMCIgeTI9IjUxMiI+PC9saW5lPjxsaW5lIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlPSIjQjM1MDQ3IiB4MT0iMjg4IiB4Mj0iMjg4IiB5MT0iMCIgeTI9IjUxMiI+PC9saW5lPjxsaW5lIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlPSIjQjM1MDQ3IiB4MT0iMzIwIiB4Mj0iMzIwIiB5MT0iMCIgeTI9IjUxMiI+PC9saW5lPjxsaW5lIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlPSIjQjM1MDQ3IiB4MT0iMzUyIiB4Mj0iMzUyIiB5MT0iMCIgeTI9IjUxMiI+PC9saW5lPjxsaW5lIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlPSIjQjM1MDQ3IiB4MT0iMzg0IiB4Mj0iMzg0IiB5MT0iMCIgeTI9IjUxMiI+PC9saW5lPjxsaW5lIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlPSIjQjM1MDQ3IiB4MT0iNDE2IiB4Mj0iNDE2IiB5MT0iMCIgeTI9IjUxMiI+PC9saW5lPjxsaW5lIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlPSIjQjM1MDQ3IiB4MT0iNDQ4IiB4Mj0iNDQ4IiB5MT0iMCIgeTI9IjUxMiI+PC9saW5lPjxsaW5lIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlPSIjQjM1MDQ3IiB4MT0iNDgwIiB4Mj0iNDgwIiB5MT0iMCIgeTI9IjUxMiI+PC9saW5lPjxsaW5lIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlPSIjQjM1MDQ3IiB4MT0iMCIgeDI9IjUxMiIgeTE9IjMyIiB5Mj0iMzIiPjwvbGluZT48bGluZSBzdHJva2Utd2lkdGg9IjEiIHN0cm9rZT0iI0IzNTA0NyIgeDE9IjAiIHgyPSI1MTIiIHkxPSI2NCIgeTI9IjY0Ij48L2xpbmU+PGxpbmUgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2U9IiNCMzUwNDciIHgxPSIwIiB4Mj0iNTEyIiB5MT0iOTYiIHkyPSI5NiI+PC9saW5lPjxsaW5lIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlPSIjQjM1MDQ3IiB4MT0iMCIgeDI9IjUxMiIgeTE9IjEyOCIgeTI9IjEyOCI+PC9saW5lPjxsaW5lIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlPSIjQjM1MDQ3IiB4MT0iMCIgeDI9IjUxMiIgeTE9IjE2MCIgeTI9IjE2MCI+PC9saW5lPjxsaW5lIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlPSIjQjM1MDQ3IiB4MT0iMCIgeDI9IjUxMiIgeTE9IjE5MiIgeTI9IjE5MiI+PC9saW5lPjxsaW5lIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlPSIjQjM1MDQ3IiB4MT0iMCIgeDI9IjUxMiIgeTE9IjIyNCIgeTI9IjIyNCI+PC9saW5lPjxsaW5lIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlPSIjQjM1MDQ3IiB4MT0iMCIgeDI9IjUxMiIgeTE9IjI1NiIgeTI9IjI1NiI+PC9saW5lPjxsaW5lIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlPSIjQjM1MDQ3IiB4MT0iMCIgeDI9IjUxMiIgeTE9IjI4OCIgeTI9IjI4OCI+PC9saW5lPjxsaW5lIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlPSIjQjM1MDQ3IiB4MT0iMCIgeDI9IjUxMiIgeTE9IjMyMCIgeTI9IjMyMCI+PC9saW5lPjxsaW5lIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlPSIjQjM1MDQ3IiB4MT0iMCIgeDI9IjUxMiIgeTE9IjM1MiIgeTI9IjM1MiI+PC9saW5lPjxsaW5lIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlPSIjQjM1MDQ3IiB4MT0iMCIgeDI9IjUxMiIgeTE9IjM4NCIgeTI9IjM4NCI+PC9saW5lPjxsaW5lIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlPSIjQjM1MDQ3IiB4MT0iMCIgeDI9IjUxMiIgeTE9IjQxNiIgeTI9IjQxNiI+PC9saW5lPjxsaW5lIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlPSIjQjM1MDQ3IiB4MT0iMCIgeDI9IjUxMiIgeTE9IjQ0OCIgeTI9IjQ0OCI+PC9saW5lPjxsaW5lIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlPSIjQjM1MDQ3IiB4MT0iMCIgeDI9IjUxMiIgeTE9IjQ4MCIgeTI9IjQ4MCI+PC9saW5lPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSI1MTIiIGhlaWdodD0iNTEyIiBmaWxsPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIHN0cm9rZT0iI0IzNTA0NyI+PC9yZWN0PjwvZz48cGF0aCBkPSJNIDEyOS4xMzksMjIzLjI3MSBMIDU1Ljg3Myw5Ni4zNyBDIDEwMi43ODIsMzcuNjM4IDE3NC45OSwwLjAwIDI1Ni4wMCwwLjAwIEMgMzQ5LjcxNiwwLjAwIDQzMS42NTUsNTAuMzY4IDQ3Ni4yNjYsMTI1LjUwIEwgMjY3LjM4MSwxMjUuNTAgQyAyNjMuNjI5LDEyNS4xNzUgMjU5LjgzNSwxMjUuMDAgMjU2LjAwLDEyNS4wMCBDIDE5NS4wNjMsMTI1LjAwIDE0My43MTEsMTY2LjgyMiAxMjkuMTM5LDIyMy4yNzEgWk0gMzQ3LjY1MywxNjIuNTAgTCA0OTQuMzgzLDE2Mi41MCBDIDUwNS43NTMsMTkxLjQ2NSA1MTIuMDAsMjIzLjAwMiA1MTIuMDAsMjU2LjAwIEMgNTEyLjAwLDM5Ni40MTMgMzk4Ljk1LDUxMC40MDIgMjU4LjkwNyw1MTEuOTYzIEwgMzYzLjYwNCwzMzAuNjI0IEMgMzc4LjM0NCwzMDkuNDM1IDM4Ny4wMCwyODMuNzExIDM4Ny4wMCwyNTYuMDAgQyAzODcuMDAsMjE5LjQxNSAzNzEuOTE4LDE4Ni4yOSAzNDcuNjUzLDE2Mi41MCBaTSAxNjMuMDAsMjU2LjAwIEMgMTYzLjAwLDIwNC43MiAyMDQuNzIsMTYzLjAwIDI1Ni4wMCwxNjMuMDAgQyAzMDcuMjgsMTYzLjAwIDM0OS4wMCwyMDQuNzIgMzQ5LjAwLDI1Ni4wMCBDIDM0OS4wMCwzMDcuMjggMzA3LjI4LDM0OS4wMCAyNTYuMDAsMzQ5LjAwIEMgMjA0LjcyLDM0OS4wMCAxNjMuMDAsMzA3LjI4IDE2My4wMCwyNTYuMDAgWk0gMjkxLjA5MSwzODIuMjIxIEwgMjE3LjgwMiw1MDkuMTYgQyA5NC41MzYsNDkwLjcxOCAwLjAwLDM4NC40MDIgMC4wMCwyNTYuMDAgQyAwLjAwLDIxMC4zOTEgMTEuOTQyLDE2Ny41NzcgMzIuODQ4LDEzMC40ODggTCAxMzcuMzYzLDMxMS41MTUgQyAxNTguMjk3LDM1Ni4wNzEgMjAzLjYwMSwzODcuMDAgMjU2LjAwLDM4Ny4wMCBDIDI2OC4xNSwzODcuMDAgMjc5LjkxOCwzODUuMzMgMjkxLjA5MSwzODIuMjIxIFoiID48L3BhdGg+PC9zdmc+'}
    ]);
  }
</script>
</head>
<body onload="init()">
<div id="sample">
  <!-- The DIV for the Diagram needs an explicit size or else we won't see anything.
       Also add a border to help see the edges. -->
  <div id="myDiagram" style="border: solid 1px black; width:640px; height:640px"></div>
</div>
</body>
</html>

Here is the test SVG that is base64 encoded in the example above. We store images in our database in this format.

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: IcoMoon.io -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000">
    <g class="svgGrid" id="svgGrid">
        <line stroke-width="1" stroke="#B35047" x1="32" x2="32" y1="0" y2="512"/>
        <line stroke-width="1" stroke="#B35047" x1="64" x2="64" y1="0" y2="512"/>
        <line stroke-width="1" stroke="#B35047" x1="96" x2="96" y1="0" y2="512"/>
        <line stroke-width="1" stroke="#B35047" x1="128" x2="128" y1="0" y2="512"/>
        <line stroke-width="1" stroke="#B35047" x1="160" x2="160" y1="0" y2="512"/>
        <line stroke-width="1" stroke="#B35047" x1="192" x2="192" y1="0" y2="512"/>
        <line stroke-width="1" stroke="#B35047" x1="224" x2="224" y1="0" y2="512"/>
        <line stroke-width="1" stroke="#B35047" x1="256" x2="256" y1="0" y2="512"/>
        <line stroke-width="1" stroke="#B35047" x1="288" x2="288" y1="0" y2="512"/>
        <line stroke-width="1" stroke="#B35047" x1="320" x2="320" y1="0" y2="512"/>
        <line stroke-width="1" stroke="#B35047" x1="352" x2="352" y1="0" y2="512"/>
        <line stroke-width="1" stroke="#B35047" x1="384" x2="384" y1="0" y2="512"/>
        <line stroke-width="1" stroke="#B35047" x1="416" x2="416" y1="0" y2="512"/>
        <line stroke-width="1" stroke="#B35047" x1="448" x2="448" y1="0" y2="512"/>
        <line stroke-width="1" stroke="#B35047" x1="480" x2="480" y1="0" y2="512"/>
        <line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="32" y2="32"/>
        <line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="64" y2="64"/>
        <line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="96" y2="96"/>
        <line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="128" y2="128"/>
        <line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="160" y2="160"/>
        <line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="192" y2="192"/>
        <line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="224" y2="224"/>
        <line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="256" y2="256"/>
        <line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="288" y2="288"/>
        <line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="320" y2="320"/>
        <line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="352" y2="352"/>
        <line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="384" y2="384"/>
        <line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="416" y2="416"/>
        <line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="448" y2="448"/>
        <line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="480" y2="480"/>
        <rect x="0" y="0" width="512" height="512" fill="none" stroke-width="1" stroke="#B35047"/>
    </g>
    <path d="M 129.139,223.271 L 55.873,96.37 C 102.782,37.638 174.99,0.00 256.00,0.00 C 349.716,0.00 431.655,50.368 476.266,125.50 L 267.381,125.50 C 263.629,125.175 259.835,125.00 256.00,125.00 C 195.063,125.00 143.711,166.822 129.139,223.271 ZM 347.653,162.50 L 494.383,162.50 C 505.753,191.465 512.00,223.002 512.00,256.00 C 512.00,396.413 398.95,510.402 258.907,511.963 L 363.604,330.624 C 378.344,309.435 387.00,283.711 387.00,256.00 C 387.00,219.415 371.918,186.29 347.653,162.50 ZM 163.00,256.00 C 163.00,204.72 204.72,163.00 256.00,163.00 C 307.28,163.00 349.00,204.72 349.00,256.00 C 349.00,307.28 307.28,349.00 256.00,349.00 C 204.72,349.00 163.00,307.28 163.00,256.00 ZM 291.091,382.221 L 217.802,509.16 C 94.536,490.718 0.00,384.402 0.00,256.00 C 0.00,210.391 11.942,167.577 32.848,130.488 L 137.363,311.515 C 158.297,356.071 203.601,387.00 256.00,387.00 C 268.15,387.00 279.918,385.33 291.091,382.221 Z" />
</svg>

Any ideas on how to get this to work in IE?

simon · January 15, 2016, 4:54pm

I’ve seen this bug before, and in our pictures intro page we mention a warning:

Almost all browsers accept SVG files as a Picture source, but in many browsers you must:

Assign width and height attributes to the SVG element (necessary for Firefox)

Assign the Picture element a desired size, which must be the same as its width and height attributes (necessary for Internet Explorer).

It’s an IE-specific SVG problem and not something we can accomodate. You can work around it however. Instead of using:

    $('Picture', {
                ...
                width: 256,
                height: 256,

Use this:

    $('Picture', {
                ...
                width: 512,
                height: 512,
                scale: 0.5

And it should render as you expect.

Sorry for the inconvenience.

estesbubba · January 15, 2016, 6:55pm

Thanks for the quick response. The problem is our customers use their own SVG icons and we don’t know what the size is inside them. Even then, depending on where they get them, they might have different sizes like, 32x32, 256x256, etc. so we can’t assume 512x512 and use scale of 0.5. What would you suggest for this?

simon · January 15, 2016, 7:15pm

If customers are supplying their own SVG, then they need to suppy their accurate sizes too. For SVG to work across browser it must fulfill the requirements stated in the pictures intro page or risk compatibility issues.

You can always use a go.Picture inside of a Viewbox Panel (example on this page) in order to scale it to a desired width and height if you do not know the scale factor ahead of time and do not want to compute it yourself.

Otherwise, customers may have to supply fallback images for browsers with imperfect support for SVG.