Way to convert SVG to Geometry?

Our node templates have a core set of icons which are created using Geometry.parse() and put into a Shape. We also allow our customers to customize the icons using SVG’s which are stored in our database. With GoJS 1.x we handled the custom icons using a Picture instead of a Shape which added more to our templates.

With GoJS 2 is there a way to convert a SVG to a Geometry so we can use Shape for both our canned icons and customer’s custom SVG icons?

That depends on the SVG. Usually the SVG is complicated enough that a single Shape cannot render the whole SVG. That will be clearly true if there are multiple colors or if there is text.

We tell our customers that icons have to be single color and most will use SVGs from IcoMoon or Google Material Design. For example can this icon be converted to Geometry, and if so, how?

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
   <circle cx="4.5" cy="9.5" r="2.5" />
   <circle cx="9" cy="5.5" r="2.5" />
   <circle cx="15" cy="5.5" r="2.5" />
   <circle cx="19.5" cy="9.5" r="2.5" />
   <path d="M17.34 14.86c-.87-1.02-1.6-1.89-2.48-2.91-.46-.54-1.05-1.08-1.75-1.32-.11-.04-.22-.07-.33-.09-.25-.04-.52-.04-.78-.04s-.53 0-.79.05c-.11.02-.22.05-.33.09-.7.24-1.28.78-1.75 1.32-.87 1.02-1.6 1.89-2.48 2.91-1.31 1.31-2.92 2.76-2.62 4.79.29 1.02 1.02 2.03 2.33 2.32.73.15 3.06-.44 5.54-.44h.18c2.48 0 4.81.58 5.54.44 1.31-.29 2.04-1.31 2.33-2.32.31-2.04-1.3-3.49-2.61-4.8z" />
   <path fill="none" d="M0 0h24v24H0z" />
</svg>
        $(go.Shape,
          {
            geometryString: "F1 M7 9.5 B0 360 4.5 9.5 2.5 2.5 M12 5.5 B0 360 9 5.5 2.5 2.5 M18 5.5 B0 360 15 5.5 2.5 2.5 M22 9.5 B0 360 19.5 9.5 2.5 2.5 M17.34 14.86c-.87-1.02-1.6-1.89-2.48-2.91-.46-.54-1.05-1.08-1.75-1.32-.11-.04-.22-.07-.33-.09-.25-.04-.52-.04-.78-.04s-.53 0-.79.05c-.11.02-.22.05-.33.09-.7.24-1.28.78-1.75 1.32-.87 1.02-1.6 1.89-2.48 2.91-1.31 1.31-2.92 2.76-2.62 4.79.29 1.02 1.02 2.03 2.33 2.32.73.15 3.06-.44 5.54-.44h.18c2.48 0 4.81.58 5.54.44 1.31-.29 2.04-1.31 2.33-2.32.31-2.04-1.3-3.49-2.61-4.8z"
          })

Is there a way to do that programmatically? I have no idea what the user’s icons will be.

I actually have it working using SVG in a Picture but still would prefer Geometry is that’s possible.

Not easily. Basically that would require parsing and translating arbitrary SVG code. But if you have simple path elements, as you can see above, it’s pretty trivial.

See also SVG Tiger Drawing in GoJS, which happens to work for that sample. But it translates the SVG into multiple Shapes in a single Panel.

Thanks Walter. I knew in 1.x it wasn’t easy and didn’t know if GoJS added anything in 2.x for converting SVG to Geometry. I’ll stick with using a Picture which I just got working.

A post was split to a new topic: SVG Palette vs Diagram

A post was split to a new topic: Half ellipse geometry