Search Unity

  1. Unity 2020.2 has been released.
    Dismiss Notice
  2. 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. haywirephoenix

    haywirephoenix

    Joined:
    May 17, 2017
    Posts:
    86
    Sounds like you want the 2D Animation Package. You can use it to rig your characters.

    https://forum.unity.com/threads/2d-animation-preview-packages.521778/

    They were working on SVG importer support but I'm not sure of it's ready yet, try it see what happens. If not you'll have to import your svg into photoshop first. Again they also didn't have layer support last time I checked. Check out the tutorials, you have to space all the limbs out in the file. Good luck!
     
    Last edited: Nov 10, 2020
  2. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    593
    As far as I can tell, Illustrator usually exports layers as SVG groups, which are supported. Feel free to share the illustrator with me in DM so that I can have a look.
     
  3. unity_tQioXxX9yCAbFg

    unity_tQioXxX9yCAbFg

    Joined:
    Mar 9, 2020
    Posts:
    2
    I installed the last update of SVG Importer and imported in my scene my SVG image but it doesnt appear at all.
    I need it for my UI so I set it as "UISVGImage" but it doesn't show.
    I also have this error message:
    Vertex array is too large. A sprite mesh may not have more than 65535 vertices.

    Has anyone encountered the same issue?
     
  4. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    593
    This happens when the importer generated too many vertices. You'll have to reduce the tessellation quality.
     
  5. unity_tQioXxX9yCAbFg

    unity_tQioXxX9yCAbFg

    Joined:
    Mar 9, 2020
    Posts:
    2
    Cheers, will try this out!
     
  6. Funtyx

    Funtyx

    Joined:
    May 3, 2017
    Posts:
    11
     

    Attached Files:

    mcoted3d likes this.
  7. dixitabhi

    dixitabhi

    Joined:
    May 21, 2018
    Posts:
    7
    Hi everyone,
    i want to get a specific node ID from an SVG file and use that as a texture that could be applied to my 3D mesh. How can this be done? Any answers?
     
  8. MaskedMouse

    MaskedMouse

    Joined:
    Jul 8, 2014
    Posts:
    635
    are there any plans for adding an in-folder preview of the UI SVG Image like Texture2D has?
    I've got a folder with many SVG images but I always have to search through by selecting them to be able see them in the preview window. It would be nice if we could get that preview image to show on the asset itself instead of a prefab icon.

    SVG preview.png
     
    Last edited: Nov 10, 2020
    mcoted3d likes this.
  9. wtetotew

    wtetotew

    Joined:
    Apr 12, 2020
    Posts:
    24
    Hi Unity team.
    I noticed my imported svg file is considerably smaller than a PNG equivalent.

    In the preview inspector window I got this:

    The SVG is 502 B.
    The PNG is 8 MB! for the same aspect in the Game view.

    So my question is: Does the size difference is kept in the Build?
    It's impressive, why won't you want to use more SVG?

    Also, is it possible to use SVG for UI elements?

    Thanks,
    Regards
     
  10. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    593
    You can do it by parsing the SVG with
    SVGParser.ImportSVG
    and fetch the
    TextureFill
    of your elements.

    Code (CSharp):
    1.         var shape = sceneInfo.NodeIDs["YourID"].Shapes[0];
    2.         var fill = shape.Fill as TextureFill;
    3.         var tex = fill.Texture;
     
  11. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    593
    I just tried exporting the excavator from Illustrator using File > Export > SVG, everything seemed to import fine in Unity, unless I'm missing something?
     

    Attached Files:

  12. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    593
    There are plans, but generating previews from prefabs will probably require some core Unity changes. In any case, thanks for reporting!
     
  13. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    593
    The size in the build will be different than the size of the SVG file. What's stored in the build will be the triangulated mesh that was generated from that SVG. The size of that mesh is displayed over the preview in the inspector.

    It's true that SVG assets are convenient, but they have some downsides:
    - They may be slower to render (more intricate geometry)
    - They are not "first-class citizen" in Unity like plain textures.
     
  14. EmilKoel

    EmilKoel

    Joined:
    Jan 19, 2019
    Posts:
    7
    Any news ?
     
  15. patrickdown

    patrickdown

    Joined:
    Jul 20, 2017
    Posts:
    1
    VectorUtils.TessellatePath with these settings seems to go into an infinite loop.This is in 2020.1.13 Vector Graphics 2.0.0-preview.13

    Code (CSharp):
    1.  
    2.         var segments = VectorUtils.MakeArc(new Vector2(50, 50), 0, 2.5f, 40);
    3.  
    4.         var contour = new BezierContour()
    5.         {
    6.             Segments = segments,
    7.             Closed = false
    8.         };
    9.  
    10.         var pathProps = new PathProperties()
    11.         {
    12.             Stroke = new Stroke() { Color = Color.white, HalfThickness = 2.0f },
    13.             Head = PathEnding.Round,
    14.             Tail = PathEnding.Round // <-- this causes the issue
    15.         };
    16.  
    17.         var options = new VectorUtils.TessellationOptions();
    18.         options.SamplingStepSize = .1f;
    19.         options.StepDistance = 10;
    20.         options.MaxCordDeviation = 1;
    21.  
    22.         VectorUtils.TessellatePath(contour, pathProps, options, out var vectors, out var indexes);
    23.  
     
  16. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    593
    Thanks for reporting, we'll have a look.
     
  17. Foriero

    Foriero

    Joined:
    Jan 24, 2012
    Posts:
    540
    Hey Patrick, how far is the production version? Thanks Marek.
     
  18. raymond999

    raymond999

    Joined:
    Feb 10, 2017
    Posts:
    3
    Hi, there is a white banding around the texture2d returned by VectorUtils.RenderSpriteToTexture2D() if i use a antiAliasing value other than 1, even if I specify expandEdges = true. Is there any fix to this problem / Am I doing something wrong? Thanks!
    (Below is a texture2d generated by VectorUtils.RenderSpriteToTexture2D with antiAliasing = 8 and expandEdges = true, I tint it with a black background so that you can see the white banding around) 102716838-5a1c9c80-4319-11eb-9fde-117d5f1a0ced.png
     
  19. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    593
    I'm not aware of this kind of issue, can you share your asset so that I can look if it's something with the SVG itself?
     
  20. raymond999

    raymond999

    Joined:
    Feb 10, 2017
    Posts:
    3
    Sure, this is just a random SVG file I got online, but it happens with every SVG files that I've tried so far.
    (Extra info: After calling VectorUtils.RenderSpriteToTexture2D() I used EncodeToPNG() on the created texture to save it, don't know if it makes any difference.)
    Thanks!
     

    Attached Files:

  21. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    593
    Weirdly enough, I don't notice any banding using the following snippet.
    Code (CSharp):
    1.         var sprite = AssetDatabase.LoadAssetAtPath<Sprite>("Assets/elephant.svg");
    2.         var mat = new Material(Shader.Find("Unlit/Vector"));
    3.         var tex = VectorUtils.RenderSpriteToTexture2D(sprite, 512, 512, mat, 8, true);
    4.         System.IO.File.WriteAllBytes("C:\\elephant.png", tex.EncodeToPNG());
    5.         Material.DestroyImmediate(mat);
    6.         Texture2D.DestroyImmediate(tex);
    7.  
    If this is problematic for you, the best would be to file a bug report (Help > Report a bug). This way, we will have access to the full project setup.
     
  22. raymond999

    raymond999

    Joined:
    Feb 10, 2017
    Posts:
    3
    Weird, can you send me the elephant.png you created using the above snippet? Thank you!!
     
  23. EvOne

    EvOne

    Joined:
    Jan 29, 2016
    Posts:
    118
    My current project is for URP 2D Rendere and uses Vector Graphics package
    And when 2020.2 came out, I tried to switch to it. And I was surprised that I can't find a VectorLit shader anywhere - is it so conceived?
    Before that (my current verified version is 2019.4.9f1), the VectorUnlit material took on light from 2D lights.
    And I just didn't think about what kind of shaders were there - they were once at the very beginning of development automatically updated when importing the project, and just worked.
    I understand that this is wrong for UnLit :D, but it worked and looked great!
    But what is offered now?
    Is it really nothing? And there will be no VectorLit shader?

    sorry for googletranlslate!
     
  24. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    593
    Sure, here it is!
     

    Attached Files:

  25. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    593
    There is not "lit" version of the vector graphics shaders at this time. That being said, the auto shader conversion that you mentioned is intriguing, so I'll have a look into it to see what the conversion process is doing. In the short-term, you may want to import your SVG assets as textured-sprites instead.
     
    EvOne likes this.
  26. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    593
    This seems to be caused by the missing MaxTanAngleDeviation in the tessellation options, which will default to 0. We will fix in the next version. In the meantime, providing a value for MaxTanAngleDeviation (say, 0.01f) will fix the infinite loop.
     
    EvOne likes this.
  27. adammpolak

    adammpolak

    Joined:
    Sep 9, 2018
    Posts:
    202
    Is

    "com.unity.vectorgraphics": "2.0.0-preview.13",

    meant to work with UI Builder 1.0.0 or is that currently not supported

    I can't find information on compatibility between the two and even though I am able to import svg's to my Asset folder I am not able to choose them as a Background image in UI Builder (it shows no svgs in the project).
     
  28. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    593
    It's not currently supported. SVG support in UI Builder is planned, but I don't know the exact schedule.
     
  29. adammpolak

    adammpolak

    Joined:
    Sep 9, 2018
    Posts:
    202
    Thank yoU!

    Question,

    upload_2021-1-14_18-47-16.png

    Is there another type of functionality that UI Builder supports that this documentation (highlighted above) is referring to?
     
  30. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    593
    Ah, I was mistaken! You can assign SVG images in UI Builder (I completely missed this feature). All you have to do is import your SVG as a "UI Toolkit Vector Image" type ("Vector Sprite" won't work), and, in the UI Builder, set the background type as "Vector":



    Hope this helps!
     

    Attached Files:

  31. adammpolak

    adammpolak

    Joined:
    Sep 9, 2018
    Posts:
    202
    Nice! How do you import as a UI Toolkit Vector Image type? I follow the Import Assets flow: "Assets" > "Import New Asset..." > Then I clicked on my svg , what other way is there?
     
  32. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    593
    Look in the SVG inspector:

     

    Attached Files:

  33. adammpolak

    adammpolak

    Joined:
    Sep 9, 2018
    Posts:
    202
    Thank you!!
     
  34. tosiabunio

    tosiabunio

    Joined:
    Jun 29, 2010
    Posts:
    115
    With Anima2D deprecated and 2D Animation working only with traditional sprites - what are our future options to have skeletal animation for vector graphics objects?

    I don't expect deformable mesh (although it would be great) but an easy way to create skeletons and attach vector objects to the bones.
     
    mannspia and PlanarBit like this.
  35. dujimache

    dujimache

    Joined:
    Dec 17, 2011
    Posts:
    31
    hello, i downloaded the
    Unity-Technologies/vector-graphics-samples project, 2.0.0-preview.14, opened with Unity 2020, and put a svg file into the project, the svg importer only shows part of the svg file. When opened with browser,the svg file shows like this: but svg importer shows like this ,why???
     

    Attached Files:

  36. AzurySimon

    AzurySimon

    Joined:
    Jul 16, 2018
    Posts:
    24
    Is there any way to check if a Sprite is being generated from a vector graphic (in our case svg) vs bitmap texture?

    In our application we want to be able to use a
    List<Sprite>
    of both "normal" and vector sprites and apply them to an Image component. I understand you would normally use an Image component for texture sprites and a SVGImage component for vector sprites, but I can't find a way to check wether I need to add an Image or SVGImage component to my instantiated GameObject.

    Or should I just use a SVGImage component for all types of sprites in this case, since it seems to be working with texture sprites as well?
     
  37. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    593
    There's a bug with the handling of embedded jpg images. We will fix this. In the meantime, if you embed your image as a PNG it should work!

    EDIT: If you really want to use a jpg, you can manually edit the SVG file and replace "data:image/jpg" by "data:image/jpeg", the bug on our side was a simple omission of handling "jpg" types.
     
    dujimache likes this.
  38. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    593
    Not easily. There's no real distinction between an SVG sprite and a normal sprite. Note that if a sprite has no texture assigned, it is pretty much guaranteed it was generated by the SVG importer. But some SVG imported files will still have a texture (those with gradients and/or embedded images).

    My suggestion would be to keep track of the sprite assets that were imported by the SVG importer in a list (you can probably use an AssetProcessor and check for assets with the .svg extension). Then you could query that list when adding an Image/SVGImage.
     
  39. dujimache

    dujimache

    Joined:
    Dec 17, 2011
    Posts:
    31

    yes, thank you very much!!
     
  40. AzurySimon

    AzurySimon

    Joined:
    Jul 16, 2018
    Posts:
    24
    Thanks for your quick response. This seems like a lot of work for when I just want to use sprites without having to worry wether they are bitmaps or vectors. As I mentioned, texture sprites seem to work with the SVGImage component just as well. I suspect the generated mesh consists of just a quad instead of the usually generated "vector graphics mesh", depending on the input to SVGImage.GenerateSprite(VertexHelper vh)?

    Can I just use a SVGImage for all types of sprites or is there anything I am missing? Performance issues, edge cases, missing features?
     
  41. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    593
    Indeed, I had a quick look at SVGImage, and it seems to be designed to work with regular sprites as well, so it's definitely worth a shot. I don't foresee any significant performance difference (SVGImage has a special code path to deal with gradients, but it first checks if the channel is used, so this shouldn't impact performances).
     
unityunity