Search 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:
    309
    We can't commit on a date at this time. There are still some features that we need to revisit, so we are not yet ready to drop the "preview" tag just yet.

    Like I said a few times, 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.
     
  2. Rosethornian

    Rosethornian

    Joined:
    Apr 26, 2018
    Posts:
    30
    Is 2019.3.0a10 broken with respect to SVG support?
     
  3. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    309
    Yes. Some more methods moved out of experimental, a fix will be coming in the next few days.
     
  4. sergebat

    sergebat

    Joined:
    Nov 22, 2015
    Posts:
    4
    Done. Case 1172332.

    Here's the screenshot from empty project to clarify what I mean. These are two identical SVG files. Pivot for both is set to SVG origin. One is Vector sprite, the other Textured sprite.

    Both are placed at (0, 0) in the scene. It seems that Textured sprite version does not respect the pivot point.

    (the scale is different, but I decided to keep all other settings to their defaults for minimal repro case)

    upload_2019-7-26_17-2-57.png
     
    Last edited: Jul 26, 2019
  5. sergebat

    sergebat

    Joined:
    Nov 22, 2015
    Posts:
    4
    Let me take back this issue.

    Originally I've tried adding two SVG sprites (Texture Sprite Generated Asset Type, 1024x1024, large transparent margins) to the single "Sprite Atlas" asset types. They were not packed "tightly" as I expected.

    However, when I enabled "Mesh Type: Tight" things worked normally. Below is two sprite atlases with two PNG sprites and two identical SVG Texture Sprite. They are indeed optimally packed into Sprite Atlas asset removing unneeded transparent area.

    upload_2019-7-26_17-54-0.png
     
  6. Rosethornian

    Rosethornian

    Joined:
    Apr 26, 2018
    Posts:
    30
    @mcoted3d I have a number of SVG files which render just fine in both Inkscape and Adobe Illustrator but can't be imported into Unity. They just end up as empty squares in the Assets folder and can't be added to the scene.

    What's the best way for me to get you to determine why these files don't work with Unity? Are there some known restrictions on SVG features that would cause this?
     
  7. Rosethornian

    Rosethornian

    Joined:
    Apr 26, 2018
    Posts:
    30
    @mcoted3d Sorry to keep bombarding you with questions but I have another one!

    I am very new to Unity so I don't understand much about the structure that results when an SVG file is imported. I believe it's called a prefab and I'm assuming that access to the original SVG's DOM is not possible.

    For my use case, I want to not just be able to scale vector graphics but also change their dimensions such as, for example. making a button wider. This is different from scaling it horizontally and I again assume that this could only be done by fiddling with the dimensions specified in the SVG DOM.

    So am I right that such effects such as altering the imported SVG structurally is not possible after import?
     
  8. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    309
    Noted. Thanks for getting back with more details. We'll have a look.
     
  9. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    309
    There are some features that aren't supported, as documented in the package docs:
    Otherwise, a likely failure is that the imported SVG generated too many vertices (we still have a 16bit limitation that comes from the sprite system). If you get an error message in the console while importing the SVG file that there are "too many vertices", it's likely that reducing the tessellation quality will help. If it still doesn't work, it would be worth filing a bug.
     
  10. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    309
    That's right.

    However, if you want to do DOM transformations at runtime, you may have a way out. We provide APIs to parse SVG files, and the resulting object is a "vector scene" that you can manipulate before the final tessellation. If you SVG elements have ID attributes, you can access them directly with the SceneInfo.NodeIDs dictionary that comes out of the SVGParser.ImportSVG() method. Once this is done, you can tessellate the vector scene to get a resulting sprite and/or mesh.

    There are many examples of this in this thread. For example:
    https://forum.unity.com/threads/vector-graphics-preview-package.529845/page-8#post-3982924
     
  11. Rosethornian

    Rosethornian

    Joined:
    Apr 26, 2018
    Posts:
    30
    @mcoted3d Thanks for the resources.

    So it seems that SVGs cannot form part of the UI but is there a way to capture events on the tessellated results/prefabs such as by addition of an EventSystem or through some other way? I want my SVGs to be interactive.
     
  12. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    309
    If you really want to detect clicks on actual SVG content (not empty space), you'll probably have to iterate through the shape's triangles and do some sort of point-in-triangle test. Otherwise, use a textured-sprite SVG for your UI (comes with limited resolution of course).
     
  13. Sunny_Apples

    Sunny_Apples

    Joined:
    Mar 4, 2017
    Posts:
    3
    Hello

    I love the svg support inside Unity!

    Let's say I was to draw a detail game character inside Adobe Illustrator. And let's say that I wish to rig and animate this character using the 2D Animation Package inside Unity. I would than draw every moving part of my character (head, limbs and torso) on a separate layer inside of Adobe Illustrator.

    Are there any plans to make some kind of easy way to import this game character into Unity in a way where Unity knows the position of every element of the character (head, limbs and torso)?

    Currently, this is possible inside Unity with Adobe Photoshop's - Large Document Format (PSB). PSB file is so convenient for us artists - it makes it so easy to work on our game art, without wasting any time when we import the art in Unity.

    I wish there was an equally convenient solution when working with vector graphics. Are there any plans to add something like that to the package?

    Kind regards. :)
     
  14. Rosethornian

    Rosethornian

    Joined:
    Apr 26, 2018
    Posts:
    30
    @mcoted3d Are there any plans to either integrate vector graphics with the UI layer or to make imported SVGs more "interactive friendly"?
     
  15. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    309
    We did have talks regarding a feature like that. Unfortunately, we can't tell if/when this will happen.

    However, the good news is that I think you have all the tools needed to implement something like that on your own, if you feel like it. The SVGParser.ImportSVG() method returns a struct which has a NodeIDs dictionary containing the nodes which were identified by IDs in the document. You could create intermediate Scene objects with nodes that were appropriately identified and tessellate them into separate sprites automatically.

    This is a bit of work, but it should work. The SceneNode objects have a Transform property that will allow you to properly align the generated sprites.
     
  16. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    309
    We have no immediate plans for providing an out-of-the-box picking system for SVGImage elements. You'll have to use a custom solution for the time being.
     
  17. Rosethornian

    Rosethornian

    Joined:
    Apr 26, 2018
    Posts:
    30
    Can you help me with suggestions as to how this "custom solution" would be implemented?

    Thanks again for all your help.
     
  18. James-Ground-Shatter

    James-Ground-Shatter

    Joined:
    Aug 19, 2014
    Posts:
    35
    Hello, we have an issue where imported SVGs are appearing at different sizes within the editor on different PCs. Specifically that they appear about 55% bigger on my machine than they do on my colleague's. Using the exact same project and settings.

    If they do a build it looks correct on my machine, so it's an editor specific issue, as far as I can tell. Is there any reason why you could think that this would happen? Or has anyone else seen this behaviour?
     
  19. worldschild

    worldschild

    Joined:
    May 29, 2017
    Posts:
    1
    Hi everyone, sorry for a stupid question. But I used Vector Graphics in 2018 project but now I can't download it in 2019.
    Please help me.
    upload_2019-8-6_23-0-13.png
     
  20. Miguel_LZ

    Miguel_LZ

    Joined:
    Jan 12, 2018
    Posts:
    18
    Check the manifest.json file and see if the Vector Graphics package is upped to 2.0.0
    Code (CSharp):
    1. "com.unity.vectorgraphics": "2.0.0-preview.5"
    You need that in 2019.2
     
    worldschild likes this.
  21. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    309
    A couple ideas:
    - Make a custom "On Click()" event on the SVG image, which goes through the tessellated sprite's triangle to detect click overlaps. This might be expensive if your SVG are very finely tessellated.
    - Import a textured-sprite version of the SVG asset, where you can use the regular picking system.
     
  22. Rosethornian

    Rosethornian

    Joined:
    Apr 26, 2018
    Posts:
    30
    @mcoted3d Thanks for the suggestions.

    I definitely want to use Vector Sprites so, given that, how would I implement your suggestion in such a way that once a click is detected within a triangle I can relate it back to the original SVG DOM so I know which part of my SVG was clicked?

    I can keep the DOM in memory but it's the matching the clicked triangles to the regions of the SVG that I don't know how to do.
     
  23. RisingMos

    RisingMos

    Joined:
    Aug 28, 2015
    Posts:
    17
    I am only getting version 2 for Vector Graphics in 2019.2. I thought that version 2 is not supported in 2019.2. Am I doing something wrong?
     

    Attached Files:

  24. Miguel_LZ

    Miguel_LZ

    Joined:
    Jan 12, 2018
    Posts:
    18
    It's actually the opposite. Version 2 is the only version supported by 2019.2, so you have to upgrade to 2.0.0-preview.x in order to use the package in 2019.2

    What you're getting is correct.
     
  25. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    309
    When you call VectorUtils.TessellateScene(), you get a list of Geometry objects that each represents a tessellated shape. You can map the Fill property of the geometry back to the Shape's Fill property.

    I would probably first do a pass to map IFill objects back to the Shape or SceneNode objects. Then you can do a simple lookup from the Geometry's Fill property.
     
  26. Pix10

    Pix10

    Joined:
    Jul 21, 2012
    Posts:
    843
    Hey guys, thanks for your work on this. It came at a good time and it's been reassuringly solid since the early previews. I might have a few suggestions but the most pressing is:

    Invalid AABB errors on SVG sprites with no geometry.

    Incomplete mesh data in Sprite. Please reimport or recreate the Sprite.


    I'm working with thousands of SVG files.... Some have data, some are blank (no shapes) - the blanks are typically proxies, and as such will be in the scene often, at which point ErrorLog explodes with AABB errors.

    At runtime I disable the SpriteRenderer when a sprite has a zero vertex count, but that has a cost and doesn't solve the editor side, which is a lot worse for designers.

    So I'm trying to find a short term solution with an AssetPostProcessor, just adding a tiny proxy triangle should be fine, but I can't figure out a way around:

    Invalid vertex array. Some vertices are outside of the Sprite rectangle: (0.000000, 0.000000).

    Any suggestions? Could we have a nicer handling of empty sprites?
     
    Last edited: Aug 11, 2019
  27. Rosethornian

    Rosethornian

    Joined:
    Apr 26, 2018
    Posts:
    30
    Thanks @mcoted3d for the ideas, they are very helpful and much appreciated.

    Which release of 2019.3 will support vector graphics? They still seem broken in a11.
     
  28. torboot11

    torboot11

    Joined:
    Jul 31, 2013
    Posts:
    4
    Hi.
    Found an issue but not sure it is a bug or feature of current preview.
    So, using a SVG with multi-point fill crashes app. 2.0.0.-preview.4 Unity 2019.3.0a8.
    upd: On Android device, Not in editor.
     
    Last edited: Aug 13, 2019
  29. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    309
    Your idea of using an AssetPostprocessor to generate a single triangle should work as a workaround. The issue with the vertices outside the sprite rectangle can probably be solved by using one of the Sprite.Create() methods where you can provide an appropriate rectangle:
    https://docs.unity3d.com/ScriptReference/Sprite.Create.html

    You can use Texture2D.whiteTexture as a placeholder texture.

    I'm not sure how to more gracefully handle empty SVG files, but we'll have a look if we can at least generate an empty default asset instead of an invalid sprite.
     
    Last edited: Aug 14, 2019
    Pix10 likes this.
  30. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    309
    This definitely seems like a valid bug, especially since it only occurs in players. Can you please file a bug? (Help > Report a Bug...)
     
  31. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    309
    Version 2.0.0-preview.5 works with a12, I think it should work with a11 (not 100% sure though).
     
  32. Rosethornian

    Rosethornian

    Joined:
    Apr 26, 2018
    Posts:
    30
    Are vector graphics not included in 2D or Universal RP projects? I can't see them in the package manager. I would have expected them to at least be in 2D projects.
     
  33. Rosethornian

    Rosethornian

    Joined:
    Apr 26, 2018
    Posts:
    30
    It seems they're there in 2019.3.0a12 but I can't seem to get the same high quality rendering of SVGs in a 2D project as I can in a 3D project.

    Is there a reason for that or am I just not doing things correctly?
     
  34. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    309
    You'll have to enable antialiasing (Edit > ProjectSettings > Quality > Antialiasing). Also make sure that your camera is MSAA enabled.