SVG to IShape2

[jffaust]

Hello!

I am wondering if there is a built-in way to convert SVG hiccup to an IShape2. My use case is using something like Inkscape to draw complex-ish forms, then be able to use them with the geom transformation function like scale, rotate, etc.

I stumbled upon https://demo.thi.ng/umbrella/xml-converter/ which gives me the SVG in a hiccup format. Then I guess it's a matter of calling the shape functions. Something similar to what's done in the the draw function but calling the shape functions instead of the package's draw function.

Is there a native way of doing this that I missed (there's so much stuff in the repo ^^)?

Also, is the Discord server dead? I subscribed to your Patreon but after clicking the link I didn't see anything in there.

[postspectacular]

Hi @jffaust - there isn't a full SVG to IShape2 conversion facility, mainly because of the potential complexity of the SVG format and the amount of options. The thi.ng/geom package supports conversion for individual SVG paths (via pathFromSvg(). A small usage example is here:

https://github.com/thi-ng/umbrella/blob/develop/examples/geom-sdf-path/src/index.ts

For a work project some years ago I've used the thi.ng/sax parser to convert SVG to hiccup (also see this relevant example in the pkg readme). This approach can be very easily adapted to convert to geom shape types directly (instead of hiccup as target format). But again, for a general purpose solution the complexity comes from handling nesting (shape groups) and propagating transformation & styling attributes. If you only need a subset or you can ignore these aspects entirely, then using this approach is pretty straightforward. Happy to help with more examples if needed... 👍

[jffaust]

Thanks for the response! I just found the pathFromSvg() and I was able to use it successfully. I understand things could get complex quite quickly if one would try to support SVG completely. For my use case I'm able to make it work by avoiding nested shapes and keeping things simple.

So far I have something like this:

/**
 * @param {any} shape 
 * @returns {import("@thi.ng/geom").IHiccupShape2}
 */
export function hiccupSvgToShape(shape) {
  const att = shape[1] || {};
  switch (shape[0]) {
    case "rect":
      return rect([att.x, att.y], [att.width, att.height], att.style);
    case "ellipse":
      return ellipse([att.cx, att.cy], [att.rx, att.ry], att.style);
    case "path":
      return pathFromSvg(att.d, att.style);
    case "polygon":
      const pointsArray = att.points
        .trim() // remove trailing space if any
        .split(" ") // split by space into "x,y" pairs
        .map((pair) => pair.split(",").map(Number)); // convert to numbers
      console.log("Will be using X points: ", pointsArray);
      return polygon(pointsArray, att.style);
  }
  throw new Error("Unknown shape type: " + shape[0]);
}

[bsnbsn]

Isn't that a good case for the defmulti package? :-)

umbrella/packages/geom-sdf/src/as-sdf.ts

Line 97 in 38ecd7c

export const asSDF: MultiFn1<IShape, SDFn> = defmulti<any, SDFn>(