Displaying SVG with multiple paths in diagram

I need to display an SVG in my diagram that is stored in a json file with numerous other SVG’s. The SVG’s are not saved in a .svg file independently. We use icomoon, so I have a single json file that stores hundreds of SVG’s. Each of the SVG’s can have multiple paths and fill colors.

Is it possible to build out the SVG using go.Shape’s geometryString? I am currently using that with displaying an svg that only has a single path and fill color, but I wasn’t sure how that might work with multiple paths. Is there a better way? Are there any examples for something like this?


Have you seen the icons sample? It uses icomoon SVG path strings. Multiple paths shouldn’t be a problem.

I did see this example, but it isn’t using any icons with multiple paths or multiple fill colors. I wasn’t sure if that was intentional (as in, it isn’t possible) or not. Each SVG in my icomoon generated file has a ‘paths’ array and an array containing fill colors for each path. So each path can have a different fill color. In looking at the Path documentation, it looks like I can separate each path with an ‘X’ in the geometry string. But I am not understanding how to specify a fill color for each path.

While a go.Geometry can have multiple paths, each Shape can only have 1 Geometry and 1 fill.

You can only do this in GoJS by converting each path into an individual shape and giving each shape a different fill. Then you can stack those Shapes atop each other in a Panel.

That’s what I was thinking I would have to do. I don’t suppose there is an example anywhere for “stacking” shapes is there?

There isn’t, but it depends how you want them stacked. If you just want them offset by each other you can use the default panel, a Position panel.

Here’s a simple example: https://codepen.io/simonsarris/pen/rKaYXM?editors=1010

For a bunch of Shapes you want to arrange in a concentric fashion, use a Spot panel or Table panel with only 1 cell. It may be worth reviewing the options depending on what you want to do: GoJS Panels -- Northwoods Software