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.

  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'
     
  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.
     
  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
     
    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)
     
  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.
     
  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.
     
  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.
     
  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!!
     
  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.
     
  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.
     
  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.
     
  12. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    227
    Not yet, we're working on it.
     
  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
  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.
     
  15. dyawitz

    dyawitz

    Joined:
    Aug 22, 2017
    Posts:
    3