Search Unity

  1. Unity 2020.1 has been released.
    Dismiss Notice
  2. We are looking for feedback on the experimental Unity Safe Mode which is aiming to help you resolve compilation errors faster during project startup.
    Dismiss Notice
  3. Good news ✨ We have more Unite Now videos available for you to watch on-demand! Come check them out and ask our experts any questions!
    Dismiss Notice

Unity Vector Graphics Preview Package

Discussion in '2D Experimental Preview' started by rustum, May 4, 2018.

  1. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    481
    We recently pushed a Metal specific rendering issue (in 2.0.0-preview.12 I think), could you try to see if you still reproduce with this version? If so, can you please file a bug report? (Help > Report a Bug...)
     
  2. dshook

    dshook

    Joined:
    Jul 14, 2015
    Posts:
    10
    Hi, thanks for you work and continued updates on the thread!

    Is there any update on support for 9 slice with the SVGImage? It would be reaaallly nice to have for building UI's
     
    shieldgenerator7 likes this.
  3. Little10Robot

    Little10Robot

    Joined:
    Aug 23, 2017
    Posts:
    17
    Do sprite masks currently work with SVGs? I couldn't get it working in a quick test. I just wanted to confirm before I change my approach. Thanks!
     
  4. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    481
    They work here with 2.0.0-preview.12. Can you file a bug if you can't get them to work?

    EDIT: What I meant was that vector sprites should be masked by a "regular sprite" no problem. However, using a vector sprite as a mask may or may not work. Vector sprite may have overlapping geometry that will make for a confusing stencil mask.
     
  5. Little10Robot

    Little10Robot

    Joined:
    Aug 23, 2017
    Posts:
    17
    OK, I am using 2.0.0-preview.12 so that's good to know. I can use a vector or "regular" sprite as a mask for "regular" sprites. But my vector sprites are unaffected by the mask interaction setting. I'm pretty sure I had this working in another project, so I feel like I'm forgetting something simple here.

    EDIT: I think I figured it out. For me it works only if I use Sprites-Default as the material. If you add the object to the scene using the generated prefab it starts as Unlit-Vector. Is that the expected result? What is the impact of adding the prefab vs the nested sprite to scenes?
     
    Last edited: Feb 26, 2020
  6. VaronK8

    VaronK8

    Joined:
    May 16, 2019
    Posts:
    1
    So i have this bug (Console Output), when importing my .svg file (unfortunately i can`t upload it here). The error appeares because of null KEY value (clipper) passed in DICTIONARY method TryGetValue (CodeWithError). So adding additional check for cliiper != null in if statement will do the trick and all .svg files will be imported sucessfully.
     

    Attached Files:

  7. GarbDev

    GarbDev

    Joined:
    May 1, 2016
    Posts:
    5
    I've run into a couple of issues while trying to import graphics created using Inkscape. Cloned instances of an object and objects with pattern fills do not appear when the SVG is imported into Unity. I am not sure if this is a Unity issue or an Inkscape issue; I'm fairly new to working with vector graphics and don't have the deepest technical understanding of them yet.
     
  8. coshea

    coshea

    Joined:
    Dec 20, 2012
    Posts:
    277
    I really really hope that SVG support generally doesn't get canned and moved to UI only. It's amazing to be able to use vector graphics in games and something Unity has been missing for a long time. As a user of Ragetools and SVG Importer (the assetstore), both assets are dead and there's no viable alternative.
     
    shieldgenerator7 and vzlomvl like this.
  9. vzlomvl

    vzlomvl

    Joined:
    Jun 25, 2016
    Posts:
    38
    I absolutely agree with coshea. SVG support for SpriteRenderer and the ability to convert SVG to Texture in runtime is a great feature without viable alternatives.
    We have an SVG style graphics and we are saving a lot of RAM memory by using of Vector Graphics package on iOS and Android.
     
    shieldgenerator7 likes this.
  10. Superxwolf

    Superxwolf

    Joined:
    Nov 21, 2014
    Posts:
    12
    I'm trying to multi-thread the scene tessellation, but every time I get a warning: "Shape tessellation failed, skipping..."
    Tessellation works perfectly fine from the main thread.
     
  11. benoitd_unity

    benoitd_unity

    Unity Technologies

    Joined:
    Jan 2, 2018
    Posts:
    198
    We hear you and we agree. I don't believe abandoning it is an option, we're mainly discussing what would be required for it to be a minimum viable product as a verified solution, and when could that happen.
     
    Thaina likes this.
  12. vzlomvl

    vzlomvl

    Joined:
    Jun 25, 2016
    Posts:
    38
    Hi Unity team.
    The previously reported issues with Vector Package were fixed. Thank you very much.
    Today we have found a new one on our iPad mini 2. For some reason, some SVG images with gradients don't render correctly in UI on iPad mini 2. At the same time, we haven't this issue on iPhone X and SpriteRenderer works correctly too. Looks like only part of iOS devices are impacted and only UI.
    Could you please help me to understand why it's happening and how we can fix it.
    Bug report link: https://fogbugz.unity3d.com/default.asp?1227311_7egt5id5v9ugui3i
    Thank you.
     
    Last edited: Mar 12, 2020
  13. coshea

    coshea

    Joined:
    Dec 20, 2012
    Posts:
    277
    Do you think it's possible to use SVG sprites with Anima2d?
     
  14. vzlomvl

    vzlomvl

    Joined:
    Jun 25, 2016
    Posts:
    38
    @mcoted3d
    Additional information regarding my last message. I wasn't able to reproduce bug with 2.0.0(12). But 1.0.0(34) have this bug. Is it possible to fix it in 1.0.0 release? Unfortunately we can't update to Unity 2019.2 and use 2.0.0.
    Thanks.
     
  15. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    481
    We fixed a Metal specific radial-gradient issue in 2.0.0-preview.12, which was already backported to 1.0.0-preview.34. If you still see the issue, I'll have to double-check, it may be a different bug.

    EDIT: In the meantime, can you try reducing the gradient resolution of your SVG assets? I've seen some problems caused by precision issues with long gradient strips.
     
    Last edited: Mar 17, 2020
  16. vzlomvl

    vzlomvl

    Joined:
    Jun 25, 2016
    Posts:
    38
    Thank you for fast reply.
    Do you mean to change it in the Unity Inspector or somehow change it in Adobe Illustrator?
    upload_2020-3-17_17-40-32.png
    Additional notes: Today I have noted that after update test project from 1.0.0.34 to 2.0.0.12 SVG size in scene and amounts of vertices was changed. Looks like 2.0.0.12 calculate size of the SVG by another logic.
    May be it is because of our SVG(made with Adobe Ilustrator) have a viewBox data but no height and width.
     
  17. Seraphim-Whiteless

    Seraphim-Whiteless

    Joined:
    Jun 23, 2014
    Posts:
    140
    done https://fogbugz.unity3d.com/default.asp?1228604_vqlrkotv0ij30f53
     
  18. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    481
    From the inspector. You can try very low gradient resolutions, just for testing.

    Yes. We decided to ignore the root viewBox by default in version 2.0.0 because of all the confusion that followed. Applying a root viewBox on an SVG that isn't rendered in a web browser doesn't really makes sense. There's a "Viewport Options" section in the 2.0.0 inspector to get back the previous behavior if you want.
     
  19. vzlomvl

    vzlomvl

    Joined:
    Jun 25, 2016
    Posts:
    38
    I have changed Gradient Resolution to 16(minimum) but issue wasn't fix.
    But I spotted strange behaviour of the Atlas size. Atlas size was 2048x512 with 128 gradient resolution. But after I change resolution to 16 size of the Atlas didn't change.
    Size of the atlas with resolution 128
    upload_2020-3-18_18-52-46.png
    Size of the atlas with resolution 16
    upload_2020-3-18_18-53-58.png
    Hope this will help you to fix the issue.
    Thanks.
     
  20. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    481
    Thanks for sharing this information. The atlas size is huge. This is probably caused by the large number of different gradients in the SVG files. For each of those, the SVGImporter will reserve a few pixels on the bottom row to store gradient settings. This may be why this particular asset has gradient issues.

    We may have to allocate the settings in a more memory efficient manner to solve this.

    As a workaround, it will probably help to split your SVG asset into two (or more) SVG files. This will split the gradients into multiple atlases, which may fix your problems.
     
  21. vzlomvl

    vzlomvl

    Joined:
    Jun 25, 2016
    Posts:
    38
    Ok, we will try to split SVG like a workaround.
    Small update: Looks like with Vector Graphics 2.0.0.12 pack algorithm was changed and same SVG have a smaller size. Is it possible to use same algorithm in 1 version?
    Thanks.
    upload_2020-3-18_21-59-25.png
     
  22. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    481
    You're right, the packing changed to avoid situation like yours (completely forgot about that). No, it's not possible to revert by to the previous packing algorithm.
     
  23. vzlomvl

    vzlomvl

    Joined:
    Jun 25, 2016
    Posts:
    38
    Sorry. I mean to use the algorithm from v2 in the v1. Is it possible to upgrade v1 to a new algorithm? We are using LTS version of Unity and for now, there is no LTF for 2019. That is why we can't use 2.0.
     
  24. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    481
    We have no plans to bring it to v1 because of shader incompatibility. This is why we made that change when moving to v2.
     
  25. vzlomvl

    vzlomvl

    Joined:
    Jun 25, 2016
    Posts:
    38
    Got it. Thanks for your time.
     
    Last edited: Mar 18, 2020
  26. Alexis-Dev

    Alexis-Dev

    Joined:
    Apr 16, 2019
    Posts:
    69
    Hello,

    Did the UI SVGImage work with URP? Because I can't upgrade the material and I have weird rendering.

    Best,
    Alexis
     
  27. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    481
    It should work. What kind of weird rendering are you having?
     
  28. Alexis-Dev

    Alexis-Dev

    Joined:
    Apr 16, 2019
    Posts:
    69
    Hi,

    I attach the rendering to this message and the some settings screenshot.
    Maybe I made a mistake but I suppose me rendering must be more smooth than I have, no?

    Best,
    Alexis
     

    Attached Files:

  29. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    481
    If your canvas is in screen-space overlay mode, then antialiasing won't work since this will be rendered after the cameras.

    If you can, set the canvas to camera-space overlay instead, then the SVGImage should benefit from the camera antialiasing options (if you enable MSAA, it will affect the SVGImages).
     
  30. naruto93

    naruto93

    Joined:
    May 6, 2015
    Posts:
    8
    Hi, I try set color for part of SVG image but not working.
    How to get/set color part of svg? thanks
     
    Last edited: Mar 31, 2020
  31. Alexis-Dev

    Alexis-Dev

    Joined:
    Apr 16, 2019
    Posts:
    69
    Thx, I'll try this options !

    Alexis
     
  32. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    481
    If you only want to change the color of some particular shape of the SVG file, you best option right now is to do a SVGParser.ImportSVG call to get the shape data, then you can modify any shape color before turning them into sprites.
    There's an example here: https://forum.unity.com/threads/vector-graphics-preview-package.529845/page-8#post-3982924
     
  33. naruto93

    naruto93

    Joined:
    May 6, 2015
    Posts:
    8
    Thanks for your reply!
    I saw this post, but my SVG can't get shapes and it can get geometrys
     
  34. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    481
    Feel free to share the SVG with me (DM is fine), I don't really understand why that wouldn't work.
     
  35. naruto93

    naruto93

    Joined:
    May 6, 2015
    Posts:
    8
    It's my SVG file: https://pastebin.com/FzhEk73p
    Please check it for me, thanks!

    And I can see Geometry has a lots vertices more tag <polygon> in my SVG file

    Ex:
    <polygon points=" 178,229 157,248 139,296 126,349 137,356 158,357 183,342 212,332 235,288 235,261 228,252 212,250 188,251"/>
    I have 13 points in <polygon> tag but I get Geometry has 28 vertices and they shuffled.
    it's hard for me to check point inside/outside with polygon
     
    Last edited: Apr 2, 2020
  36. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    481
    The geometry you get after calling VectorUtils.TessellateScene() will usually have more vertices than the original path or polygon definition. This is because the tessellator has to generate extra geometry for the stroke widths, winding-rule holes, etc. You cannot rely on having a 1-to-1 association between the <polygon> points and the resulting tessellated geometry.

    However, you should get more accurate data from the resulting scene of the SVGParser.ImportSVG() call. If you look closely inside the SceneInfo.Scene structure, you should find a Shape object with a BezierContour array. This will contain the polygon lines converted to linear bezier contours.

    A simple way to get to a specific shape is to give ID tags to your polygon shapes (for example, <polygon id="polygon0" points="...). After that, you can access the resulting node with SceneInfo.NodeIDs["polygon0"].

    Hope this helps!
     
    naruto93 likes this.
  37. AzurySimon

    AzurySimon

    Joined:
    Jul 16, 2018
    Posts:
    19
    I have a similar problem: I am using Affinity Designer to export an SVG. It only contains a viewbox attribute and no width or height. I was expecting Unity to generate a sprite based on the viewport, but its size is just 100x100. Changing "Pixels Per Unit" does not change the sprite size. When I set "Viewport Options" to "Only Apply Root ViewBox" the result is the same as when using "Don't Preserve Viewport", ie. the viewbox attribute is completely ignored in both cases and the sprite is truncated to only contain its vertices, even though the viewbox should include a margin around my object. I checked this by importing the generated svg in different programs, Inkscape, AI and again in Affinity Designer, all showing the same correct result.
    I can export my SVG in Affinity Designer without a viewbox, which automatically adds width and height attributes, which then seems to work in Unity. However I find the behaviour of scaling a sprite with a viewbox attribute and no width and height to just 100x100 a bit unintuitive, as I would have expected the viewbox values to be used.

    I am using 2.0.0 preview 12. I have not tested the behaviour in older versions.

    Edit: forgot to mention that the behaviour "destroys" any kind of non-square aspect ratio, as the non-square viewbox just seems to be fitted inside of the 100x100 square.
     
  38. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    481
    We are indeed using a virtual 100x100 viewport size when applying a viewbox if no other reference size is provided by the SVG document. The idea was that it should map to a unit square in world space units. We considered using the camera viewport size as a reference, but given that the sprite will be placed in world space, this won't make the sprite stretch to the whole screen as one would expect.

    The viewbox attributes makes sense in a web browser or other document-based applications. In a 3D world, there's no obvious reference size that makes sense.

    I completely agree with that. Our recommendation right now is to not use the viewbox attribute.
     
  39. AzurySimon

    AzurySimon

    Joined:
    Jul 16, 2018
    Posts:
    19
    Wouldn't it make sense to use it in Unitys UI system then, esp. when the "Generated Asset Type" is set to "UI SVGImage"?

    Or have the option to switch between "unit square" and "size from viewbox attribute"? I don't know much about the technical details of the svg format (or any vector format tbh), maybe I am just not understanding what a "viewbox" is.

    I can work with that.. it just took quite some time to figure this out, as this is not explained anywhere in the docs.
     
    Thaina likes this.
  40. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    481
    Yes, I think it would make sense inside a canvas with known dimensions.

    Noted. We'll try to improve on that front.
     
  41. andyz

    andyz

    Joined:
    Jan 5, 2010
    Posts:
    1,297
    So do you only get the latest and greatest version with 2019.3? Is 2018 LTS version outdated or a just modified for shaders?
    This is a confusing part of packages
     
  42. SpaceMKD

    SpaceMKD

    Joined:
    Jan 12, 2017
    Posts:
    1
    Hey guys,


    I have a question. Let's say I have selected all the notes that I want to interact with, how I get there positions -- world space or local space. I have tried FillTransform but all of the matrixes

    are the same.

    Thanks!
     
  43. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    481
    The position of a shape is defined by two things:
    1. The coordinates of the shape and
    2. The transform applied to the shape (using the transform attribute).
    The coordinates of the shape is stored in the Shape.Contours property. The transform of the shape is in the SceneNode.Transform property (it will be the identity matrix if not defined).
     
  44. jakobskote

    jakobskote

    Joined:
    Feb 15, 2017
    Posts:
    53
    Hi, I'm having some trouble creating gradients at runtime. They are either completely white or jumbled and weird, or just half the gradient is showing. Is there anywhere I can see an example of how to correctly create a gradient at runtime?

    (Btw, what I'm attempting to do is to "animate" some strokes to appear in my UI, by changing the gradient StopPercentage points. Like you would using keyframes with the end/start parameters in after effects. Maybe there is an easier way to do this?)

    Code:
    Code (CSharp):
    1. using System.Collections.Generic;
    2. using UnityEngine;
    3. using UnityEngine.UI;
    4. using Unity.VectorGraphics;
    5.  
    6. [ExecuteInEditMode]
    7. public class GradientTest : MonoBehaviour
    8. {
    9.     private Shape shape;
    10.     private Scene m_Scene;
    11.     private VectorUtils.TessellationOptions m_Options;
    12.     private Mesh m_Mesh;
    13.  
    14.     public float thickness;
    15.     public Color color;
    16.  
    17.     public float width = 1;
    18.     public float height = 1;
    19.  
    20.     public Image img;
    21.  
    22.     void Start()
    23.     {
    24.         shape = new Shape()
    25.         {
    26.             Contours = new BezierContour[] { new BezierContour() {
    27.                 Segments = new BezierPathSegment[5] {
    28.                     new BezierPathSegment() { P0 = new Vector2(0, 0), P1 = new Vector2(0, 0), P2 = new Vector2(height, 0) },
    29.                     new BezierPathSegment() { P0 = new Vector2(height, 0), P1 = new Vector2(height, 0), P2 = new Vector2(height, width) },
    30.                     new BezierPathSegment() { P0 = new Vector2(height, width), P1 = new Vector2(height, width), P2 = new Vector2(0, width) },
    31.                     new BezierPathSegment() { P0 = new Vector2(0, width), P1 = new Vector2(0, width), P2 = new Vector2(0, 0) },
    32.                     new BezierPathSegment() { }
    33.                 },}},
    34.             Fill = new GradientFill()
    35.             {
    36.                 Type = GradientFillType.Radial,
    37.                 Stops = new GradientStop[2] {
    38.                     new GradientStop() { Color = Color.blue, StopPercentage = 0 },
    39.                     new GradientStop() { Color = Color.red, StopPercentage = 1 },
    40.                 },
    41.             },
    42.         };
    43.  
    44.         m_Scene = new Scene()
    45.         {
    46.             Root = new SceneNode() { Shapes = new List<Shape> { shape } }
    47.         };
    48.  
    49.         m_Options = new VectorUtils.TessellationOptions()
    50.         {
    51.             StepDistance = 10.0f,
    52.             MaxCordDeviation = 1f,
    53.             MaxTanAngleDeviation = 5f,
    54.             SamplingStepSize = 100f
    55.         };
    56.  
    57.         m_Mesh = new Mesh();
    58.         GetComponent<MeshFilter>().mesh = m_Mesh;
    59.     }
    60.  
    61.     void Update()
    62.     {
    63.         if (m_Scene == null)
    64.             Start();
    65.  
    66.         var geoms = VectorUtils.TessellateScene(m_Scene, m_Options);
    67.         VectorUtils.FillMesh(m_Mesh, geoms, 1.0f);
    68.         img.sprite = VectorUtils.BuildSprite(geoms, 100.0f, VectorUtils.Alignment.Center, Vector2.zero, 128, true);
    69.     }
    70. }
     

    Attached Files:

    Last edited: Apr 19, 2020
  45. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    481
    Generating gradients at runtime are a bit more involved since the gradients are stored in a texture. I updated your script to support gradients. In summary:
    1. I created a new material using the "Unlit/VectorGradient" shader
    2. After generating the geometry, I call VectorUtils.GenerateAtlasAndFillUVs()
    3. I assign the generated texture to the material from step 1
    Since VectorUtils.GenerateAtlasAndFillUVs() creates a new texture at each call, I destroy the previous texture first to avoid leaks.

    The updated script is in attachment, hope this helps!
     

    Attached Files:

    jakobskote likes this.
  46. jakobskote

    jakobskote

    Joined:
    Feb 15, 2017
    Posts:
    53
    Awesome, thank you so much!! Now it works for gradients on mesh objects in the scene. How would I replicate it to work for UI? I tried creating a sprite from your code, but then I still get the strange jagged gradient.
     

    Attached Files:

  47. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    481
    Two things to check:
    - Make sure you're using a material with the "Unlit/VectorGradientUI" shader.
    - Make sure your canvas has "TexCoord2" enabled in the additional shader channels
     
    jakobskote likes this.
  48. jakobskote

    jakobskote

    Joined:
    Feb 15, 2017
    Posts:
    53
    Amazing, now it works. Thank you so much!
     
  49. snorrsi

    snorrsi

    Joined:
    Jan 30, 2017
    Posts:
    4
    @mcoted3d is the Vector Graphics package coming out of preview anytime soon-ish?
     
  50. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    481
    Probably not "soon-ish", we're having a lot of discussions on what should be included in the official release. Most notably related to the support of UIElements (now UI Toolkit).
     
unityunity