Unity UI SVG support script

SVG in Unity UI



You've all be asking so we worked on it and are ready to share at least the first step towards SVG support inside Unity UI. We are sharing the script this way to get it into your hands faster so we can get feedback but it will be included in a future version of the SVG package. This also may not be the final version that gets shipped in the package but it should be pretty close.

Please let us know if you use this and if it works or horribly breaks in some manor such that we can look into why.

As a note Unity UI render mode of "Screen Space - Overlay" does not have AA support, if you need AA to make it really crisp you might want to switch the Canvas to be "Screen Space - Camera"

Usage:
For simple SVG images simply place the SVGImage component on the GameObject.

For a Gradient SVG Image you will need to create a "Gradient" material which has the "Unlit/GradientVector" shader assigned. You can then assign the material to the SVG Image component. You will also have to change the Canvas "Additional Shader Channel" to include "TextCoord2" otherwise the UI system will ignore that data.

 

Thanks so much for this. I'd love to test this out, but I'm getting some console errors after importing the scripts and folder to an empty 2018.2.6f1 project that has the Vector Graphics package installed.

I believe the SVGImage script is missing the namespace: using UnityEngine.Experimental.Rendering for VertexAttribute, and I'm getting a compilation error that GameObjectUtility does not contain a definition for 'EnsureUniqueNameForSibling'.

 

Well ok then I'll take a look asap to see what's up. I did build it on 18.3 so maybe there is new apis. Thanks

 

@Korindian I've updated the scripts above. You were 100% right. The one API went from Experimental to non between 18.2 and 18.3 (version i was using). And the other changed name from GetUniqueName to EnsureUniqueName. All should be good now.

Thanks again.

 

Thanks. Here are my initial impressions (while you were updating the scripts, I just commented out the GameObjectUtility line):

1. MSAA works if UI camera is set to forward and UI Canvas is set to Screen Space Camera, as you mentioned. However, to get SVGs looking properly round (for example, a 32x32 small svg circle) and not aliased, I need to use 8x MSAA, which really increases required memory. In addition, using MSAA also affects any small point size text (using Text Mesh Pro), which isn't ideal.

2. MSAA will not work if there is a scene camera set to deferred, even with a UI camera set to forward, depth only, and the UI set to Screen Space Camera.

3. For deferred, It is also not possible to use the Post Processing Stack's AA methods, like FXAA and SMAA (TAA doesn't work with SVGs) to only affect the UI camera as it will also affect any cameras at a lower depth beneath it. Also these AA options really mess with Text Mesh Pro SDF font rendering in the canvas.

4. Does this mean that SVGs will have no viable AA in the deferred pipeline?

5. Would it be possible to do some shader-based antialiasing instead, like how the Asset Store's SVG Importer and some other assets do?

6. You may get more people testing this out if posted in the UI forum!

7. UI SVGs don't work with Masks.

Edit: Sorry made a few edits to the original post.

 

@Korindian so in all honesty questions 1-5 I'll need to leave to the svg guys and will poke them tomorrow to get their opinions. I only really made the AA comment in the initial post as I know a lot of UI users don't know that AA isn't supported.

As for question 6 yup that's the plan but wanted to do small baby steps. It's cross posted in the main svg forum post so the people that really care might see it first.

As for masks good point I should be able to correct that tomorrow.

Thanks again for taking the initial plunge feed back is invaluable.

 

Updated the original assets again with the fix for masking SVGs in the UI and some compile defines so i don't make a mistake of updating the API while testing in 18.3.

 

Thanks for responding. I just perused that thread and it's great to see Unity's already been considering various alternatives.

To add some more AA suggestions:

- Shapes2D, an asset on the Asset Store, recently went open source, so if you're looking for an example of one blur based approach (see documentation under Anti-Aliasing) implementation of AA, it's there. I didn't end up using it for UI as the pixels of the shape tend to snap into place, even with pixel perfect disabled.

- SVGImporter works in the UI with Screen Space Overlay using its own form of AA.

- Perhaps having a PPS layer only affect the UI using FXAA or SMAA or TAA, separate from the scene?

- Noesis GUI from what I remember uses a couple of forms of AA which only affect the UI. It is free to download.

- I'd be ok with extending boundaries for AA, as mentioned in the other thread, as long as it gives smooth edges and we can plan around the size of the increased borders.

- The only wish is to have this AA for UI SVGs be separate from text and scene AA so we can tweak as needed.

I've been on a long quest to find true resolution independent UI in Unity that's easy to use and performs well in Unity. It really made me glad to see you guys tackle this with SVGs, and your work is very much appreciated.

