Search Unity

  1. Unity 2020 LTS & Unity 2021.1 have been released.
    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:
    89
    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:
    655
    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. Jamryl

    Jamryl

    Joined:
    Mar 9, 2020
    Posts:
    8
    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:
    655
    This happens when the importer generated too many vertices. You'll have to reduce the tessellation quality.
     
  5. Jamryl

    Jamryl

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

    Funtyx

    Joined:
    May 3, 2017
    Posts:
    17
     

    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:
    653
    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:
    36
    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:
    655
    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:
    655
    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:
    655
    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:
    655
    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:
    2
    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:
    655
    Thanks for reporting, we'll have a look.
     
  17. Foriero

    Foriero

    Joined:
    Jan 24, 2012
    Posts:
    559
    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:
    655
    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:
    655
    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:
    122
    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:
    655
    Sure, here it is!
     

    Attached Files:

  25. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    655
    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:
    655
    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:
    292
    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:
    655
    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:
    292
    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:
    655
    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:
    292
    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:
    655
    Look in the SVG inspector:

     

    Attached Files:

  33. adammpolak

    adammpolak

    Joined:
    Sep 9, 2018
    Posts:
    292
    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:
    54
    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:
    34
    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:
    655
    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:
    655
    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:
    54

    yes, thank you very much!!
     
  40. AzurySimon

    AzurySimon

    Joined:
    Jul 16, 2018
    Posts:
    34
    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:
    655
    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).
     
  42. gumboots

    gumboots

    Joined:
    May 24, 2011
    Posts:
    284
    @mcoted3d Heya! Sorry for the ping, I'm just currently trying to figure out if it's possible to put a texture on an SVG (essentially using it as an infinite resolution shape) with multiply?

    I can't find any examples of anyone who's done it, and there appears to be a requirement to manually set the UVs? Basically, is it possible to overlay a texture onto SVGs, set the texture scale, and colourise it with a Multiply blending style?
     
  43. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    655
    I think you would have to rasterize the SVG in a texture before doing that operation, since you'd need to apply the blending per pixel. So you can probably render the SVG in a RenderTexture (if you want to keep the infinite resolution, you'd have to do it each frame), then apply the texture with custom blending afterward.
     
  44. gumboots

    gumboots

    Joined:
    May 24, 2011
    Posts:
    284
    Hmm unfortunately this isn't really viable for ~100 individual objects. That's a shame.
     
  45. patrickdown

    patrickdown

    Joined:
    Jul 20, 2017
    Posts:
    2
    Thanks, I will try it.
     
  46. ryaanjpf

    ryaanjpf

    Joined:
    Feb 17, 2020
    Posts:
    15
    Hi, are there any plans to add Mesh as a Generated Asset Type? So the SVG can be used on MeshRenderers :)
     
  47. kyubuns

    kyubuns

    Joined:
    Aug 6, 2013
    Posts:
    55
    Is there a way to generate Texture2D (or byte[] of png) from svg strings in Editor Script? (without Unity Importer)

    I have tried the following.

    I tried to call `VectorUtils.BuildSprite`.
    I read the code and it was consistent with what I wanted to do.
    However, I get an error at the line `sprite.OverrideGeometry` in `VectorUtils.BuildSprite`.
    That's say `Not allowed to override geometry on sprite`.

    Code (CSharp):
    1. var reader = new StringReader(svg);
    2. var sceneInfo = SVGParser.ImportSVG(reader, ViewportOptions.DontPreserve);
    3. var geometry = VectorUtils.TessellateScene(sceneInfo.Scene, tessOptions, sceneInfo.NodeOpacity);
    4. var sprite = VectorUtils.BuildSprite(geometry, Rect.zero, 1f, VectorUtils.Alignment.BottomLeft, Vector2.zero, 64);
    5. var svgImporter = new SVGImporter();
    6. var method = typeof(SVGImporter).GetMethod("MaterialForSVGSprite", BindingFlags.Instance | BindingFlags.NonPublic);
    7. var mat = (Material) method.Invoke(svgImporter, new object[] { sprite });
    8. var tex = VectorUtils.RenderSpriteToTexture2D(sprite, size.x, size.y, mat);
    Next, I tried was to save the svg once and then load the saved asset as Texture2D.
    This was successful, but slow for me as I am trying to do a large amount of processing as Import runs.

    Code (CSharp):
    1. using System.IO;
    2. using Unity.VectorGraphics;
    3. using Unity.VectorGraphics.Editor;
    4. using UnityEditor;
    5. using UnityEngine;
    6.  
    7. public static class SvgToPng
    8. {
    9.     public static VectorUtils.TessellationOptions TessellationOptions => new VectorUtils.TessellationOptions
    10.     {
    11.         StepDistance = 100.0f,
    12.         MaxCordDeviation = 0.5f,
    13.         MaxTanAngleDeviation = 0.1f,
    14.         SamplingStepSize = 0.01f
    15.     };
    16.  
    17.     public static byte[] Convert(string svg, Vector2 size)
    18.     {
    19.         var unityAssetsParentPath = Path.GetDirectoryName(Application.dataPath) ?? "";
    20.         var savePath = Path.Combine("Assets", "Temp.svg");
    21.         var saveFullPath = Path.Combine(unityAssetsParentPath, savePath);
    22.  
    23.         SvgImportTrigger.Size = new Vector2Int(Mathf.RoundToInt(size.x), Mathf.RoundToInt(size.y));
    24.         File.WriteAllBytes(saveFullPath, System.Text.Encoding.UTF8.GetBytes(svg));
    25.         AssetDatabase.ImportAsset(savePath);
    26.         // Call SvgImportTrigger.OnPreprocessAsset
    27.         var texture = AssetDatabase.LoadAssetAtPath<Texture2D>(savePath);
    28.         return texture.EncodeToPNG();
    29.     }
    30. }
    31.  
    32. public class SvgImportTrigger : AssetPostprocessor
    33. {
    34.     public static Vector2Int Size { get; set; }
    35.  
    36.     public void OnPreprocessAsset()
    37.     {
    38.         if (!(assetImporter is SVGImporter svgImporter)) return;
    39.  
    40.         svgImporter.SvgType = SVGType.TexturedSprite;
    41.         svgImporter.KeepTextureAspectRatio = false;
    42.         svgImporter.TextureWidth = Size.x;
    43.         svgImporter.TextureHeight = Size.y;
    44.     }
    45. }
    Is it possible to generate a Texture2D from a svg string without running Unity's Import process?
     
  48. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    655
    I don't think it is. Not in an editor context at least. As you've noticed, there's a limitation on sprite on when we can update their geometry. I understand this is not ideal, we'll investigate to see if we could by-pass the sprite and render straight to a Texture2D instead.
     
    PlanarBit and kyubuns like this.
  49. JonPQ

    JonPQ

    Joined:
    Aug 10, 2016
    Posts:
    95
    This is a great thread, a lot of useful information.
    I have noticed that some SVG's import ok if you drag them into the scene, but if you manually load and parse the mesh, then I get the error... "Invalid worldAABB. Object is too large or too far away from the origin."
    1) Is there a way I can alter the scene file, before tessellating/constructing the SpriteMesh in code with
    VectorUtils.BuildSprite() please? like re-position or normalize it somehow.
    my params are
    VectorUtils.Alignment.SVGOrigin, Vector2.zero. for origin and pivot.
    and what are the limits / reasonable values on scale and position ? my object is only at 70 or 80 units away from origin... which seems like it should be fine. perhaps scale is strange.

    2) how do you set import scale if manually importing please? dragging it into the scene comes in with 1.0 scale. but manually running the parsing as above, makes a massive sprite, I need to apply a scale to the gameObject of 0.0034 to get it roughly the same size as just dragging into the Hierarchy. I cant find any scale param, in the tesselate or BuildSprite() parameters.

    Update...... answering my own questions

    Re1). so unity sometimes cannot generate a mesh for the whole or parts of the SVG. you can check if the sprite's mesh is null and iff so disable the sprite... this stops unity from endlessly spewing errors while trying to draw the sprite... lets you trap the problem but does not fix it. Ensure the SVG only contains Flat color fill and gradient color fills.

    Unity perhaps needs to add their own error handling here to make a dummy mesh... like a simple magenta quad or something like that.

    Re 2) the scale is PPU in the BuildSprite() parameter list, default should be 100.0
     
    Last edited: Feb 16, 2021
    mcoted3d likes this.
  50. KTS95SL

    KTS95SL

    Joined:
    Apr 30, 2020
    Posts:
    7
    I know the vector coordinates of a point in .svg file. There are some shapes/paths in that .svg file and I want to find in which shape/path that point is containing. How can I do it with the Vector Graphics package?
     
unityunity