Search Unity

Question UI Toolkit And Vector Graphics

Discussion in 'UI Toolkit' started by Nexer8, Apr 22, 2021.

  1. Nexer8

    Nexer8

    Joined:
    Dec 10, 2017
    Posts:
    271
    How (if possible) do you use the Vector Graphics package with UI Toolkit? Can I generate vector graphics and populate VisualElements with them?
     
    Nexer8, Apr 22, 2021
    #1

  2. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    1,003
    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.
     
    mcoted3d, Apr 22, 2021
    #2
    Schneider21, DrViJ, Orimay and 1 other person like this.

  3. tonytopper

    tonytopper

    Joined:
    Jun 25, 2018
    Posts:
    226
    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.
     
    tonytopper, Jun 24, 2021
    #3
    AbandonedCrypt and Orimay like this.

  4. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    1,003
    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!
     
    mcoted3d, Jun 24, 2021
    #4
    mariandev, tonytopper, MousePods and 1 other person like this.

  5. tonytopper

    tonytopper

    Joined:
    Jun 25, 2018
    Posts:
    226
    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.
     
    tonytopper, Jun 25, 2021
    #5

  6. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    1,003
    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)
     
    mcoted3d, Jun 25, 2021
    #6

  7. Deleted User

    Deleted User

    Guest

    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?
     
    Last edited by a moderator: Jul 15, 2021
    Deleted User, Jul 15, 2021
    #7

  8. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    1,003
    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");
     
    mcoted3d, Jul 15, 2021
    #8

  9. Deleted User

    Deleted User

    Guest

    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
     
    Last edited by a moderator: Jul 16, 2021
    Deleted User, Jul 15, 2021
    #9

  10. RunninglVlan

    RunninglVlan

    Joined:
    Nov 6, 2018
    Posts:
    182
    When will it be supported in UI Builder?
     
    RunninglVlan, Jul 23, 2021
    #10

  11. achimmihca

    achimmihca

    Joined:
    Feb 13, 2016
    Posts:
    280
    > 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"
     

    Attached Files:

    achimmihca, Nov 7, 2021
    #11
    Midiphony-panda and RunninglVlan like this.

  12. achimmihca

    achimmihca

    Joined:
    Feb 13, 2016
    Posts:
    280
    You can also change the color of such a Vector Image using CSS property "-unity-background-image-tint-color":

    Code (csharp):
    1.  
    2. .red-background-image {
    3.     -unity-background-image-tint-color: red;
    4. }
    5.  
    This CSS property seems to work with both, SVG and Textures
     
    achimmihca, Nov 9, 2021
    #12

  13. ChGuidi

    ChGuidi

    Joined:
    Dec 28, 2021
    Posts:
    111
    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?
     
    ChGuidi, Jan 24, 2022
    #13

  14. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    1,003
    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.
     
    mcoted3d, Jan 24, 2022
    #14
    Midiphony-panda likes this.

  15. ChGuidi

    ChGuidi

    Joined:
    Dec 28, 2021
    Posts:
    111
    ChGuidi, Jan 27, 2022
    #15

  16. stevphie123

    stevphie123

    Joined:
    Mar 24, 2021
    Posts:
    82
    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.
     
    stevphie123, Apr 20, 2023
    #16

  17. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    1,003
    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.
     
    mcoted3d, Apr 21, 2023
    #17
    Arunraj, Midiphony-panda, MousePods and 2 others like this.

  18. stevphie123

    stevphie123

    Joined:
    Mar 24, 2021
    Posts:
    82
    Glad to hear that!

    ~cheers
     
    stevphie123, Apr 21, 2023
    #18