Godot: Workaround for SVG assets when NanoSVG fails

[DleanJeans]

Godot uses NanoSVG which is stupidly simple so it's limited in some way.

If you encounter any problems:

• Use Inkscape to export your SVG assets (in case you use Affinity Designer, not sure about Adobe Illustrator though)
• Convert everything to paths if possible (clipping, texts,...)
• Embedded images are not supported
• Just export to rasterized images if it's not worth it

[groud]

But what would the use cases behind providing such functionalities ?
Using SVG is already rare and almost useless, what would be the point of adding support for SVG's text or embedded images while you can already do that with sprite and label ?

The only reason NanoSVG was added is because it's light and allowed use to generate different icons sizes for the editor. It's not worth adding a 40MB svg rasterizing library if there no real case uses. And if you definitely need more option, just bind another library using GDnative.

[DleanJeans]

Yeah, this is more of a discussion thread to warn other users about those unsupported features, and the workaround.
Personally, I only use SVG for flat graphics.

[Zylann]

@groud 2D meshes. Also, ironically, there is an optimization doable with sprites that changes their geometry to take out transparent pixels and reduce overdraw... effectively making it a 2D mesh too under the hood^^

[groud]

@Zylann Godot will have it's own way of handling 2D meshes, no need to directly rasterize more than basic shapes from SVGs. Maybe a tool to convert SVGs to Godot's format may be interesting, but I doubt there's any real use case behind that.

[hubbyist]

Converting SVGs to Godot's format may be useful for adding multi layer maps as single assets and processing it in code. Filtering groups by ID and rastering them to use as sprites may make editing large maps easier. Just edit a single map svg file then code will rebuild all sprites while loading game. This work flow would be both designer and vcs friendly for turn based strategy games with huge maps I think.

[groud]

Honestly, no one edits his maps using a multi-layer SVG, there's no realistic use case for that. And if there was, just use the export features of your SVG editors to generate sprites. It's a lot more common workflow than doing that from the importer. If it's really required, just code an importer with GDnative, as it's not something that is going to be used by most users.

[mhilbrunner]

Thanks for this. IMO, this should go to the docs describing assets workflow or something as its more of a "gotchas/workaround for commons issue" and "these are the limitations of SVG support in Godot" situation, rather than something that can be implemented in Godot directly.

[poke1024]

I started https://github.com/poke1024/godot_svg_plus yesterday to import SVGs as meshes (well, Polygon2Ds currently, as there are no 2d meshes yet). As for the use case: the only reason people continue using sprite textures is terrible tooling IMHO; vectors would be the natural way to go for a lot of art styles.

[BrahRah]

I would LOVE full svg support! I've been waiting for years for a good game engine that supports 2D vector art!!! All my art is vector based and since steve jobs killed flash there has been no alternative. Almost no game engine supports svgs, especially animated ones. There are a lot of flash artists and gamedevs out there that still are looking for an alternative. Vector based games look awesome and are perfectly scalable. 2D Vector sprites can be any size!!! They always look perfect and it reduces a games size very drastically. I really loved flash games and animations. If you combine the visual scripting with a good timeline editor that has an Abobe Flash like feel I can guarantee that you will gain everyone from the flash scene. (which is really huge btw.) I've kind of given up and just convert my art in pngs now but I hate doing this!!!! God damn shitty outdated raster crap!!! If I weren't so poor I'd throw a lot of money at you to implement svg support! Creating assets animating them and implementing code in one software. Those where the times T_T Sry for ranting, I kinda started late, learned a lot of flash pro and had to witness it's decline just when I had learned for a couple of years and was ready to get going.....

[blurymind]

@poke1024 I think it would be amazing if svg could be imported as meshes. Very good idea.

One ideal use of svg would be polygon2d nodes and 2d mesh deformation. I think its possible that it must have crossed @reduz 's mind, since there was interest in adding support for that around the time the 2d meshes were added to godot.

I wish polygon2d had support for vertex color use as an alternative to bitmap textures.
In that sense then when importing an svg, godot could have the option to turn an svg into a geometry with colored polygons for the color fills.

This would be very exciting - as it would allow beautiful resolution independent crispy line artwork- similar to what we had when flash was a viable game engine option.

Another approach to achieve that look would be #21056 , but that would be a different way to approach animation altogether imo

