Support for svg vector graphics

Question

I've been intrigued by the idea of being able to use vector graphics in game engines, both for 2D UI / HUD elements as well as textures on 3D surfaces. While this doesn't make sense for anything realistic, projects with a cartoony style using sharp edges would benefit from using SVG images directly. Since I've considered creating my own Minecraft like blocky engine, I'm pondering such an approach for surface materials.

The advantage is obvious: A texture is resolution independent and will always be sharp, while its file size is also more tiny keeping the project small. I'm not sure how normal / roughness / displacement maps would be done from Inkscape, to my knowledge this is an untried concept as no one uses vector graphics for 3D texture sets, but it's one I'd like to jump on board with. It would also be interesting to try it on static objects and even rigged character models, where I presume I can pull the UV map in Inkscape and create shapes where every color needs to be.

Does Godot support svg natively yet, without expecting it to be converted to a pixel format like png? If yes does it work for spatial materials as well or just 2D graphics? What are the limitations in this regard, and any plans to fully support such a thing if the functionality isn't all there yet?

Bashan

Answer 1

@MirceaKitsune said: Does Godot support svg natively yet, without expecting it to be converted to a pixel format like png?

(bold emphasis mine)

No and I'd give it near 0 chances of ever supporting that. Godot does however have 2D meshes, that might be of some interest perhaps? As for SVG as a texture on a 3D mesh, I'm not sure it even makes any sense.

PS. Godot can load SVG's but they are converted into raster on import.

Overreach

Answer 2

@Megalomaniak said:

@MirceaKitsune said: Does Godot support svg natively yet, without expecting it to be converted to a pixel format like png?

(bold emphasis mine)

No and I'd give it near 0 chances of ever supporting that. Godot does however have 2D meshes, that might be of some interest perhaps? As for SVG as a texture on a 3D mesh, I'm not sure it even makes any sense.

PS. Godot can load SVG's but they are converted into raster on import.

I understand... it would be a tricky thing to support indeed. Like I said the advantage would be fully sharp patterns independent of screen resolution, and very small file size for textures at that.

Perhaps an in-between may still be possible? The texture could be included as svg but converted when the engine starts, at a resolution which can be configured by the user based on how sharp they want it to be. But you said on import, IIRC that's a thing the editor does... if the engine doesn't do it on startup it doesn't sound like even that would work. Is it at least possible to have the engine convert a svg to raster in memory at a specified resolution, then use the result in materials like any other image?

Bashan

Answer 3

Godot already supports SVG, but they are converted into bitmaps. In fact, you cannot ever display vector graphics at all on LCD monitors, so everything is always rasterized. Many years ago there were real vector CRT monitors (used for games like Asteriods) and those could actually display vectors natively. But anything modern is pixel based. Even Flash had to rasterize the vectors into bitmaps in order to show them on a screen. So it's rather pointless, and real time rasterization is slow (but possible). It is much easier and faster to just output a high-res PNG from GIMP and use that in games.

Hawes

Answer 4

I came across this command line tool https://github.com/Mazatech/amanithsvg-sdk/tree/master/examples/svg2bitmap, and it seems to be able to generate texture atlas (sprites) by rendering SVG elements and pack them. It's the first time I've seen something like this, i.e. the generation of packed sprites, at runtime, starting from one or more SVG files. Has such an option ever been investigated for Godot?

Konstantin

Answer 5

Godot has had some SVG support for a few years. It uses the ThorVG library in 4.0 (and NanoSVG previously) to render SVG as a bitmap on demand at whatever resolution is needed. They don't guarantee it'll work for every SVG file but if you're making your own SVG icons or sprites and they look right in Godot, great.

What Godot CAN'T do, but browser javascript and some obscure game engines can, is change the color, line thickness, visibility, etc, of individual layers or shapes within an SVG graphic.

https://docs.godotengine.org/en/latest/tutorials/assets_pipeline/importing_images.html#supported-image-formats

Outrageous

Answer 6

Game engines rely on hardware acceleration, and modern day GPU architectures are built to deal with either bitmaps or triangles. Anything else must be converted into one of those before it can be used by the hardware. That's the price of insane processing speeds we get out of them.

So any type of "native" support for something like realtime SVG rasterization is out of the question for purely technical reasons.

Tarbes

Answer 7

Yep. I still think there's potential in importing the SVG's into 2D meshes a-la blenders grease pencil(which is 3D but gives an idea of what I mean). So that would be cool to see.

Overreach

Answer 8

So any type of "native" support for something like realtime SVG rasterization is out of the question for purely technical reasons.

No, it's been done, using triangles like 3D and a neat trick with the stencil buffer. It's just little-used because everyone makes 3D and bitmap-2D games. Web browsers have been using a similar acceleration technique for about 10 years though.

Outrageous

Answer 9

No, it's been done

I'd like to see it. Note that what I meant by "native realtime rasterization" would include adaptive triangulation of beziers on the gpu.

Tarbes

Answer 10

Note that what I meant by "native realtime rasterization" would include adaptive triangulation of beziers on the gpu.

Which would still just leave an approximation of the limit surface. But since the output is itself limited it would suffice.

Overreach

Answer 11

I must admit that I don't see a way to do this via gpu's vertex/pixel pipeline in an efficient manner.

Tarbes

Answer 12

That's the key thing: "in an efficient manner".

Using vector art as a texture could be done with a shader without too much trouble, but it won't be as efficient. I've done basic ones like pass line segment data to a pixel shader that then renders roads (with lanes) and train lines onto the surface using signed distance fields, but it was fairly simplistic. A full on SVG implementation would be pretty heavy on the gpu.
https://shadertoy.com has examples of SVG rendering with pixel shaders, but so far all of the examples I've looked at require the SVG to be rewritten into GLSL (not surprising, shadertoy doesn't allow custom data from outside of the shader itself) and don't cover the full feature set.

Yardage

Answer 13

That's the key thing: "in an efficient manner".

Of course 😃

It's one thing to render a distance field of a single bezier segment, but handling SDFs for filled shapes delimited by an arbitrary number of (possibly overlapping) bezier segments would be virtually impossible.

Tarbes

Answer 14

I don't know about a complete and totally efficient SVG implementation. What I remember was good enough for realtime SVG filled-polygon rendering with some GPU acceleration. Curves were rendered as segmented polygons. It was useful if you wanted to make an approximation of a true vector graphics game (a pretty accurate approximation with modern high resolution monitors) using art drawn in Illustrator, Inkscape, etc.

Now I remember the real reason hardly anyone uses it: except for primitive arcade-style games, 2D vector graphics look terrible, like "CalArts" "art".

Outrageous

Answer 15

I do use Inkscape for importing my hand-drawn art as pngs (I scan in black and white drawings as png, convert to vector, then back to png), It's advantageous in this regard because you can resize svgs to a proper size for export without distortion. I don't see the advantage of having a third axis in 3d though. I will say this - I love making UI elements in Inkscape then exporting to PNG because the export quality is high and allows for better clarity when resizing.

Politics

Answer 16

If your SVG is mono-colored and not overlapping itself, consider converting your library of svg's into a single font file and import that into Godot as a "Multichanneled Sigend Distance Field" (SDF) by enabling the checkbox during font import. Then assign the font on a Label node. Especially useful for UI icons of course.

This allows for crisp resolution, custom colors and shadows.

Thorson