Search Unity

  1. Unity 2019.2 is now released.
    Dismiss Notice

  2. Now in Beta! Get 1:1 live lessons on any Unity topic or help troubleshooting your project – Connect with an expert on Unity Live Help

    Dismiss Notice
2019.2 has been released! Unity Live Help

Unity UI SVG support script

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

Page 2 of 2

  1. amcagurban

    amcagurban

    Joined:
    Dec 12, 2018
    Posts:
    12
    upload_2019-1-24_17-24-31.png
    Oh, I use RectMask2D in my game and it works without any problem. Don't you use RectMask2D?
    Anyway, hope you'll solve your problem asap :)
    Bu arada kral Türk müsün? Üstteki postta attığın resmin adı 'Ekran Resmi'
     
    amcagurban, Jan 24, 2019
    #51

  2. hitwill

    hitwill

    Joined:
    Jun 5, 2016
    Posts:
    10
    Once I have imported an SVG, how do I change the fill of a path through code? (or even get a reference to the SVG?) I can't find any documentation.
     
    hitwill, Mar 27, 2019
    #52

  3. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    309
    The way to do this would be to parse the SVG file to get a vector representation of the file (vector Scene), then you can change any properties before tessellation. For example:

    Code (CSharp):
    1. string svg =
    2.     @"<svg xmlns=""http://www.w3.org/2000/svg"" xmlns:xlink=""http://www.w3.org/1999/xlink"" viewBox=""0 0 216 216"">
    3.        <g>
    4.            <polygon id=""Poly1"" points=""...""/>
    5.        </g>
    6.    </svg>";
    7.  
    8. // Import the SVG at runtime
    9. var sceneInfo = SVGParser.ImportSVG(new StringReader(svg));
    10. var shape = sceneInfo.NodeIDs["Poly1"].Shapes[0];
    11. shape.Fill = new SolidFill() { Color = Color.red };
    12.  
    13. // Tessellate
    14. var geoms = VectorUtils.TessellateScene(sceneInfo.Scene, tessOptions);
    15.  
    16. // Build a sprite
    17. var sprite = VectorUtils.BuildSprite(geoms, 10.0f, VectorUtils.Alignment.Center, Vector2.zero, 128, true);
    18. GetComponent<SpriteRenderer>().sprite = sprite;
    19.  
    You can have a look here for a more complete example:
    https://github.com/Unity-Technologi...b/master/Assets/RuntimeDemo/SVGRuntimeLoad.cs
     
    mcoted3d, Mar 27, 2019
    #53
    hitwill likes this.

  4. hitwill

    hitwill

    Joined:
    Jun 5, 2016
    Posts:
    10
    This is GREAT! I have been looking for sample code for a couple of days but couldn't find the link. Thanks!

    One question - is it possible to apply the generated sprite to a 3d object, like a cube? Would the sprite go into the material for the cube? What would be the best way? (A high level response would be great, then I can just do the code myself)
     
    hitwill, Mar 27, 2019
    #54

  5. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    309
    I assume you want to apply it like a texture? Given that vector sprites are essentially triangle meshes, you won't be able to UV map it to a 3D object as-is. Instead, you could convert the vector sprite to a texture, then apply it to the object.

    You can either import the SVG asset as a "textured sprite", or convert it programmatically using the VectorUtils.RenderSpriteToTexture2D method.
     
    mcoted3d, Mar 27, 2019
    #55

  6. hitwill

    hitwill

    Joined:
    Jun 5, 2016
    Posts:
    10
    Thanks! I will try this. I had added a Sprite Renderer as a child of the object I wanted the sprite to appear on - and this seemed to work fine. However, is this a wasteful way of doing it, or perhaps a bit hacky?

    I am a decent coder, but new to Unity and 3D - so still trying to figure out the best practices.
     
    hitwill, Mar 27, 2019
    #56

  7. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    309
    It depends if you want the SVG sprite to be "attached" to the 3D object, or if you really want to the SVG sprite to deform and wrap around the 3D object. Your solution is fine for the former, but I think you need a texture for the latter.
     
    mcoted3d, Mar 27, 2019
    #57

  8. hitwill

    hitwill

    Joined:
    Jun 5, 2016
    Posts:
    10
    Great! I just wanted it to attach on the surface, and actually not wrap around! Fatastic!!
     
    hitwill, Mar 27, 2019
    #58

  9. haywirephoenix

    haywirephoenix

    Joined:
    May 17, 2017
    Posts:
    52
    Is it possible to add the 360 radial fill setting to the inspector? I haven't been able to extend the class to add this.
     
    haywirephoenix, Apr 15, 2019
    #59

  10. dyawitz

    dyawitz

    Joined:
    Aug 22, 2017
    Posts:
    3
    Has the SVG support for UI elements been rolled out to a Unity release yet, or still in development? Thanks.
     
    dyawitz, Apr 15, 2019
    #60

  11. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    309
    If I understand correctly, you want to control the radial gradient from the SVG importer inspector? This is not possible, the gradient data is read from the SVG file itself.
     
    mcoted3d, Apr 16, 2019
    #61

  12. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    309
    Not yet, we're working on it.
     
    mcoted3d, Apr 16, 2019
    #62

  13. dyawitz

    dyawitz

    Joined:
    Aug 22, 2017
    Posts:
    3
    Then what am I seeing here in 2018.3.12 that, after adding the Vector Graphics package, I have SVG image as an option under UI to add to a canvas? Thanks.
     

    Attached Files:

    • SVG.PNG
      SVG.PNG
      File size:
      35.5 KB
      Views:
      201
    dyawitz, Apr 17, 2019
    #63

  14. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    309
    Ah, I thought you were referring to UIElements support: https://blogs.unity3d.com/2019/04/16/introducing-unity-2019-1/#uielements

    The SVG support for the UI canvas is part of the vector graphics package, not part of Unity.
     
    mcoted3d, Apr 17, 2019
    #64
    TeotiGraphix likes this.

  15. dyawitz

    dyawitz

    Joined:
    Aug 22, 2017
    Posts:
    3
    dyawitz, Apr 17, 2019
    #65

  16. haywirephoenix

    haywirephoenix

    Joined:
    May 17, 2017
    Posts:
    52
    Thanks for your reply. I was actually talking about the fill options in unity. The radial option allows you to do a circular progress bar. I wanted to add this feature to the vector version of UI Image
     
    haywirephoenix, Apr 25, 2019
    #66

  17. haywirephoenix

    haywirephoenix

    Joined:
    May 17, 2017
    Posts:
    52

    Like this:
     

    Attached Files:

    haywirephoenix, May 1, 2019
    #67

  18. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    309
    Oh, sorry for the misunderstanding. The radial filling is done by manipulating the sprite's "quad" and its UVs, so this won't work for SVG sprites since these aren't textured (unless you import them as "Textured Sprites" instead of "Vector Sprites").
     
    mcoted3d, May 1, 2019
    #68

  19. haywirephoenix

    haywirephoenix

    Joined:
    May 17, 2017
    Posts:
    52
    Ah, that makes sense. That could be why I couldn't get it to work! Thank you. Maybe I can do something with masking.

    Edit: Masking works perfectly
     
    Last edited: May 1, 2019
    haywirephoenix, May 1, 2019
    #69

  20. TeotiGraphix

    TeotiGraphix

    Joined:
    Jan 11, 2011
    Posts:
    137
    Just filing in for notifications but I am starting to use this vector package for a pretty large app so we will see how it goes.

    Thanks for all your work on this mcoted3d.
     
    TeotiGraphix, May 21, 2019
    #70
    mcoted3d likes this.

  21. MaskedMouse

    MaskedMouse

    Joined:
    Jul 8, 2014
    Posts:
    340
    @mcoted3d When will the "Keep Aspect Ratio" be implemented? As it should be an easy feature...
    Someone already implemented it but changing it in a package will only keep those changes locally in the Library folder I think. Link

    Also creating a material that uses the Unlit/Vector or Unlit/VectorGradient, the canvas will complain in SendWillRenderCanvases method that the material does not have a _Stencil property.
     
    MaskedMouse, May 29, 2019
    #71

  22. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    309
    You can absolutely use the script that you referenced. Drop it in your Assets folder (you may have to change the class name to avoid conflicts) and you're good to go. I don't know when this will be pushed as part of the package.

    Thanks for reporting!
     
    mcoted3d, May 29, 2019
    #72

  23. jason_yak

    jason_yak

    Joined:
    Aug 25, 2016
    Posts:
    257
    Hey just chiming in so I can follow along with this thread. Looking forward to seeing the ui support for SVG out of preview. Is there any roadmap available for the SVG plugin with features and unity version breakdown? we found the roadmap that the LWRP team did was super handy for us to plan out what tech solutions, thanks.
     
    jason_yak, Jul 12, 2019
    #73

  24. jason_yak

    jason_yak

    Joined:
    Aug 25, 2016
    Posts:
    257
    ^ haha nevermind.. I just saw your post in the main SVG thread that said there's no roadmap. No worries =)
     
    jason_yak, Jul 12, 2019
    #74
    mcoted3d likes this.

  25. gromilQaaaa

    gromilQaaaa

    Joined:
    Oct 28, 2013
    Posts:
    14
    Hello, I am trying to change the property of a material in runtime. But there is no .sharedMaterial in SVGImage so I guess .material works as shared. Didn't find any normal way to change property of direct material instance. Help :)
     
    gromilQaaaa, Aug 7, 2019
    #75

  26. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    309
    This should work. I tried with this code snippet:

    Code (CSharp):
    1.         var mat = GetComponent<SVGImage>().material;
    2.         mat.color = Color.gray;
    3.  
    What's not working on your side?
     
    mcoted3d, Aug 7, 2019
    #76
Page 2 of 2