Recently I've found SDF images are working better than SVGs, with no jaggies, but there are limitations with that as well. It would be great to have a built-in solution that works with AA in deferred though. I really hope you can figure this one out soon. All the best.

 

Hi, I'm having trouble getting a gradient to work. I've followed the steps above but no dice. I do see the gradient working properly when I select the top level SVG asset w/the SpriteRenderer so I suspect that the data is fine.

 

I forgot to mention a step. On the Canvas change the additional shader property's to include "TextCoord2".

 

This is great, been wanting this for a while. It will be nice when you get AA in Screen Space - Overlay. I don't really like Screen Space - Camera; Also having separate AA for UI instead of using Global MSAA setting.

Great progress so far. Excited for more!

 

Hi, the sprite is not updated when you set a new value.

public Sprite sprite
{
get { return m_Sprite; }
set
{
if (m_Sprite != value)
{ SetAllDirty();}
}
}

 

Worked like a charm, thank you so much for this, it's exactly what I was looking for! Lifesaver!

 

Sorry for the delay the forum wasn't saying there were new threads. Oh drat your right .

Edit: As the SVG package has the script in it now, please download preview.20 and the fix is in there. Thanks for the feedback.

 

Thanks for getting UI Canvas support working!

We have several full-screen vector art backgrounds that are currently imported as PNG files, which greatly increase our build size. We plan to add more, so we need a better solution.

The current SVG support seems like it's in good shape except that there is no equivalent to the Image component's "Set Native Size".

Our artist currently exports PNG files from Illustrator at the same reference resolution as our Unity Canvas so that we can just import things and hit the "Set Native Size" button. It's important that we have the same functionality for SVG files, but currently, all SVGs seem to be scaled to a 100x100 box.

The SVG files I'm using right seem to have the required information, but specified in two different ways:

Random SVG from Google:

Adobe Illustrator:

I think sprites should be sized based on the above information, and as a fallback, use the bounds of the SVG's vertices, and assume the SVG's units map to Unity UI units.

 

This fixed it. The Sprite Editor's "W" and "H" now show the correct size.

I tried fixing up SVGImageEditor.cs to display the builtin "Set Native Size" button, but Graphic.SetNativeSize seems to have no effect. I implemented it myself using (rectTransform.sizeDelta = sprite.rect.size).

At this point, I can import small simple elements and size them correctly, but I tried to import a large complex SVG, and the result was a mess. The image displayed correctly in the Sprite Editor, but in the scene, it was just a jumble of random colors. The image does contain gradients, but I don't think that fully explains what I'm seeing. The imported SVG asset also has a second child (***Atlas), but I have no idea where that came from. I've sent the image via PM.

Thanks again =D

 

It turns out it was the gradients. Following these two steps fixed it:

1) Make sure the SVG Image has a material that uses the "Unlit/VectorGradient" shader
2) Make sure that the Canvas has "TexCoord2" in the "Additional Shader Channels"

Thanks!

 

Unit version: 2018.2.14f1
Vector Graphics version: 1.0.0-preview.21

I've been trying the new beta SVG support and I found an issue.
Using a SVG with a gradient, if I try to add more than one of the same SVG, the others stop being drawn in the scene.
In the first attached screen shot, you can see that with both RedGradient Game Objects active, only the first is displayed.
In the second screen shot, if I deactivate the first Game Object, the second RedGradient is now drawn.
If I add a second, different SVG file with a gradient, then some will be drawn, some won't and if I deactivate/reactivate the Game Objects, some will be come visible and others will become invisible.

This only seems to happen with SVG asset that have gradients, I have been able to add many 'normal' SVG assets of the same type to the scene with no.

I have also attached an unitypackage with a scene and the two gradient SVG files that I was experimenting with.

Any feedback on this would be great!
Thanks,
Dave

 

@mcoted3d Hi... I hate to ask, but since it's been about 2 months I figured what's the harm, but is there any update as to alternate forms of anti-aliasing to MSAA for HDRP deferred? A rough estimate of when an experimental version may exist?

I'm trying to evaluate whether I can use Unity's SVGs for UI in HDRP deferred vs. 3rd party UI solutions. Any info would be greatly appreciated.

 

Here's a copy of SVGImage with Preserve Aspect support

 

Everything works great in the Editor and I've finished setting up my UI however the following compilation error makes it impossible to run my game.

Code (CSharp):

