Import SVG as tree of Path2D

[tobiasBora]

Describe the project you are working on

I'm trying to use Godot to design advanced 2D animations. Often, I want to animate parts of a large SVG image, like:

Here in synfig, I can import the .svg (actually converted to .sif) and animate separately each path contained in the image… and my goal is to simulate this in Godot to create more advanced animations (so I don't mind so much about real time since I want to render the animation to a video)

Describe the problem or limitation you are having in your project

For now, importing a Svg just creates a rasterized image… but it does not create one Path2D per path. So I cannot animate in godot this svg image.

Describe the feature / enhancement and how it helps to overcome the problem or limitation

Add an import feature that basically loop over the SVG file, and create a new group/polygon2D/path2D/… per svg element, with the appropriate color/texture, like in the above synfig picture.

This might be related to #2924

Describe how your proposal will work, with code, pseudo-code, mock-ups, and/or diagrams

Create a new SVG import mode, then loop over the svg structure (maybe ThorVG could help to parse the file as it is already in the core?), and create a polygon2D/path2D… based on the SVG path. If these options are not possible, or to get higher efficiency, it might be possible instead to create 2d meshes instead. This can maybe be configured during the import mechanism?

If this enhancement will not be used often, can it be worked around with a few lines of script?

Not as far as I know.

Is there a reason why this should be core and not an add-on in the asset library?

This kind of addons with a small amount of code will surely get abandoned… and for something as fundamental as importing images it would be great to have in in core. Also, I don't know if path2D is enough to represent any SVG path (notably holes?), so this might require some modification in core?

[theraot]

I think you want Polygon2D or Line2D.

If we can easily get Path2D out of an SVG, we might also use them to define paths for enemies to follow or similar. So that would be useful too.

[Calinou]

I like the idea, but since Polygon2D or Line2D can only draw a single color (or texture), you would need one node per distinct color present in the source SVG. This can quickly add up to dozens of nodes (and lots of draw calls), not to mention gradients wouldn't be supported.

[tobiasBora]

Glad you like the proposal!

you would need one node per distinct color present in the source SVG.

I may even prefer one node per svg path, as I may want to animate separately each path (unless it is possible to later separate a Pologon2D into multiple Polygons?). But this may be configurable in the options for a tradeoff between efficiency and flexibility. This would certainly increase even more the number of nodes… but SVG usually contain a reasonable number of paths so my hope is that this would still be not too high… any anyway I don't care so much about efficiency here if I go for non-realtime rendering.

Actually, can Polygon2D and alike already deal with holes in the shape?

[aXu-AP]

Polygon2D can't handle holes, here's an issue for that: #9127
I think simpler gradients shouldn't be a problem since they can be imported as GradientTexture2D. More complex radial gradients can't be supported, however.

[lostminds]

Maybe you'd be interested in https://github.com/SlugFiller/godot-vector2d which does more or less what I think it is you're after.

[tobiasBora]

Maybe you'd be interested in https://github.com/SlugFiller/godot-vector2d which does more or less what I think it is you're after.

Very interesting, thanks! It seems to deal with bezier curve from my understanding which is awesome. Though it is a bit hard to test since I would need to manually build Godot until godotengine/godot#75278 is merged (and sadly it got no attention in the last year). But this seems like a good start to integrate in Godot, even if this needs non-negligible polishing: The vector shape editor is extremely bare bones, and lacks many quality of life features, like … box/lasso selection, or scale/rotate for multiple selected points..