Parsed svg icon doesnt look as expected

GoJS
#1

Hi!
I’m using code from tiger example. Code that converts and svg string into panel with shapes

After some adjustments I managed to use it, but there is an issue
2022-01-25_13-24-34

It looks a bit broken when diagram.scale is 1
is there anything extra I need to hanlde to give it a better look?

svg that i’m using

export const commentIconAdd = '\
<svg width="16" height="15" viewBox="0 0 16 15" fill="transparent" xmlns="http://www.w3.org/2000/svg">\
<path stroke-width="1" d="M8 3C8.27614 3 8.5 3.22386 8.5 3.5V5H10C10.2761 5 10.5 5.22386 10.5 5.5C10.5 5.77614 10.2761 6 10 6H8.5V7.5C8.5 7.77614 8.27614 8 8 8C7.72386 8 7.5 7.77614 7.5 7.5V6H6C5.72386 6 5.5 5.77614 5.5 5.5C5.5 5.22386 5.72386 5 6 5H7.5V3.5C7.5 3.22386 7.72386 3 8 3Z" stroke="#323435"/>\
<path stroke-width="1" d="M14 11H8.53333L6.02735 13.9367C5.424 14.6438 4.26667 14.2171 4.26667 13.2876V11H2C0.89543 11 0 10.1046 0 9V2C0 0.895431 0.895431 0 2 0H14C15.1046 0 16 0.895431 16 2V9C16 10.1046 15.1046 11 14 11ZM5.26667 10H2C1.44772 10 1 9.55229 1 9V2C1 1.44772 1.44772 1 2 1H14C14.5523 1 15 1.44772 15 2V9C15 9.55228 14.5523 10 14 10H8.07207L5.26667 13.2876L5.26667 10Z" stroke="#323435"/>\
</svg>\
';

function that I took from tiger example and adjust a bit for my needs.

export const convertSvgToShape = (svgString: string) => {
	const container = new go.Panel();
	const parsedSvg = new DOMParser().parseFromString(svgString, "image/svg+xml");
	const svgPaths = parsedSvg.getElementsByTagName("path");

	for (let i = 0; i < svgPaths.length; i++) {
		// represent each SVG path by a Shape of type Path with its own fill and stroke
		const path = svgPaths[i];
		const shape = new go.Shape();

		const stroke = path.getAttribute("stroke");
		if (typeof stroke === "string" && stroke !== "none") {
			shape.stroke = stroke;
		} else {
			shape.stroke = null;
		}

		const strokewidth = parseFloat(path.getAttribute("stroke-width"));
		if (!isNaN(strokewidth)) shape.strokeWidth = strokewidth;

		const id = path.getAttribute("id");
		if (typeof id === "string") shape.name = id;

		const fill = path.getAttribute("fill");
		if (typeof fill === "string") {
			shape.fill = (fill === "none") ? null : fill;
		}

		// convert the path data string into a go.Geometry
		const data = path.getAttribute("d");
		if (typeof data === "string") shape.geometry = go.Geometry.parse(data);

		// collect these Shapes in the single Panel
		container.add(shape);
	}

	return container;
}
#2

I tried this:

        $(go.Panel,
          //<path stroke-width="1" d="M8 3C8.27614 3 8.5 3.22386 8.5 3.5V5H10C10.2761 5 10.5 5.22386 10.5 5.5C10.5 5.77614 10.2761 6 10 6H8.5V7.5C8.5 7.77614 8.27614 8 8 8C7.72386 8 7.5 7.77614 7.5 7.5V6H6C5.72386 6 5.5 5.77614 5.5 5.5C5.5 5.22386 5.72386 5 6 5H7.5V3.5C7.5 3.22386 7.72386 3 8 3Z" stroke="#323435"/>\
          $(go.Shape, { strokeWidth: 1, geometryString: "M8 3C8.27614 3 8.5 3.22386 8.5 3.5V5H10C10.2761 5 10.5 5.22386 10.5 5.5C10.5 5.77614 10.2761 6 10 6H8.5V7.5C8.5 7.77614 8.27614 8 8 8C7.72386 8 7.5 7.77614 7.5 7.5V6H6C5.72386 6 5.5 5.77614 5.5 5.5C5.5 5.22386 5.72386 5 6 5H7.5V3.5C7.5 3.22386 7.72386 3 8 3Z", stroke: "#323435" }),
          //<path stroke-width="1" d="M14 11H8.53333L6.02735 13.9367C5.424 14.6438 4.26667 14.2171 4.26667 13.2876V11H2C0.89543 11 0 10.1046 0 9V2C0 0.895431 0.895431 0 2 0H14C15.1046 0 16 0.895431 16 2V9C16 10.1046 15.1046 11 14 11ZM5.26667 10H2C1.44772 10 1 9.55229 1 9V2C1 1.44772 1.44772 1 2 1H14C14.5523 1 15 1.44772 15 2V9C15 9.55228 14.5523 10 14 10H8.07207L5.26667 13.2876L5.26667 10Z" stroke="#323435"/>\
          $(go.Shape, { strokeWidth: 1, geometryString: "M14 11H8.53333L6.02735 13.9367C5.424 14.6438 4.26667 14.2171 4.26667 13.2876V11H2C0.89543 11 0 10.1046 0 9V2C0 0.895431 0.895431 0 2 0H14C15.1046 0 16 0.895431 16 2V9C16 10.1046 15.1046 11 14 11ZM5.26667 10H2C1.44772 10 1 9.55229 1 9V2C1 1.44772 1.44772 1 2 1H14C14.5523 1 15 1.44772 15 2V9C15 9.55228 14.5523 10 14 10H8.07207L5.26667 13.2876L5.26667 10Z", stroke: "#323435" })
        ),

and the visual results were what I think we would both expect. At Diagram.scale 1:
image

#3

Seems like I still have same problem, walter.
scale 1
image
scale 1.1
image

can you see the diffrence? the shape of + is like white inside or something in comparison to regular svg and diagram.scale 1.1

#4

OK, you have the GoJS code that I used in a node template, and the screenshot I took when the Diagram.scale was 1. I’m not seeing what you are seeing. Do you get that appearance at other scales or on other monitors or in other browsers or on other machines?

#5

walter, I took your code, and used it. I can see the difference of how same thing looks like when diagram scales. In this particular case shapes that i’m building from svg looks odd in default scale but much better on larger scale. By using your code I only gained confidence that it is not the issue of how i build shapes but likely something wrong with svg paths, or with the scope where I put this panel with svg shapes or maybe even something else i dont know.