Search Unity

  1. Unity 2019.1 is now released.
    Dismiss Notice

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:
    6
    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:
    227
    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:
    6
    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:
    227
    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:
    6
    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:
    227
    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:
    6
    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:
    40
    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 at 6:06 PM
    #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 at 9:29 PM
    #60

  11. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    227
    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 at 8:56 PM
    #61

  12. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    227
    Not yet, we're working on it.
     
    mcoted3d, Apr 16, 2019 at 8:56 PM
    #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:
      1
    dyawitz, Apr 17, 2019 at 7:24 PM
    #63

  14. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    227
    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 at 7:51 PM
    #64

  15. dyawitz

    dyawitz

    Joined:
    Aug 22, 2017
    Posts:
    3
    dyawitz, Apr 17, 2019 at 8:03 PM
    #65
Page 2 of 2