Some SVG Images don't scale properly in Safari

GoJS
#1

We are using SVG images created via the same procedure. In Safari 9.1.3 on OSX some scale correctly while others do not.

phost.svg does NOT scale:
https://drive.google.com/file/d/1k7JVz63EtxYfsFr3Vh9JDPSIOvMhGaDk/view?usp=sharing
router.svg does scale:
https://drive.google.com/file/d/1-chsoLLI63zTpqZMkc31MkV4ulUsD0KP/view?usp=sharing

diagram.nodeTemplateMap.add('phost', $(go.Node, "Table", {},

	// main node shape
	$(go.Shape, "RoundedRectangle", {
			row: 0,
			column: 1,
			parameter1: 10,
			name: "SHAPE",
			fromSpot: go.Spot.RightSide,
			toSpot: go.Spot.LeftSide,
			portId: "",
			stretch: go.GraphObject.Fill,
			fill: DISPLAY.nodeColor,
			strokeWidth: 0,
			minSize: new go.Size(60, 0)
		}
	),

	// internal panel layer
	$(go.Panel, "Auto", {
			row: 0,
			column: 1,
			shadowVisible: false,
			padding: new go.Margin(7, 10)
		},
		$(go.Picture, {source: "images/phost.svg", scale:1}))));


image.png620×518 24.9 KB

#2

1.0 is the default GraphObject.scale, so setting it has no effect.

I think you might need to set or bind the GraphObject.desiredSize (or both the GraphObject.width and the GraphObject.height) to real values on your Picture object.

#3

nope.

diagram.nodeTemplateMap.add('phost', $(go.Node, "Table", {},

	// main node shape
	$(go.Shape, "RoundedRectangle", {
			row: 0,
			column: 1,
			parameter1: 10,
			name: "SHAPE",
			fromSpot: go.Spot.RightSide,
			toSpot: go.Spot.LeftSide,
			portId: "",
			stretch: go.GraphObject.Fill,
			fill: DISPLAY.nodeColor,
			strokeWidth: 0,
			minSize: new go.Size(60, 0)
		}
	),

	// internal panel layer
	$(go.Panel, "Auto", {
			row: 0,
			column: 1,
			shadowVisible: false,
			padding: new go.Margin(7, 10)
		},
		$(go.Picture, {source: "images/phost.svg", scale:1.1, desiredSize: new go.Size(20,20), width: 20, height: 20}))));

#4

width and height together are a synonym for desiredSize, so there’s no point in setting all three.

I’m not sure we can do anything about this – it might be a bug in Safari. How does it work in different browsers, or on different platforms?

#5

we dev in chrome and firefox on osx, windows and linux with no problems in any of those. are you using svg elements to create these?

<svg preserveAspectRatio='none'>
#6

Yeah there are some odd SVG bugs with rendering to a canvas. We try to accomodate them, and give some guidelines here about what to do.

You seem to already be doing the right thing, except I recommend making sure your set width/height/desiredSize are exactly the values that the SVG element uses.

This example works for me in Chrome/Safari/IE11:

https://codepen.io/simonsarris/pen/ZvzwGp