[reduz]

Nothing should stop conversion of SVG to meshes at this point, since 3.1 supports Mesh2D. No one worked on it, though.

[blurymind]

@reduz do you think it might attract developers if I file a feature request about it?
Not sure if it would help

[poke1024]

@blurymind @reduz Well, I've been working on this, though in a very experimental hobbyist fashion (and C++11, since the thing's main focus is love2d):

https://github.com/poke1024/tove2d

Here's a demo of the current Godot integration, that is a subset of the love2d features (no gradient support currently due to missing uniform arrays for shaders):

https://www.dropbox.com/s/qsr2l3zijbsi6h9/gdtove.v1.mp4?dl=0

I'm not claiming that this is suitable for Godot integration as it is, still, whoever is going to do that, might want to look in some detail at this. Making proper meshes out of SVGs is not that trivial.

Oh, did I mention that I'd love to see SVG/vector graphics in Godot?

[blurymind]

@poke1024 this would be incredibly exciting if we could load the svg mesh like that into a polygon2d node and bind some bones to the vertices it generates - edit wights with the uv editor :D

Another idea is to hook the detail slider to zoom value of the camera- that way we could get some easy LOD on static objects

Is this the git:
https://github.com/poke1024/godot_svg_plus
?

@reduz the polygon2d meshes that can be made with the uv editor are super limited
See #20601

[poke1024]

@blurymind No, svg_plus is abandoned. I haven't written up proper docs yet, but to build the tove godot module, do this:

(1) checkout https://github.com/poke1024/tove2d
(2) replace tove2d/godot/tovegd/src (a placeholder) with tove2d/src/ (the actual source)
(3) move tove2d/godot/tovegd into your Godot source code's modules folder
(4) now build Godot

[blurymind]

@poke1024 you note in
https://github.com/poke1024/tove2d/blob/master/docs/Animation.md
that it is designed for animating svg.
Can it do that in godot?

[adabru]

If some features of your svg are unsupported when importing it as texture, you can use groboclown's svg import plugin. For usage, inkscape must be installed on your machine. The plugin uses inkscape's cli-interface to rasterize the image and provide the svg as a Texture to the Godot editor.

[poke1024]

I've spent some more time on my experimental Godot Editor module for vector graphics. Here's a demo: https://www.youtube.com/watch?v=EsTSf5dytbs

[michaelsjackson]

Oh, did I mention that I'd love to see SVG/vector graphics in Godot?

Your later version seems to be great, only if it could be compiled on my machine as well, ubuntu 16.04, offering compiled versions could be one solution.

[michaelsjackson]

I've spent some more time on my experimental Godot Editor module for vector graphics. Here's a demo: https://www.youtube.com/watch?v=EsTSf5dytbs

If godot team could add this officially into the next godot version the compilation problems would be solved as well. I would use this feature a lot, as it would allow importing sharp 2d maps with small elements. When using current possible png images, those small elements are not readable, thus unusable. In short, I would like to have big and small elements in same map, all sharp, thus readable if used for text as svg.

[michaelsjackson]

@groud 2D meshes. Also, ironically, there is an optimization doable with sprites that changes their geometry to take out transparent pixels and reduce overdraw... effectively making it a 2D mesh too under the hood^^

It is funny we can import 3D meshes from Blender into godot 3, but no 2D meshes from Blender into godot 3. Is there a way to convert 3D meshes to 2D meshes in Blender, but still we can not import them into the 2D view of godot, only to the 3D view, strange decisions.

[michaelsjackson]

Nothing should stop conversion of SVG to meshes at this point, since 3.1 supports Mesh2D. No one worked on it, though.

Can Blender convert Mesh3D to Mesh2D? If yes, this could be the trick.

[mechPenSketch]

I have a question on OP's first suggestion:

• Use Inkscape to export your SVG assets (in case you use Affinity Designer, not sure about Adobe Illustrator though)

I thought Inkscape already saves in svg format. Is it because Inkscape would save an a different format by default, or are you referring to saving it as a Plain svg, or optimized?

[Calinou]

@mechPenSketch By "export your SVG assets", OP means you could use Inkscape to export your SVG assets to PNG files. Nanosvg doesn't always work with more complex vectors, especially those using Inkscape-specific features.