How (if possible) do you use the Vector Graphics package with UI Toolkit? Can I generate vector graphics and populate VisualElements with them?
UI Toolkit is compatible with the Vector Graphics package (com.unity.vectorgraphics).
You can import SVG assets as a “UI Toolkit Vector Image”, which can then be set as backgrounds for VisualElements.
However, although you can generate vector graphics using the Vector Graphics package’s API, we don’t yet provide the tools to generate a Vector Image asset, unfortunately. This is something we will expose later.
What other capabilities will UI Toolkit expose later? It would be nice if USS would expose properties similar to how CSS does in a browser. For example fill, stroke-width, etc.
On-the-fly modification is one of those perks that make SVG really useful.
Seems like the SVG engine should do some just-in-time style rendering as opposed to the baking at import, which seems to me to defeat the purpose of SVG.
Am I missing something? I am feeling that the approach Unity has taken to SVG is somewhat counter to my intuition.
SVG support first started as a tool for 2D sprites, and support for UI Toolkit was added later.
We are still working on better vector graphics integration in UI Toolkit, so more features will come in the next few releases. USS + UXML integration is part of that effort.
Thanks for the feedback!
I will definitely be looking forward to this. Will these features be added to Unity 2020? I have noticed some new UI Toolkit features that are only in 2021 and have been considering doing the update.
No new features are added in Unity 2020, only bugfixes. The SVG improvements are scheduled for a future release as we have some prep work to do on the rendering side of things first. I cannot provide an ETA, unfortunately.
Edit: (The “no new feature” in 2020 is not really true for packages, but given that UI Toolkit is now part of Unity, and not a package anymore, that applies to us)
Got a little problem. Even though I selected UI Toolkit Vector Image as generated asset type, it still does not appear in background texture picker. Any additional steps required?
Is this using the UI Builder? If so, I don’t think it supports picking SVG assets. You’ll have to update the USS files and use something like:
background-image: url("/Assets/file.svg");
Strange, docs are saying svg picking gets exposed when I install the vector graphics package. also, i tried setting the uss parameter, strangely, it gave me invalid file error.
Edit: I managed to assign it using uxml inline by manually entering the image path in .uxml file instead of using the ui builder interface
When will it be supported in UI Builder?
When will it be supported in UI Builder?
It is working in UIBuilder for me.
I am using
- Unity 2021.2.0f1,
- “com.unity.vectorgraphics”:“2.0.0-preview.18”,
- “com.unity.ui.builder”: “1.0.0-preview.18”,
Note that you have to change the asset type to “UI Toolkit Vector Image” and in the UIBuilder to “Vector”
You can also change the color of such a Vector Image using CSS property “-unity-background-image-tint-color”:
.red-background-image {
-unity-background-image-tint-color: red;
}
This CSS property seems to work with both, SVG and Textures
I managed to set the asset type to “UI Toolkit Vector Image” but in the UIBuilder I cannot choose “Vector”. I only have three options: Texture, Render Texture and Sprite. Should I do anything extra to get this Vector option?
We have a bug open for this, the built-in UI Builder doesn’t see the com.unity.vectorgraphics package and doesn’t offer that option. So I think the only workaround is to write the background-image: url(file.svg) USS property manually.
Ok thanks! Although it doesn’t look good, as mentioned here: Is UI Builder meant to support SVGs? (able to import svg but not able to add as Background image) .
Is there any news on further developments?
Can this be built-in in into UIToolkit instead? I know it’s too much to ask, but having it as separate package only to support vector graphics will hinder 3rd party development such as libraries/ui-frameworks.
This is something we are considering. It is very probable that the vector graphics package going out of “preview” will simply be that it will be integrated directly in Unity.
Glad to hear that!
~cheers
I decided to test “com.unity.vectorgraphics” package and have some questions.
I downloaded home icon (128x128) in 2 formats (SVG and PNG) from here: https://fonts.google.com/icons and added them to my UXML.
Why SVG appears different from PNG (in size) and why I see pixels on the roof of SVG?
UXML:
And this is how they look in browser:
There are some “viewport” options in the SVG Importer inspector, it could be related to that?
This is in the UI Builder? UI Toolkit doesn’t natively provide antialiasing for SVGs, which rely on MSAA for antialising at this time. We are working on improving that, but in the meantime, you’ll have to either use a texture import option (an loose the infinite resolution of the SVG) or render the UI in an MSAA-enabled render texture.