Converting an SVG path to a Phaser 3 Path

So, for a project I’m doing I need to make a path object for something to follow. I have an SVG that I am hand-converting, and I’m having issues.

The SVG elliptical arc command (the A command) is weird and converting it to the Phaser path.ellipseTo() command is proving difficult, any tips on that?

Just to see if anyone knows, is there a tool to convert an SVG path to JSON so I can skip this? I figure not, but I have to ask.

1 Like

When I needed something similar (to achieve https://twitter.com/PeterAchberger/status/994562941734281216), I used Inkscape to convert arcs to paths and then wrote some code that turns SVG commands into list of points. It’s in Haxe, but I can share it with you, if you want it.

If converting arcs to paths isn’t viable, using Phaser’s ellipseTo seems to be the way. Seems like the SVG’s large-arc-flag and sweep-flag things determine which of the two possible ellipses to choose and which way to draw it (clockwise or anticlockwise). Phaser’s Ellipse seems to make assumptions about this, so using it might be a bit difficult. In the end it should be doable, but you might need to make your own implementation of Ellipse. I would recommend making a small test SVG and trying to get that to work.

But easiest would be converting the SVG paths if possible.

2 Likes