Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

Official Vector Graphics Preview Package

Discussion in 'UI Toolkit' started by rustum, May 4, 2018.

  1. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    I think what you're looking for is the StreamingAssets folder. Files that are put there will be copied verbatim to your player. See here:
    https://docs.unity3d.com/Manual/StreamingAssets.html
     
    ryanslikesocool likes this.
  2. Aleksander87

    Aleksander87

    Joined:
    Jul 7, 2017
    Posts:
    20
    Thanks for this great feature!

    What about the difference of batches? It seems to me that by using SVG sprites, requires 1 additional batch per SVG sprite
     
    tcmeric likes this.
  3. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    That's a very good point. Texture-based sprites can be batched very effectively, whereas SVG sprites is a different matter since they are geometry-based. This is definitely something to keep in mind.
     
  4. Little10Robot

    Little10Robot

    Joined:
    Aug 23, 2017
    Posts:
    20
    I wanted to let everyone know that I published an app that uses this new vector package for just about every asset. Working with SVGs has been a lot of fun. The app is called Goodness Shapes. It is a game for kids, but you might find it interesting even if that isn't your focus.



    Available on the Apple App Store:
    https://itunes.apple.com/us/app/goodness-shapes/id1453175329?mt=8
     
  5. The-Exceptional-Bruce

    The-Exceptional-Bruce

    Joined:
    May 10, 2015
    Posts:
    29
    Anyone know if the 19.2 Beta and 19.3 Alpha are going to be supported any time soon?
     
    Last edited: May 20, 2019
    recursive likes this.
  6. Aleksander87

    Aleksander87

    Joined:
    Jul 7, 2017
    Posts:
    20
    Thanks for the answer.
    I've understand that batching it's not possible for vector sprites but can we hope for some "unity magic" in order to make this happen in the future?

    Thanks!
     
  7. Forise

    Forise

    Joined:
    Dec 26, 2016
    Posts:
    1
    Does anyone know how to detect shape by click and change color of detected shape?
     
  8. UDN_41c53a1a-0daa-4677-a552-0a2e49c9be23

    UDN_41c53a1a-0daa-4677-a552-0a2e49c9be23

    Joined:
    Dec 28, 2016
    Posts:
    28
    Hello
    I found a problem, the gradient SVG can show correctly in sprite render, but Cannot display correctly with UI image.
    Even I use the Gradient Material.
    Is there something wrong? Could you help me with this problem?
    Thank you.
     

    Attached Files:

  9. michaeleconomy

    michaeleconomy

    Joined:
    Aug 28, 2018
    Posts:
    58
    I'm picking back up vector graphics for my project and it's pretty good - no major issues so far.

    I found a quirk, but annoying:

    so with a png sprite I can drag it directly from project window into my sprite renderer/sprite field (inspector window)

    with a svg, I have to drag the nested sprite from the project window (not the root file).

    This may seem trivial but for 100 sprites that's a lot of extra clicking. It would be nice if the behavior was consistent.

    Thanks!
     
  10. Ejlersen

    Ejlersen

    Joined:
    Apr 30, 2009
    Posts:
    11
    Trying out this package, so far I'm quite liking it.

    However, when using quadratic curve with multiple points. It does not render it the same as other SVG viewers. Given the following quadratic curve with three points:

    <path d="M0 100 Q 0 50, 50 50 T 100 100 Z" fill="none" stroke="#CE7867" stroke-width="6" />

    The curve produced is in Unitys SVG viewer rendered like this:



    But other viewers renders it like this:



    This looks correct.

    In the Unity rendered one. Notice the slanted right curve. It seems like the control point used for the second part of the curve is using the same control point as the first part. It should have inferred one from the previous.
     
  11. Ejlersen

    Ejlersen

    Joined:
    Apr 30, 2009
    Posts:
    11
    When changing import settings with SVGImporter, why does SaveAndReimport() change all your settings back to default values?
     
  12. Gok11

    Gok11

    Joined:
    Nov 11, 2014
    Posts:
    3
  13. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    I think this tip should help (taken from https://forum.unity.com/threads/unity-ui-svg-support-script.551254/):

     
  14. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    Good catch! We'll have a look.
     
  15. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    I'm not sure why, but it seems that changing the SVGImporter properties isn't enough to mark it as dirty, which smells like a bug on our side.

    In the meantime, calling EditorUtility.SetDirty(importer) before calling SaveAndReimport() should force it to reserialize.
     
  16. Ejlersen

    Ejlersen

    Joined:
    Apr 30, 2009
    Posts:
    11
    Thanks. The SetDirty-trick worked.
     
  17. UDN_41c53a1a-0daa-4677-a552-0a2e49c9be23

    UDN_41c53a1a-0daa-4677-a552-0a2e49c9be23

    Joined:
    Dec 28, 2016
    Posts:
    28
  18. michaeleconomy

    michaeleconomy

    Joined:
    Aug 28, 2018
    Posts:
    58
    Ok, on my old macbook - the color from my spriterenderer isn't being applied. On my newer windows machine this works fine. (both in the unity editor). It was hard to tell from this thread:

    Is this a known issue? If so - how wide spread is it (all macs?, computers older than 5 years?)?
     
  19. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    This will happen on GPUs that don't have instancing support. The GPU instancing docs (https://docs.unity3d.com/Manual/GPUInstancing.html) mention hardware that provides instancing support:

    • DirectX 11 and DirectX 12 on Windows
    • OpenGL Core 4.1+/ES3.0+ on Windows, macOS, Linux, iOS and Android
    • Metal on macOS and iOS
    • Vulkan on Windows, Linux and Android
    • PlayStation 4 and Xbox One
    • WebGL (requires WebGL 2.0 API)
    We unfortunately don't have a workaround for platforms without instancing support. However if the color variants are limited, you could potentially create multiple materials and change the color of the material (instead of the renderer's color). This is definitely not the most efficient, but might be a possible solution depending on your situation.
     
    michaeleconomy likes this.
  20. Mastaroth

    Mastaroth

    Joined:
    Dec 20, 2014
    Posts:
    13
    Looks like the package is broken on 2019.2.0b3. There is any chance we can get fix?
     
  21. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    It will be fixed eventually, but I can't provide an ETA. This is caused by some classes/interfaces that were moved to packages. We'll probably have to publish a 2.0.0-preview version that will be 2019.2+ compatible (and keep 1.0.0-preview for 2019.1 and lower).
     
    Mastaroth likes this.
  22. michaeleconomy

    michaeleconomy

    Joined:
    Aug 28, 2018
    Posts:
    58
    This is super helpful. I have a couple of newb questions:
    Do you think a hundred materials would be doable (obvious I should test this, but would love a data point before I build it)? Is there a way in code to tell if the current platform supports GPU instancing?
     
  23. eduardmirica

    eduardmirica

    Joined:
    Dec 10, 2013
    Posts:
    3
    Hi,

    Question: how do I test if a point is inside a geometry. I get the list
    List<VectorUtils.Geometry>
    and I want for a given point to find all the shapes with the fill overlapping that point.

    Thanks
     
  24. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    A hundred materials seems like a lot, especially if they are all used at the same time in a given scene, but I would try it to see if it's sustainable in your case. I'm not aware of an API to determine if GPU instancing is available, unfortunately.
     
    michaeleconomy likes this.
  25. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    One way to do it is to going through each Geometry object, iterate through the triangles (the "Indices" field always represents triangles) and do some sort of point-in-triangle test. The Geometry object also has a Fill field that you can map back to the shape.
     
    PlanarBit and eduardmirica like this.
  26. michaeleconomy

    michaeleconomy

    Joined:
    Aug 28, 2018
    Posts:
    58
    Thanks!
     
  27. michaeleconomy

    michaeleconomy

    Joined:
    Aug 28, 2018
    Posts:
    58
    Ok here's another quirk I ran up against:
    The SVGImage class doesn't have the "preserve aspect" like Image does. Even better would be to let SVGs just work in the normal image class. :)
     
  28. springloaded_software

    springloaded_software

    Joined:
    Nov 24, 2015
    Posts:
    12
    Excuse the dumb question (despite making games for 20 years, I am new to unity, and vector art) - but I made an animation in adobe animate (using shape tweens) I exported it as an SVG, but when I import it - the animation doesn't play (I checked the svg - it plays find in a browser).
    * Do I add a script/something to make it play?
    * Or is it not supported (and if not - will it ever be supported)?
     
  29. Rasmus-K

    Rasmus-K

    Joined:
    May 13, 2013
    Posts:
    3
    Are there any timelines on when the package's future is decided?
    And potentially also what the future holds for it? (Dropping it or promoting it to non-preview)

    I am sure you cannot commit to anything fixed, but even a rough expectation/indication would aid in evaluating whether to start using the package for upcoming projects - of course keeping in mind that you cannot make guarantees :)
     
  30. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    I don't know how Animate exports its animations in SVG format, but we do not support SVG animations. We had plans for a tight integration with the sprite animation pipeline, but this proved to be challenging. We would ideally want to animation the SVG curve data, and not the tessellated sprite for which the number of vertices can change when you reimport the asset with different import settings. I cannot provide an ETA of if/when animation support will happen.
     
  31. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    Short term, we will add support for Unity 2019.2+. After that, I can't tell unfortunately. Although we always provide important fixes to the package, new developments are on hold until we figure out how to integrate with Unity's many moving parts (2D Sprites, Canvas UI, UIElements, DOTS/Job System, etc.).

    I understand that using a preview package in production feels risky, but I always say the same thing: if the package solves a problem for you, I wouldn't shy away from using it. We always try to fix important bugs in a timely manner.
     
  32. eduardmirica

    eduardmirica

    Joined:
    Dec 10, 2013
    Posts:
    3
    Thanks! Your answer helped me a lot!
     
  33. eduardmirica

    eduardmirica

    Joined:
    Dec 10, 2013
    Posts:
    3
    new question: I have a
    VectorUtils.Geomtry
    object and I want to change the
    Fill
    field from
    SolidFill
    to
    TextureFill
    . My code is something like this:
    Code (CSharp):
    1. TextureFill tfill = new TextureFill() { Texture = fillTex };
    2. geom.Fill = tfill;
    3. VectorUtils.FillMesh(meshColorOverlay.mesh, new List<VectorUtils.Geometry>() { geom }, _tessOptions.StepDistance, true);
    Well it seems to do nothing :p
     
  34. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    Elements with textures and/or gradients require a bit more effort to make it work:
    1. Every textures and gradients should be packed in a texture atlas for more efficient drawing
    2. The UVs should be filled on the geometries
    3. The VectorGradient shader should be used for drawing
    You can call
    VectorUtils.GenerateAtlasAndFillUVs(geoms, 64)
    to pack the textures and fill the UVs. This will return a
    TextureAtlas
    object which has the texture you need. Plug that texture in to your mesh material, use the Unlit/VectorGradient shader, and you should be good to go!
     
  35. Edan-Smith

    Edan-Smith

    Joined:
    Jan 21, 2015
    Posts:
    27
    Hello,
    There is a rare bug that some times the SVGs won't render at all on WebGL.
    This never happened on my computer, but, on some devices sounds like it can happen.

    It happened to a friend and after he restarted his PC, it worked... I couldn't get any debug info though.

    Are there any known limitations that wouldn't make SVGs work on WebGL for specific devices?

    If I be able to gather more info, I will post in here.

    - Thanks

    EDIT: I was able to reproduce the problem. It happens when you disable hardware acceleration on google chrome, and then this message appears:
    ------- GLSL link error: Vertex shader active uniforms exceed GL_MAX_VERTEX_UNIFORM_VECTORS (256)

    It spams on the console non-stop and the SVGs won't get rendered at all. (You also get a terrible FPS, but might be because some other reasons)
     
    Last edited: Jun 8, 2019
  36. Ranom

    Ranom

    Joined:
    Oct 10, 2012
    Posts:
    49
    Hi there,

    I think I've found a bug! (preview 26)

    I'm trying to create a texture using the API.

    1. Create Scene
    2. Render to Sprite
    3. Render to Texture

    If I have a line that goes from (0,0) -> (512, 512) then when I render to sprite, the sprite is automatically scaled to fit in that line.

    I want to render only a part of the scene e.g. (0,0) -> (256,256).

    To do this I pass a rect in to VectorUtils.BuildSprite. This causes the following exception

    Invalid vertex array. Some vertices are outside of the Sprite rectangle: (256.000000, 256.000000).
    UnityEngine.Sprite:OverrideGeometry(Vector2[], UInt16[])
    Unity.VectorGraphics.VectorUtils:BuildSprite(List`1, Rect, Single, Alignment, Vector2, UInt16, Boolean) (at Library/PackageCache/com.unity.vectorgraphics@1.0.0-preview.26/Runtime/VectorSprite.cs:116)
    VectorTest:SceneNodeToSprite(SceneNode, Rect) (at Assets/Vector/VectorTest.cs:87)
    VectorTest:Start() (at Assets/Vector/VectorTest.cs:183)​

    If I set flipYAxis to true it works!

    Looking at the method it looks like "VectorUtils.ClampVerticesInBounds(vertices, rect);" should be outside the if/elseif block.

    Code (CSharp):
    1. public static Sprite BuildSprite(List<Geometry> geoms, Rect rect, float svgPixelsPerUnit, Alignment alignment, Vector2 customPivot, UInt16 gradientResolution, bool flipYAxis = false)
    2. {
    3. ...
    4.     if (rect == Rect.zero)
    5.     {
    6.         rect = VectorUtils.Bounds(vertices);
    7.         VectorUtils.RealignVerticesInBounds(vertices, rect, flipYAxis);
    8.     }
    9.     else if (flipYAxis)
    10.     {
    11.         VectorUtils.FlipVerticesInBounds(vertices, rect);
    12.  
    13.         // The provided rect should normally contain the whole geometry, but since VectorUtils.SceneNodeBounds doesn't
    14.         // take the strokes into account, some triangles may appear outside the rect. We clamp the vertices as a workaround for now.
    15.         VectorUtils.ClampVerticesInBounds(vertices, rect);
    16.     }
    17. ...
    18. }
    Thanks,

    Karle
     
    Last edited: Jun 11, 2019
  37. Ranom

    Ranom

    Joined:
    Oct 10, 2012
    Posts:
    49
    So I guess this isn't a bug above, and how it's expected to work.

    Would I use a Clipping shape on the root node to achieve what I'm looking for?
     
    Last edited: Jun 11, 2019
  38. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    Thanks for reporting. I currently have no idea why this is happening if you disable hardware acceleration on Chrome. I'll try to get more information.
     
    Edan-Smith likes this.
  39. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    You can use a clipping shape, but this will result in a *very* expensive operation.

    Can you render the full vector scene to a texture, but use UVs to only show part of it?
     
  40. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    Can you please file a bug with the bug reporter? (Help > Report a bug...) This would be very helpful.
     
    Edan-Smith likes this.
  41. Ranom

    Ranom

    Joined:
    Oct 10, 2012
    Posts:
    49
    Thanks for you reply. Fortunately I'm only using it for fairly simple operations at the moment. I'll try using UVs if it gets slow, good idea :)
     
  42. exzizt

    exzizt

    Joined:
    Sep 30, 2017
    Posts:
    78
    Bug: Sprite masks do not work when using stretch fill set to disabled on the Pixel Perfect Camera.
     
  43. CodogXII

    CodogXII

    Joined:
    Apr 18, 2014
    Posts:
    8
    Weird. I posted to what I thought was this thread, but I don't see it here now. Apologies if this shows up twice.

    We are using Unity Version 2018.3.7f1 with the latest Vector Graphics Package.

    We have an asset that is acting kind of strange. Here is the SVG file and a screen cap of how it appears in the editor. Any ideas on how to resolve this?

    https://www.dropbox.com/s/pviuclrgmr0t8ze/Mother-waving-1.svg?dl=0

    and

    https://www.dropbox.com/s/1du8q49vama7rji/PurpleMama.png?dl=0

    Any ideas how to fix mama?

    Thanks,

    Cain
     
  44. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    This seems like a valid bug, can you file a "official" bug report? (Help > Report a Bug...)
     
  45. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    Hi! The asset seems to have pretty big embedded raster images. The generated texture atlas had dimensions of 8192x2048 on my machine. This may be too much to handle for the SVG atlassing system. I would recommend reducing the size of the embedded raster images.
     
  46. exzizt

    exzizt

    Joined:
    Sep 30, 2017
    Posts:
    78
    Done. Hope you guys can solve this issue expediently. :)
     
  47. tosiabunio

    tosiabunio

    Joined:
    Jun 29, 2010
    Posts:
    115
    Will Vector Graphics be compatible with 2D lights package being developed?
     
  48. CodogXII

    CodogXII

    Joined:
    Apr 18, 2014
    Posts:
    8
    Thank you so much for looking into this for me! Unity is the best!
     
    mcoted3d likes this.
  49. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    I would not expect it to work for vector sprites. I assume that the 2D lighting requires a raster normal map. which would be challenging to plug with a vector sprite. I would expect it to work if you import your SVGs as "textured sprites" though.
     
    tosiabunio likes this.
  50. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    998
    We just published versions 2.0.0-preview.2 which works with 2019.2.