makeImage using SVG Picture in IE is blank

GoJS
1

In our product we use makeImage() for print functionality. Our base product uses font icons but we allow customers to customize them using SVG’s. We require them to make the SVG’s 32x32 so they display correctly in IE 11 and this is working fine using a Picture in our Diagram. The problem with IE shows when they print the diagram and SVG Pictures are blank. The font icons in our product render correctly with makeImage and IE.

We are using 1.6.24 and I attached a reproducible example. This example works just fine with Chrome, Firefox, and Edge. I don’t know if this is a usage error, bug, or just a “feature” of IE.

<!DOCTYPE html>
<html>
<head>
<title>Icons GoJS Sample</title>
<meta name="description" content="Use SVG geometry path strings to create vector icons, rather than using images." />
<!-- Copyright 1998-2017 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/1.6.24/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
    // "icons" is defined in icons.js
    // SVG paths have no flag for being filled or not, but GoJS Geometry paths do.
    // We want to mark each SVG path as filled:
    // a collection of colors
    var colors = {
      blue:   "#00B5CB",
      orange: "#F47321",
      green:  "#C8DA2B",
      gray:   "#888",
      white:  "#F5F5F5"
    }
    // The first Diagram showcases what the Nodes might look like "in action"
    myDiagram = $(go.Diagram, "myDiagramDiv",
                  {
                    initialContentAlignment: go.Spot.Center,
                    "undoManager.isEnabled": true,
                    layout: $(go.TreeLayout)
                  });
    // Define a simple template consisting of the icon surrounded by a filled circle
    myDiagram.nodeTemplate =
      $(go.Node, "Auto",
        $(go.Shape, "Circle",
            { fill: "lightcoral", strokeWidth: 4, stroke: colors["gray"], width: 60, height: 60 },
            new go.Binding("fill", "color")),
		$(go.Panel, "Viewbox",
			{ margin: 3 },
			$(go.Picture,
                { width: 32, height: 32, scale: 1.0 },
			  new go.Binding("source", "geo"))
		)
      );
    // Define a Link template that routes orthogonally, with no arrowhead
    myDiagram.linkTemplate =
      $(go.Link,
        { routing: go.Link.Orthogonal, corner: 5, toShortLength: -2, fromShortLength: -2 },
        $(go.Shape, { strokeWidth: 5, stroke: colors["gray"] })); // the link shape
    // Create the model data that will be represented by Nodes and Links
    myDiagram.model = new go.GraphLinksModel(
    [
      { key: 1, geo: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdGVkIGJ5IEljb01vb24uaW8gLS0+DQo8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiI+DQo8dGl0bGU+bW9iaWxlPC90aXRsZT4NCjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0yMyAwaC0xNGMtMS42NSAwLTMgMS4zNS0zIDN2MjZjMCAxLjY1IDEuMzUgMyAzIDNoMTRjMS42NSAwIDMtMS4zNSAzLTN2LTI2YzAtMS42NS0xLjM1LTMtMy0zek0xMiAxLjVoOHYxaC04di0xek0xNiAzMGMtMS4xMDUgMC0yLTAuODk1LTItMnMwLjg5NS0yIDItMiAyIDAuODk1IDIgMi0wLjg5NSAyLTIgMnpNMjQgMjRoLTE2di0yMGgxNnYyMHoiPjwvcGF0aD4NCjwvc3ZnPg0K"          , color: colors["blue"]   }
    ]);

    setTimeout(function() {
        var imgDiv = document.getElementById("myImage");
        var img = myDiagram.makeImage({
            scale: 1.0,
            maxSize: new go.Size(10000, 10000),
            size: new go.Size(400, 400)
        });
        imgDiv.appendChild(img);
    }, 1000);
  }
</script>
</head>
<body onload="init()">
<div id="sample">
    <h3>SVG Icons Sample</h3>

    <div id="myDiagramDiv" style="border: solid 1px black; width:450px; height:300px"></div>
    <div>Image will render after 1 second</div>
    <div id="myImage" style="border: solid 1px black; width:400px; height:400px"></div>

</div>
</body>
</html>
2

Thanks for the reproducible case. We’ll look into it.

3

It seems that IE does not want to render data:image/svg+xml onto a canvas for security reasons.

If all of your paths are as simple, could you extract them out instead, like this? https://codepen.io/simonsarris/pen/dRaKxZ?editors=1010

Alternatively, you may have to reference real .svg files. I don’t think this is something we can work around in GoJS.

4

Simon - I looked at your Codepen and modified to my original image and both the canvas and makeImage didn’t render correctly (white rectangle in both). I also noticed you were using latest and we are using 1.6.24.

Just to make sure we’re on the same page, on my example using IE 11 the canvas does render correctly but makeImage is blank. Here is a screenshot.

makeImageIE.PNG839×1461 41.7 KB

5

I looked at your Codepen and modified to my original image and both the canvas and makeImage didn’t render correctly (white rectangle in both).

Are you sure you didn’t miss something? I stopped using an image and am using Shape instead. Here’s the same codepen using 1.6.24: https://codepen.io/simonsarris/pen/dRaKxZ?editors=1010

Just to make sure we’re on the same page, on my example using IE 11 the canvas does render correctly but makeImage is blank. Here is a screenshot.

Yeah, that’s what I saw. It seems to be because of the way IE is treating embedded SVG “images”. Like I said I don’t think there’s anything we can do about this limitation.

6

Now I see you changed from Picture to Shape. Does GoJS have a utility to convert SVG files to Shapes? You asked earlier if the paths were simple we could extract them out. Since we have no idea on what the customers might use we don’t know if the paths will be simple or complex.

7

I afraid we don’t have anything like that. For icomoon icons they are quite easy, but there are plenty of SVG that are not just a few paths, but a combination of complex objects.

I tried using a .svg file instead of "data:image/svg+xml;base64,..., but unfortunately IE11 still throws a SecurityError anyway.

This has been a known bug for them since 2013. Even worse, it used to work in IE10.

8

Not the first time IE has caused problems…

What’s odd is IE 11 shows it properly in the canvas element but not in the makeImage call. You would think it would have the same problem with both, but then again, it’s IE.

Thanks for your help. Maybe we’ll put a warning on the print dialog if they’re using IE 11.

9

Could a work-around be specifying Picture.sourceCrossOrigin somehow?

10

Afraid not @walter, I did try all values with local server in case crossOrigin or the filesystem was part of the culprit.

@estesbubba, the reason it works on the canvas is that Browsers will let you draw anything to the canvas but for strict security reasons will not let you call makeImage or toDataURL on HTML canvases that have been “tainted” by images from another origin. IE is incorrectly applying these (important) rules.

11

A post was split to a new topic: SVG Image in go.Picture