Hello,
We’ve noticed that SVG node templates in our palette don’t look so clear. They look kind a blurrish, sometimes some node’s edges are grey not black, etc. Please, take a look at the screen shot attached.
Is there a way to improve their look?
How did you initialize the Palette? What Node template did you use? Could you give us an example SVG used by a Node’s Shape that you think is blurry?
-
We initialize the palette in the following way:
var palette = new go.Palette(“palette”); // create a new Palette in the HTML DIV element “palette”
// share the template map with the Palette
palette.nodeTemplateMap = myDiagram.nodeTemplateMap;palette.model.nodeDataArray = [
{ category: “image1” },
{ category: “image2” },
{ category: “image3” },
{ category: “image4” },
{ category: “image5” },
{ category: “image6” },
{ category: “image7” },
{ category: “image8” },
{ category: “image9” },
{ category: “image10” },
{ category: “table” },
{ category: “hBar” }
]; -
When I say “blurrish” I mean on node templates that have SVG files inside.
-
For example this one is blurry:
var Des_1up_Template =
$(go.Node, “Vertical”, nodeStyle(),
$(go.Picture, “Images/All_elements/Des_1up.svg”),
$(go.Shape, “Rectangle”, portStyle1(), { portId: “”, alignment: new go.Spot(0.5, 0) })
);
Isn’t it obvious that all node templates on the screen shot above are blurry?
No, it isn’t obvious to me that the nodes are blurry – they just seem to be drawn in gray rather than in black. That’s why I wanted to see the template used along with the SVG. You’ve provided part of the template, but not the nodeStyle and portStyle1 functions. And you haven’t provided the Des_1up.svg definition.
The reason I ask about that is that perhaps the Picture (which I didn’t know that you were using) has been scaled up or down or stretched in some manner.
Furthermore the drawing of the SVG might not be on pixel boundaries, depending on the position of the Picture in the Node, the position of the Node in document coordinates, and the position of the viewport of the Diagram (Diagram.position and Diagram.scale).
Here is what you asked for:
function nodeStyle() {
return [
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
new go.Binding("isShadowed", "isSelected").ofObject(),
{
click: nodeClicked,
selectionAdorned: false,
shadowOffset: new go.Point(0, 0),
shadowBlur: 5,
shadowColor: "blue",
toolTip: sharedToolTip
}
];
}
function portStyle1() {
if (port_style_Id == 1){
return {
desiredSize: new go.Size(0, 0),
fill: "black",
toLinkable: true,
cursor: "pointer",
fromLinkable: true,
fromSpot: go.Spot.TopBottomSides,
toSpot: go.Spot.TopBottomSides
};
} else {
return {
desiredSize: new go.Size(3, 3),
fill: "black",
toLinkable: true,
cursor: "pointer",
fromLinkable: true,
fromSpot: go.Spot.TopBottomSides,
toSpot: go.Spot.TopBottomSides
};
}
}
I’m unable to view your SVG in Firefox or Chrome or Edge. Perhaps something got corrupted when you pasted it into the forum’s editor or when the forum tries to render the XML?
If you open one that SVG as a file in various browsers on various resolution monitors, how sharp is it?
I just tried some experiments at Minimal GoJS Sample. The results aren’t quite what I was expecting, and they depend on what kind of monitor you are using.
I think one issue is that fractional positioning of Nodes/Shapes/Pictures in the viewport can cause antialiasing effects which make lines appear fuzzy. So I suggest that you carefully look at the value of obj.getDocumentPoint(go.Spot.TopLeft) for a Node and each of its GraphObjects, to see if there are any fractional positions. Then examine your SVG to make sure its declared width and height are the same as your Picture’s, and examine its paths and their effective positions after transformations to see if there are fractional positions.
Your editor cut last 2 lines of SVG file definition. Please, try to add them:
</g>
</svg>Adding those two end elements was insufficient – I’m still getting errors.
The SVG file looks normal (not blurry) in Firefox, Chrome and IE.
Please, download SVG file from the following address (click “Скачать”):
I’m not sure we can affect how the browser renders SVG. The only control that I know of is to set “ImageSmoothingEnabled” to false on the drawing context, but that had no effect. At least not on my current monitor, which is a high resolution monitor – I haven’t had a chance to try it on an older monitor.
Does it mean that we can do nothing about our blurry node templates?
Perhaps not. Here’s what I’m seeing on my monitor:
On the left side is your SVG file shown in a Picture in a GoJS Diagram in Firefox. On the right side is the same SVG file shown in Firefox. I moved the two browser windows to be next to each other and then did a Print Screen.
Yes, the “native” SVG rendering is sharper than when the SVG is rendered to a Canvas element. I guess it could be worse on lower density monitors.
As I can see everything is fine with our SVG files. It seems there is a bug on your side. Could you fix it?
We render Pictures just by calling the Canvas context method for drawing an image. There’s only one “knob” that I know we can turn for how it does the drawing, and I already tried it with no effect.
So I don’t think we have any control over this. But we can investigate it further when we get time.
Ok. Thank you.
Actually, there might be things that you could do in your Palette. Could you check the Node.position of each of your Nodes in the Palette? Are they all integral values? And what is the value of Palette.position – is it integral as well?
Here’s a screenshot showing Minimal GoJS Sample in four different browsers plus the SVG file by itself in Chrome:
