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>