Search Unity

  1. Unity Asset Manager is now available in public beta. Try it out now and join the conversation here in the forums.
    Dismiss Notice
  2. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  3. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

Unity UI SVG support script

Discussion in '2D Experimental Preview' started by phil-Unity, Sep 5, 2018.

  1. tbg10101_

    tbg10101_

    Joined:
    Mar 13, 2011
    Posts:
    192
    Here is my setup: https://forum.unity.com/threads/unity-ui-svg-support-script.551254/page-2#post-5135099
     
  2. Rafarel

    Rafarel

    Joined:
    Jul 21, 2017
    Posts:
    199
    Thanks @mcoted3d , I tried to have a single Camera.
    My current problem is that the PostPrcessing effects are also applied to the UI, I have to find a way to exclude the UI from PostProcessing. I red on a forum that I have to use different Cameras ?

    Thanks @tbg10101_ for sharing this. Is it possible without using URP or HDRP ?
    @mcoted3d told me that uses more memory ?
     
  3. Rafarel

    Rafarel

    Joined:
    Jul 21, 2017
    Posts:
    199
    So I tried to use a setup with two cameras, one for the game and one for the UI elements but I can't get it to work.
    It works on a demo scene that I made, but it didn't work on my project. I have the UI that is renderer but the rest is black on the Game scene. UI camera clear flag is set to "depth only" like one of precedent posts. The setup with two cameras works very good for the Home scene but not for the Game scene...
     
  4. tbg10101_

    tbg10101_

    Joined:
    Mar 13, 2011
    Posts:
    192
    Yes, I currently use it in my project which uses the default render pipeline. Not sure about the extra memory.

    Edit: I read his post. If you are memory-constrained my approach may not be what you want. If you are not then my approach saves you from having to render the entire scene in MSAA. This way you only MSAA the UI then apply a cheaper AA (like TXAA) to the regular scene.
     
  5. Rafarel

    Rafarel

    Joined:
    Jul 21, 2017
    Posts:
    199
    @tbg10101_ I understand the concept but I'm facing a major issue, it is that I have a black screen instead of viewing my game. I made a simple test where all is working on a single scene setup. I wonder if my additive scenes setup is the cause of this render issue, I some times see the loading screen from a previous scene that is still renderer but the texture is reversed or inverted, don not know how to say, its weird ... Maybe I'll shot a video to show you. I also have to proof the multi camera concept with multi scenes to see where it stops to work !

     
  6. MaskedMouse

    MaskedMouse

    Joined:
    Jul 8, 2014
    Posts:
    1,091
    Will there be an option to disable the Maskable boolean that is introduced in the MaskableGraphic class?
    I have a hierarchy where I need to disable all their Maskable booleans as those item's shouldn't be masked. But the SVG Image component uses it's own Editor implementation which does not show this boolean yet.

    I've made the changes myself now, but it would be nice if it would be officially supported by the package itself.
     
  7. Rafarel

    Rafarel

    Joined:
    Jul 21, 2017
    Posts:
    199
    @tbg10101_ I fixed my black game issue by unchecking "Directly to camera target" on the Post Processing volume of my camera used for the game (not the UI)
     
  8. wtetotew

    wtetotew

    Joined:
    Apr 12, 2020
    Posts:
    68
    got this message in the console
    Do you know why?

    Assets\SVGImage\SVGImage.cs(81,41): error CS1061: 'Sprite' does not contain a definition for 'HasVertexAttribute' and no accessible extension method 'HasVertexAttribute' accepting a first argument of type 'Sprite' could be found (are you missing a using directive or an assembly reference?)
     
  9. bali33

    bali33

    Joined:
    Aug 14, 2011
    Posts:
    232
    Hello,

    The built-in Image Shadow script seems to no work with an SVGImage. Is that normal ? Is it possible to make it works ? If not, how would you do that ?
     
  10. wtetotew

    wtetotew

    Joined:
    Apr 12, 2020
    Posts:
    68
    Nobody here lol
     
    Last edited: Jun 17, 2020
  11. Alizorath

    Alizorath

    Joined:
    Jan 16, 2020
    Posts:
    4
    bump pls
     
  12. AlonsyRC

    AlonsyRC

    Joined:
    Dec 31, 2012
    Posts:
    10
    Hi, I think this issue is still around in 2019.3.15 Details: URP 7.3.1 Preview .12 -2.0.0 in short when on play mode my vector whose material is Unlit Vector Gradient becomes invisible in Scene view, in game view and on simulator view, when not on playmode I can see it, I already tried the following: it is not an animation/alpha issue, nor scale or enable issue. Also if I Swap the material i can see the sprite but with issues (normal because I swaped for a sprite material, I even tryed use another vector material as well but same result as shown in
    "Swaped Material.png") hope this helps :)
     

    Attached Files:

  13. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    We weren't aware of this issue. The best way to get it fixed would be to file a bug report (Help > Report a Bug...)
     
  14. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    Probably an incompatible mix between the Unity and vector graphics package versions. Which versions are you using?
     
  15. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    This is odd. I couldn't reproduce this behavior here. If you have a simple project that reproduces this bug, please send it to us (Help > Report a Bug...).
     
    AlonsyRC likes this.
  16. AlonsyRC

    AlonsyRC

    Joined:
    Dec 31, 2012
    Posts:
    10
    you are right i made a new project and everything seems to be in order with the same sprites & Materials, I have to look at the causes for my particular setup. Thanks!
     
  17. AlonsyRC

    AlonsyRC

    Joined:
    Dec 31, 2012
    Posts:
    10
    I created a copy of my project and deleted a bunch of stuff in order to just have core components, (sprite renders with SVG sprites) without code or animations, i will submit in a few minutes
     
  18. AlonsyRC

    AlonsyRC

    Joined:
    Dec 31, 2012
    Posts:
    10
    Hi mcoted3d I have got this timeout error for a 3rd time is there an alternative to report this bug? thanks.
     

    Attached Files:

  19. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    Not sure why this is happening... you can send it to me in a DM.
     
  20. bali33

    bali33

    Joined:
    Aug 14, 2011
    Posts:
    232
    Hello,

    I was wondering, would it be possible to download an SVG file at runtime and then display it in the UI ? How would you do that ?

    Thanks
     
  21. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    bali33 likes this.
  22. bali33

    bali33

    Joined:
    Aug 14, 2011
    Posts:
    232
    Thanks !
     
  23. Tony_Max

    Tony_Max

    Joined:
    Feb 7, 2017
    Posts:
    349
    I use SVG Image in Canvas and use material with Unlit/VectorGradient shader and SVG image renders but do it a bit wrong. Am i doing something wrong?
     
  24. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    From the first post:

     
  25. BakeMyCake

    BakeMyCake

    Joined:
    May 8, 2017
    Posts:
    175
    A bit of a late reply but turns out between 2019.2 and 2019.3 a sprite extension U2D was moved from experimental to another namespace.

    So all you need to do is replace the line
    using UnityEngine.Experimental.U2D;
    with
    using UnityEngine.U2D;
    I assume the original poster already fixed it, but maybe someone else finds it useful.
     
  26. shacharoz

    shacharoz

    Joined:
    Jul 11, 2013
    Posts:
    98
    works for me!
    thanks!
     
  27. tristanlbailey

    tristanlbailey

    Joined:
    Jul 14, 2016
    Posts:
    12
    Are there any plans to have AA support with SVGs in Screen Space Overlay mode? I have not been able to get my head around the fact that SVGs look very smooth in the Scene tab when zoomed in, but appear slightly jagged in high resolutions on the Game tab (say Full HD 1920 x 1080 or higher). With lower resolutions in both tabs, it appears that AA isn't even used at all. This is with 4x Multi Sampling switched on in the Quality menu under Project Settings, and turned on in the Camera component. This also happens even with the canvas render mode set to Screen Space Camera.

    The other canvas render modes aren't really an option for me, given that I have been creating a remake of an old game, and I would much prefer at least the lower resolution to be "pixel perfect". I find SSO best for this, as I find that Screen Space Camera mode tends to distort the graphics in my UI, often creating gaps between graphics that are immediately next to each other at high resolutions. Also, with "pixel perfect" turned on, it causes static graphics on the HUD to jitter (rapidly move up and down in place) when the camera follows the player.

    I'm still going to go forward with SVGs, as I believe that they are much better than having to create multiple versions of every graphic in the game for different resolutions, since SVGs can scale up and down without pixelating (or so the theory goes), and you don't have to worry as much about how they will appear on various devices. They are also lightweight, and don't take up very much space, often beating GIFs with their small file size.
     
  28. shacharoz

    shacharoz

    Joined:
    Jul 11, 2013
    Posts:
    98

    hi, I am with you on this. if you download the initial code provided here on a zip, you then go onto any item in the Canvas, click AddComponent and search for SVG(something-i-dont-remember). it is as if you are placing the Image component. in this way, you will also get the much-needed Preserve Aspect bool option.
    do not drag and drop the component manually (this doesn't give you the Preserve Aspect...)

    things work as you would like them to, I hope. unless I didn't understand the issue you describe
     
  29. phil-Unity

    phil-Unity

    Unity UI Lead Developer

    Joined:
    Nov 23, 2012
    Posts:
    1,226
    Short answer is no. How Screen Space Overlay works is rendering right to the gfx device. Because of this we dont go through the regular render pipeline and loose all effects. Any effects / AA would need the screen space camera mode.

    This is likely because of how the canvas is set up and scaled. Using the Canvas scaler changes the scale factor of the Canvas but it is only rendering at 1 size. Its likely that the data needed to scale it smoother is not available with the current design.

    Two things i can think of for SSC, 1) is your canvas a child of the Camera or just linked? If you are moving the Camera its better if its a child. 2) The difference between the 2 is the absolute scale. SSC the Canvas scale will likely be in the one/thousand
     
    CrandellWS likes this.
  30. tristanlbailey

    tristanlbailey

    Joined:
    Jul 14, 2016
    Posts:
    12
    Thanks for that shacharoz. I didn't actually realise until now that the SVG Image component existed. I tried it out, but it didn't visually change the images that I could tell. The Preserve Aspect function seems to work only when you don't have the correct width of object to match the size of the image (in pixels). I'm now wondering if I should change all of the RawImage components that I have been using with my SVG images to the SVG Image component. At least in name it makes sense to do that, but I don't know what other benefits there may be, as I have been using RawImage components to help boost performance over the Image component.

    I'm using a canvas in a separate object from the camera object, and both objects are at the same level in the hierarchy (one is not a child of the other). I can't quite remember why I did this, as I do remember having the canvas as a child of the camera at one stage. I think it was because I needed to change it to separate object to experiment with the different render modes properly. I have left them separated ever since. If I decide to go with SSC instead later down the track, then I will take their relationships into consideration.

    The canvas scaler is set to a reference resolution of 512 x 448, so as to match the SNES emulator that I am using at 2x scale (the size of the emulator window). The scale mode is set to Scale With Screen Size. Match mode is set to Match Width Or Height, with the slider set to Height. Reference Pixels Per Unit is 100. I also have a separate custom resolution in the Game tab to match the same resolution as the emulator window. All images are designed to use the exact sizes that can be seen from the emulator window at 2x scale, most of which are SVG images, and yet no AA in either SSO or SSC at that resolution.
     
  31. tristanlbailey

    tristanlbailey

    Joined:
    Jul 14, 2016
    Posts:
    12
    Hello again. I just ran into another problem, regarding setting an image to the SVG Image component programmatically. Is there a way to assign an SVG image without using the sprite type and property? I read somewhere that sprites have a performance overhead, and it is preferable to use either a Raw Image (or possibly an SVG image) instead. At first, I tried assigning a texture type loaded in using Resources.Load, but it returned an error saying that there is no such definition for 'texture' in SVGImage. I ran the debugger and found a "mainTexture" property, but when I tried to assign an SVG image, it caused an error saying that it was read-only.

    Does the class only use sprite-typed images specifically? Should I go back to using the RawImage component?
     
  32. Arlorean

    Arlorean

    Joined:
    Sep 7, 2014
    Posts:
    27
    The SVG viewport (width/height) seems to be ignored when importing with type SVGType.UIToolkit. I'm trying to use the ViewportOptions.PreserveViewport and I can see rect set correctly in the code here in SVGImporter.cs:
    Code (CSharp):
    1.  
    2.             var rect = Rect.zero;
    3.             if (ViewportOptions == ViewportOptions.PreserveViewport)
    4.                 rect = sceneInfo.SceneViewport;
    5.  
    But, it's not passed on in the following switch case though (no rect parameter):
    Code (CSharp):
    1.  
    2.                 case SVGType.UIToolkit:
    3.                     GenerateVectorImageAsset(ctx, geometry, name);
    4.                     break;
    5.  
    Here a sample icon from the Material UI Icon for Menu for testing (in white style), I can't attach SVG files here:
    Code (CSharp):
    1. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="24px" height="24px">
    2.     <path d="M0 0h24v24H0z" fill="none"/>
    3.     <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
    4. </svg>
    I'm doing this from the editor in case it's not clear:
    upload_2021-2-10_17-59-6.png
     
    enhawk likes this.
  33. KTS95SL

    KTS95SL

    Joined:
    Apr 30, 2020
    Posts:
    7
    I have svg image in my assets folder. How can I assign that svg to the "string svg"?
     
  34. macros976

    macros976

    Joined:
    Jun 22, 2017
    Posts:
    20
    Before I get too excited, does anyone know what the affects are performance wise? Let's assume I'm using 512x512 PNGs and switched to SVG. I know it's rendering pixels vs. meshes, but I don't know much beyond that.
     
  35. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    There's no exact answer as it depends on the complexity of the SVG sprite Normal textured sprites have more predictable performance, but may suffer if the texture size becomes bigger. Tessellated SVG sprites may result in a lot of tiny triangles that aren't GPU-friendly. If performance is a concern, regular sprites are probably a safer bet.
     
  36. enhawk

    enhawk

    Joined:
    Aug 22, 2013
    Posts:
    833
    Last edited: Oct 30, 2021
  37. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    It should be as simple as GetComponent<SVGImage>().sprite = yourSVGSprite ?

    Just make sure that the GameObject is part of a UI Canvas.
     
    enhawk likes this.
  38. enhawk

    enhawk

    Joined:
    Aug 22, 2013
    Posts:
    833
    Thanks for the reply, this is what I tried above, it comes up blank.
     
  39. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    Weird, just tried the same thing here and it works. Does plugging a static sprite manually to the SVGImage shows something? If not, the scene is probably not setup properly. Also check your Canvas properties (Overlay/Camera/World Space).
     
  40. enhawk

    enhawk

    Joined:
    Aug 22, 2013
    Posts:
    833
    Ah strange! Thanks I'll give this another try and share the test scene. I'm using static sprite SVG in the UI elsewhere so I'm not sure that is the issue.
     
  41. MaskedMouse

    MaskedMouse

    Joined:
    Jul 8, 2014
    Posts:
    1,091
    I don't see a shader on the UI game object. Which might be the cause of the issue.

    There is an issue with the menu "UI/SVG Image" where it doesn't have the material / shader on the game object.
    Try creating a normal UI/Image, remove the
    Image
    component and then add the
    SVG Image
    component.
    I reported that bug some time ago, but it hasn't been fixed yet.

    Edit: Seems like it has just been picked up. It now says: "Fix In Review for 2.0.0-preview.18"
     
    Last edited: Nov 3, 2021
  42. enhawk

    enhawk

    Joined:
    Aug 22, 2013
    Posts:
    833
    @mcoted3d thanks I got it working. I have a new question;

    When loading SVGs dynamically, how do I preserve viewport size? currently everything expands to the UI SVGImage size.

    Using the following code:
    Code (CSharp):
    1. public Sprite ReturnSVG(string outputdata)
    2.     {
    3.         var tessOptions = new VectorUtils.TessellationOptions() {
    4.             StepDistance = 100.0f,
    5.             MaxCordDeviation = 0.5f,
    6.             MaxTanAngleDeviation = 0.1f,
    7.             SamplingStepSize = 0.01f
    8.         };
    9.  
    10.         var sceneInfo = SVGParser.ImportSVG(new StringReader(outputdata));
    11.         var geoms = VectorUtils.TessellateScene(sceneInfo.Scene, tessOptions);
    12.  
    13.         var sprite = VectorUtils.BuildSprite(geoms, 10.0f, VectorUtils.Alignment.Center, Vector2.zero, 128, true);
    14.         return sprite;
    15.     }
    Is there a place to put
    ViewportOptions = 1
    or similar?

    My SVG code has a viewport specified as follows

    svg x="0px" y="0px" width="320px" height="480px" viewBox="0 0 320 480" enable-background="new 0 0 320 480" xml:space="preserve"

    circle fill="#006838" cx="160" cy="240" r="94.9"


    However in Unity Canvas UI SVG Image this expands the contents to fill the image like so: Screen Shot 2022-02-24 at 20.25.28.png

    I'd like to get the result on the left, as can be achieved if the SVG isn't loaded in as a string:
    Screen Shot 2022-02-24 at 21.49.15.png

    I tried changing sceneinfo to

    var sceneInfo = SVGParser.ImportSVG(new StringReader(outputdata), 0,1,320,480);

    but the contents of the svg are still stretched to the size of the SVGImage

    I think this might be the same issue as @Arlorean is having above.
     
    Last edited: Feb 24, 2022
  43. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
  44. enhawk

    enhawk

    Joined:
    Aug 22, 2013
    Posts:
    833
    Ah thanks, I tried

    var sceneInfo = SVGParser.ImportSVG(new StringReader(outputdata), ViewportOptions.PreserveViewport, 0,1,320,480);
    in my above code and the svg contents still expand to the ui svgimage (no effect), preserve viewport isn't observed as far as I can tell.
     
  45. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    Oh, I think the last piece of the puzzle is that you have to pass in the SceneViewport rect when building the sprite:
    Code (CSharp):
    1. VectorUtils.BuildSprite(geoms, sceneInfo.SceneViewport, ...)
     
    KamilCSPS and enhawk like this.
  46. enhawk

    enhawk

    Joined:
    Aug 22, 2013
    Posts:
    833
    Thanks I’ll try this out!
     
  47. ToT711

    ToT711

    Joined:
    Oct 7, 2016
    Posts:
    3
    I'm using a Radial gradient in my imported SVG (for UI). I'm using the "SVG Image" script to render it with the Unlit/VectorGradientUI shader. However the gradient only appears to be linear, and I couldn't find an option to change the gradient to radial. Any ideas?
     
  48. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    Look at the first post of this thread, you're probably missing the TexCoord2 channel on your canvas:
     
  49. ToT711

    ToT711

    Joined:
    Oct 7, 2016
    Posts:
    3
    I was already using TextCoord2 but it showed a linear gradient instead of a radial one. Turns out I exported the SVG from "Boxy SVG" incorrectly.
     
  50. harshitgpt41

    harshitgpt41

    Joined:
    Aug 8, 2022
    Posts:
    3
    hOW I CAN ADD PATTERN INSIDE SVG AS A FILL?