Download

Getting SVG shapes into UMG

Hi all,
didn’t like how PNGs got filtered when moving my mockup from Photoshop to UMG, so I packaged my shapes in a font file and got perfect vector graphics for the HUD :slight_smile:
forum.png
Super quick tutorial here (posted to my dev blog), let me know if you have any questions.

Neat - are you planning to use the font materials to do things like fill the boost bar?

Right now I’m masking out the boost bar glyph by setting the X scale of the canvas panel wrapping it, and then I just tint it based on ship speed. Will get into font materials to see what more can be done :slight_smile:

Honestly this wouldn’t be a bad idea for an actual feature for umg… Instead of using font files using actual svg :open_mouth:

Nifty, keep us posted on how it turns out!

And +1 for what Josh said. :slight_smile:

cool you just give me the answer. :cool:

After using a few font awesome icons in HUD, I was wondering if a custom font could work as a solution for custom vectorial shape. It looks great. thanks for sharing your result. :slight_smile:

+1

Yeah getting SVGs into UMG native feels like it should be a breeze for seasoned devs at epic :slight_smile:

Here’s some moving pictures of the HUD in action!

I don’t believe UE4 has support for rasterizing SVGs in real time. Fonts are instead translated into raster distance fields on import. You can easily import your own distance field graphics derived from your SVGs without using the font system.

SVG is significantly less performant than non vector graphics. this is due to the rasterizing of said graphics. Traditionally an image sent to a gpu is already a raster. SVG needs rasterization in realtime to be useful. so you pay for that conversion. the only benefit is reduced disk space from vector graphics, and they are not always more efficient in terms of space either.

I implemented a realtime Bresenham’s rasterizing in my own game engine, it was not too difficult to implement but it’s a hard problem to make faster and honestly not really that beneficial at all at-least from what i seen from my game engine, it was not worth the trouble, you don’t really gain anything. you get a file type sure but you pay for raster.

We had SVG ui’s in ue before, it was called scaleform and it was honestly…garbage im my opinion.

I’d honestly say, continue on how you’re going, this is how i do my ui for ona even though my ui is extremely minimal. Your’s is looking pretty damned sweet.

SaxonRah, I don’t understand your position, are you saying that using SVGs as bzxo did is good, or not?

Anyway, from my unexpert point of view, it looks awesome! Congrats bzxo!

No, he gave some performance considerations which is always more than welcome. :slight_smile:

This only applies to realtime rasterisation, though - not supporting an SVG import that converts to a raster distance field. This is all the font import is doing at the moment, it would just be a neater way of doing it.

True. If one did want to look into said problem this paper would be of use.
paper link
bytewrangler info

Could we get SVG support as standalone feature? It would help in so many places.

I found this: https://www.unrealengine.com/marketplace/svg-importer-plugin#
Maybe it is exactly what you asked for!
Instead of going through the font import pipeline.

[video]youtube.com/watch?v=MvokfyihNXs [/video]

To be honest, this should be part of the engine. We don’t also rasterize fonts by hand(which used to be an enormous pain in the ***). Supporting popular 3D or 2D graphic formats out of the box is the way to go. I understand it’s nice for someone to earn money from a niche plugin, but SVG isn’t unpopular and also having a plugin for anything like this is a pain in the end.

Ive found this to. I use fonts for icons in UMG.

actually i made my font on fontello, there u can add any svg and export the font!

Any new info on this? what kind of support does the engine have for svg?