Why is my vector SVG displaying with jagged edges in UI Toolkit?

Unity Engine
,
1

Sorry, this will come down to my lack of knowledge. Why does this vector SVG image display with a jagged edged when applied as a background in UI Toolkit? I’ve tried changing most settings like the target resolution thinking it might fix it.

In the screen shot, on the left is UI Builder showing the vector image applied as a background on a button and on the right is the inspector showing the details of the SVG image.

9077593--1256314--upload_2023-6-13_23-49-36.png
9077593--1256314--upload_2023-6-13_23-49-36.png1210×1097 105 KB

2

Maybe the target resolution is too high and is not properly rendered in a smaller screen size (like UI Builder)?

Also, have you tried to switch the Viewport Options to “Preserve Viewport”?

3

SVG VectorImages currently doesn’t support the same kind of antialiasing technique that UI Toolkit uses internally, so it is expected that jagged edges will appear. We will eventually allow importing SVG with a “built-in” antialiasing solution, but we don’t have an ETA at this time.

Normally we would recommend to activate anti-alising on your camera, but unfortunately that doesn’t work for UI Toolkit since it is rendered after MSAA is resolved (for runtime at least, EditorWindows should work).

You have a few options to solve this:

  • Import your SVG assets as “Texture” or “Textured Sprite”, which allow specifying a antialising value, at the cost of losing the “infinite resolution” of the asset.
  • Render your UI in an MSAA-enabled RenderTexture that you can set on your PanelSettings asset. Then draw that texture over your world scene.

Hope this helps!

4

Is there any plans in the roadmap to add Anti-aliasing to the UI ToolKit Vector rendering for SVGs? Not having that for SVG rendering seems to be a show stopper for most. I would just resort to using PNG files until it is available.

5

It is planned. The only workaround right now is to render UI Toolkit in an MSAA-enabled RenderTexture, which is less than ideal and rather expensive.

6

If it helps the process to proceed faster – +1 to those waiting)))

7

we are also waiting

8

+1 (I invite everyone to vote there to increase visibility)

Voted in the roadmap under the “Vector Graphics support” item.

If we can used SVGs directly (or download them dynamically), this would be useful for Web platform products using UITK. We will be able to re-use the same assets as the websites where they are hosted on to create uniform UX/UI experiences. Those web assets are often SVGs.

9

Another feature to the list of never ending basic features required of a ui system that will show up sometime in 2030

10

Coming back to this a few years later… seems to still be an issue. Any word from Unity on when SVGs will behave like SVGs in UI Toolkit?