SVG Path to Babylon Path2

Demos and projects
1

Spent the morning trying to get ChatGPT to do this.

I think it works pretty well after a lot of iterations.

4 Likes
2

fyi. look at the fontData which uses the createText-Function :slight_smile:

image
image1540Ă—977 106 KB

Babylon.js Playground

3

Interesting to see.

It looks like it only parses very basic path data, where I wanted to parse any path that the user uploads

4

Very cool!

I’ve written SVG parser in a different context (python as an intermediate step while decoding truetype and opentype fonts). From experience, there are a lot of details to get right. Not sure if you’re wanting feedback.

In case you do, here are some things to watch out for:

  • parsing “edge cases” with missing commas, spaces (e.g. “0.2.3” should be two floats 0.2 and 0.3, “L2” should be the command L and a float 2).
  • implicit commands. You’re handling, I think, moveto followed by implicit lineto, but there may be others.
  • Proper handling of cpx/cpy with relative commands and the optional additional parameters on each command (reset cpx/cpy only at end of entire command).
  • proper handling to the two closepath contexts
  • proper winding of subpaths (though that may be at a higher level where this class is used).
  • ability to use paths for closed shapes with fill (and proper winding)
  • upcoming (2023 editor’s draft) of Bb bearing and Rr catmull-rom commands.
  • Bearing (which might be specific earlier and kind of incompletely in 2015 specification) requires retaining bearing for relative commands and using/calculating tangent of previous command.
  • Catmull-rom is slightly different that all other commands in that repeated control points only need 2 parameters (all others “repeat” with the same number of args as the required minimum per command).

Good work on the Aa Arc command, that one’s tough!

2 Likes