SVGs, databinding, and templates

Hi all, I’m trying to get an svg with multiple paths to render but am struggling a bit.
My set up is as follows:
Panel
– figure (data binding)
– stroke (data binding)

– itemArray (an SVG)
---- svg path 1
---- svg path 2… etc

My itemArray looks like

new go.Binding("itemArray", "", function (data) {
                return renderSvg(data.svgIcon);
            })

and renderSvg is pretty much the tiger example, and I have it returning an array of go.Shape()s. but in my console I see No item template Panel found for category "" on Panel(Position)#957 and “Shape(None)” on my canvas. The template should be the shape(s) returned, I believe. But where/how do I set that?

Can you show us a bit more code?

Sure. Really just concerned with the bottom of the first code block, and if I am returning renderSvg correctly.

$(
            go.Panel,
            go.Panel.Position,
            $(go.Shape, "RoundedRectangle", {
                fill: "transparent",
                width: NODE_SIZE + BOUNDING_BOX_EXTRA_WIDTH,
                height: NODE_SIZE + BOUNDING_BOX_EXTRA_HEIGHT,
                stroke: null,
                position: new go.Point(
                    -(BOUNDING_BOX_EXTRA_WIDTH / 2),
                    -(BOUNDING_BOX_EXTRA_HEIGHT / 2)
                ),
            }),
            $(go.Shape, new go.Binding("figure", "", function(data) {
                    if (data.hasExperienceType)
                        return "RoundedRectangle";
                    else
                        return "Circle";
                }),
                new go.Binding("fill", "", function(data) {
                    if (data.nowIcon)
                        globalData = data.nowIcon;
                    if (data.hasExperienceType && data.color)
                        return data.color;
                    else
                        return defaultNodeFill;
                }),
                new go.Binding("stroke", "", function(data) {
                    if (data.isSelected)
                        return colorPrimary;
                    if (data.color)
                        return go.Brush.darkenBy(data.color, .4);
                    else
                        return defaultNodeBorderColor;
                }),
                new go.Binding("strokeWidth", "", function(data) {
                    if (data.isSelected)
                        return 2;
                    else
                        return 1;
                }),
               {
                    name: "MAIN_NODE_SHAPE",
                    width: NODE_SIZE,
                    height: NODE_SIZE,
                    position: new go.Point(0, 0)
                }),
            new go.Binding("itemArray", '', function(data) {
                return renderSvg(data.nowIcon);
            }, {
                itemTemplate: '' //something ??
            })

in rendersvg function:
function renderSvg(svgData) {
    const parsedSvg = new DOMParser().parseFromString(svgData, "image/svg+xml");
    const paths = parsedSvg.getElementsByTagName("path");
    var svgItems = [];
    for (var i = 0; i < paths.length; i++) {
        var path = paths[i];
        var shape = new go.Shape();
        var stroke = path.getAttribute("stroke");
        if (typeof stroke === "string" && stroke !== "none") {
            shape.stroke = stroke;
        } else {
            shape.stroke = null;
        }

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

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

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

        // convert the path data string into a go.Geometry
        var data = path.getAttribute("d");
        if (typeof data === "string") shape.geometry = go.Geometry.parse(data, true);
        svgItems.push(shape);
    }
    return svgItems; // an array of shapes with the geometry data
}

Hi @simon , just wanted to follow up on this. Do my code blocks make sense? Esentially, I am just trying to get the tiger example to add to a Panel.

Thanks,
Justin