1. Assets/Editor/SVGImageEditor.cs(10,22): error CS0433: The imported type `SVGImage' is defined multiple times
2.  

This error happens at both Line 10: ` [CustomEditor(typeof(SVGImage))]` and Line 116 ` go.AddComponent<SVGImage>();`

The error that I'm getting from VisualStudio is as follows:

Error: The type 'SVGImage' exists in both 'Assembly-CSharp, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null' and 'Unity.VectorGraphics, Version=0.0.0.0, Culuture=neutral, PublicKeyToken=null'

I should add that I do have the SVG Preview package installed. I am running Unity 2018.20f2

 

I imported a simple star with gradient and the gradient is broken. Is there something I am missing?

Here in this scene I have 5000 sprites for performance testing and as soon as a svg with gradient is used, I lose the color.

 

Oh! So simple... My bad Got it!

 

Hey so I'll start by saying I'm an embedded guy, new to Unity however we've chosen it as our platform for an AR tool we're working on. This is off-topic but I bet this is a use-case for SVG's your team hasn't anticipated ( and likely won't support ).

We previously used SVG assets for our overlays as it's trivial to interact with them and switch on/off layers etc. I'm having a bit of an issue, mostly because I'm out of my element. I need to, at run-time load the SVG from a string I haul from a Database, render it to a sprite and then be able to interact with it ( Dynamically modify the SVG )

Currently, I read in the string as an XML doc and every time something needs to be changed that XML doc gets modified and we re-render the SVG to a sprite. The issue is this locks up the main thread, and this workload isn't threadsafe due to Unity's API not being thread-safe.

Can you think of any workaround for us? Can we actually interact with the Sprite and toggle elements without having to run the Tessellation again? My gut feeling is this isn't the case and we need to find another approach.

 

@mcote3d : fabulous job this is really coming along nicely, and once finished this package will be a total lifechanger in terms of UI development!

Here's what I'm getting (Editor 2018.3.0f2, package preview.22 version)

If I drag and drop the svg asset from the Assets folder directly into the viewport. We see that it shows correctly.


However, if I create an SVGImage from the GameObject->UI menu, then assign the sprite and the appropriate shader:



Notice the bottom part of the gradient texture is cut off. Toying around with the the tiling and offset parameters for the texture changes the sampling position and scaling of the coordinates in the texture, but does not solve the problem, as seen below:



Perhaps I'm getting something wrong here... ? Anyways, thanks for the input and great work

 

Have you done that for your gradient vector? If it's not enabled, it will not render correctly.

 

Hi guys, I was looking to modify this script to add in 9 Slicing, but I came up against the issue of the sprites border not being set properly. I thought it should just be a change to both line 113 and 114 of VectorSprite.cs however I get a NullReferenceException for the supplied texture when I do that. From there I should be able to scale the vertices as required by the borders.

On another note, when I failed to implement the vector 9 slicing, I tried switching it to TexturedSprite mode so that I could 9 Slice it the old fashioned way. However I do not seem to be able to set the borders properly in the Sprite Editor.

 

Absolutely fixed it. Awesome, thanks!

 

I have a problem with it. When I attach the sprite to SVGImage component, happening this. why? the shader is VectorGradient

 

Already Texcoord 2 is checked in Additional Channel. Render Mode is Overlay, can be because of it?

Edit: Fixed it. I had to create a material and set to VectorGradient. Thanks

 

Well, that is fixed but the edges of SVG sprite are too poor. Why is this happening? Also, it is happening with Sprite too. you can see the image.

 

which file? SVGImage components? or SVG images? if the component, I downloaded here. I send you vector graphics package

 

but the all SVG files importing as the same. I think I exported wrongly, Anyway, you can take it.

 

is there no another solution? why the sprite's edges are too bad? SVG files are like these too. this may be worst. Also, I did your way but these are the same again

 

Hi @freedom667 ,
There is actually a way to get rid of aliased edges. I think results aren't really bad. I use that in my game. Let me show you...


First, go to the culling mask property of the default camera and disable UI layer.


Then create a new camera as a child of the default camera. This camera is going to be for UI. So, set its clear flags property to depth only and disable every layer but UI in culling mask property.


And then, go to your canvas and set its properties like in the picture.

Thus, we have 2 cameras. First one renders the world, and second one renders the UI.


When all is done, you should have better edges. Better than normal in my game

---------------------

If edges are still very bad, try the following.

If you have a post-processing profile, disable its antialiasing. Then create a new post-processing profile and enable only antialiasing. We will use this new profile on our UI camera.
Apply this new post-processing profile on your UI camera

Regards,
amcagurban

 

it is good thanks for interesting this problem. you spend any time for this but I can'T set to Screen Space - Camera. Because I have a spotlight mask and this does not work on Screen Space - Camera