Since I use SVGs a lot and UE4 does not support them natively, I thought it would be a good idea to write my own importer 
Besides from creating textures from the SVGs, the plugin also allows to import them as distance fields, to create sharp masks in a material.
See the video for a demonstration:
Here is an example how the distance field importer works, the resulting texture has only 85 kB:
This is great! Nice work - distance fields are a bit black magic for me though - how in the blazes do they work?
Thanks!
This paper from Valve has is a very good explanation how they work. The multichannel part just takes the idea one step further and uses not just a greyscale image, but rather all colors to pack more information into the distance field (Valve also mentions this on the last page of their paper). This allows for example sharp corners in the result.
Usually you would need a custom shader to convert the distance field back into a useable mask, but luckily EPIC already provides a “DistanceField” node in the material editor (as you can see in the screenshot). This is because they use the same technique to cache fonts you want to use in your game (because recreating a font character from a distance field is a lot cheaper than drawing it from its TTF outlines).
The plugin is finally available on the marketplace! 
Really cool plugin! Well done.
I have some questions:
Thank you
If you have a shape that you think should work but does not, feel free to [EMAIL=“cultrarius@posteo.de”]send it to me and I will have a look at it. SVGs can be surprisingly complex and I could not test every possibility before releasing the plugin. I also plan to improve arc support for the plugin, because the current implementation does not seem to handle them correctly.
As for the outline: that is a great idea that I did not consider before, thanks
But I just tested it and it works exactly as you said!
See the following material, as you increase the “Outline Threshold” parameter, the thickness of the outline increases. The thickness of the outline is also largely dependent on the “Pixel Range” import parameter - larger values create thicker outlines.
Sent you an email with the SVG in question.
Ah, perfect! The outlines only go inwards though, correct? They don’t add onto the outer edge?
Yes, exactly, they only go inwards. Also, after a certain thickness, all kinds of render artefacts start to appear, so it is only applicable for small outlines.
Besides outlines, you can easily do drop shadows too with distance fields. That Valve paper linked here earlier had example for that too. You basically just offset the same distance field a bit and draw the shadow if the main shape isn’t drawing anything there already
That is also a great idea
Here is an example material that achieves this effect:
Also, one user noticed that UI materials may create pixelized icons when used with very small icons. The solution is to increase the edge softness, but that of course makes the large icons look blurry.
His solution is to adjust the edge softness with this addition to the material:
Hi, am looking at getting into UE and came across your plugin. I’m trying to understand if your import process treats SVGs as actual vector objects, or is the content converted to bitmap once imported? Is it only when the imported object is used as a mask that you get the value of the vector data?
I’m asking because I’ve spent a long time looking for a reasonably priced game development tool that supports display of real vector objects (and is able to colorize/affect them via script or code). The game I’m looking to do relies on a lot of primitive shape assets that need to scale and recolor, and building them all as images would seemingly be inefficient.
Thanks in advance for your response!
During the import process, the SVG is rendered as image - so there is no way to access the SVG information at runtime. If you choose to import the SVG as distance field (probably what you mean with ‘mask’) then you get several benefits: very small texture sizes and infinite up-scaling with sharp edges. The disadvantage is that does not work well for complex shapes, but for simple shapes it is perfect.
(I deleted my other, now obsolete, post)
I had problems to find the Distance Field Nodes you used in your Screenshots. But in the meantime I figured it out and want to share the process with everyone else:
“DistanceField” Node: It does not pop up in the palette (nor in the Documentation at all), because it is an Editor Material Function that has “Expose to Library” set to OFF. To get it: In the content browser click on view options, enable Engine Content. Go to EngineContent/Functions/Engine_MaterialFunctions01/Texturing/DistanceFields Open it, click on the free grid space, look at the Details panel and check “Expose to Library”. Now you can find it easily when building your material.
The “DistanceFieldTexture” node is just a TextureSample as Parameter and named like this. <rant> For newbies like me, this is always confusing when trying to follow UE4 docs or tutorials oO</rant>
I did play around with some sample Distance Fields I snatched from google image search and: Settings on the material and the file itself are not that important. Works with different material domains as well as default image import settings (… not using specialized settings like VectorDisplacementMap).
And while I’d really like to see native SVG support (and realtime path modification) your Plugin and the SDFs format open up fun ways to display stuff:
I quickly put in some sine and noise with a nice result:
Eagerly awaiting 4.18 compatibility…
For whatever reason it’s not reading this:
Also not seeming to get any result from my SVG when brought in as a distance field. Assuming it’s 4.18 compatibility…? (First time trying the plugin so I can’t be sure)
Hey, the wait is over, 4.18 is released!
As for your SVG problem, the “RGBA rendering” works as intended:
But you probably want to import it as distance field texture:
This leads to an import error which says that the renderer cannot process your SVG paths (which can have any number of reasons), but it also suggests a solution:
To do that, you have to check the “Convert All Elements to Path” option in the import dialog:
This allows you to import the SVG, but as you can see there are some artefacts and the explosion is messed up:
The problem is you have too many contours in your SVG. The renderer “fills” every closed shape, but if you stack shapes onto one another then it creates a hole in the shape. You are stacking a lot of unnecessary shapes onto each other:
So, after a little bit of cleaning the SVG up in Inkscape by removing the unnecessary shapes, it can be imported rather nicely (at least the bullet):
As you can see, the explosion still creates artefacts, because there are too many overlapping shapes. I hope this helps you to create SVGs which can be nicely imported
Huh, they must have changed that in 4.17 or 4.18 then - thank you for the great writeup!
Just as a hint, you can also just import and use one of the materials used in the example project SVGImporterExamples.zip - Google Drive
Basic question about Signed Distance Fields Texture (I only have a very rough idea about how sdf work) - when import SVGs that contain colors or gradients as signed distance field, those colors/gradients won’t be imported?
