Official Vector Graphics Preview Package

What's the current state of the package? It's around 3 years and it's still in preview. Seems like development on this is a little bit dead?
Is any sort of animation supported yet? Can I create something like this health bar with the current state of the package?
https://codepen.io/justinryder/pen/OwzBVG

 

Is that worked for you?

 

I am using shapes like flower petals. Is that possible with shapes like flower petals as they don't have indices?

 

@mcoted3d I've noticed that TessellateScene() and VectorUtils.BuildSprite() take quite a while to build a sprite... sometimes over half a second for a largish .svg. even with a pre-filtered scene file to only generate sub nodes separately it still takes long enough for a noticeable pause or frame-rate hitch ... do you know if these functions can be threaded / run in the background please?

 

the shapes are all curves in svg, but when unity imports them, it converts them to triangle meshes, based on the import quality settings, it builds more or less dense triangle meshes.

 

Thank you !

 

Used the Vector Graphics 2.0.0-preview.14 in a project a little while ago and noticed it is no longer available under preview. Was planning to publish assets leveraging it, but may not be a safe thing to do. What is the current and future state of the project? This is a great package with tremendous potential!

 

Thanks for the feedback. So looks I can generally assume the project will continue to me further developer and maintained for the foreseeable future? This is a very useful package, will do what I can to contribute.

 

Hi!
I want to be able to change target resolution based on which device is used but can't find an example. How do you change the target resolution in runtime?

 

You can load the SVG file via script... then have your own quality settings exposed in inspector variables, or in a scriptable object.
the main trick was to rename the .svg file, as .bytes instead. Then you can load it as a text/data file

define a TextAsset variable, assign your .bytes file to that,
then load it using something like this...

Code (CSharp):

1.     private SVGParser.SceneInfo loadSVG()
2.     {
3.         using (var reader = new StringReader(TextAssetToLoad.text))
4.         {
5.             return SVGParser.ImportSVG(reader);
6.         }
7.     }

That gives you a sceneInfo object...

You can use VectorUtils to setup your custom settings....
var geometry = VectorUtils.TessellationOptions tess = new VectorUtils.TessellationOptions();

then Tesselate the scene and build your sprite or texture...
VectorUtils.TessellateScene(scene, tess);

var sprite = VectorUtils.BuildSprite(geometry, .......)

 

Thought I would share some small, probably unconventional feedback.

Firstly, thanks for making this amazing package. Works straight out the box like magic.

Literally my only problem with it (unfortunately) is that because it's a preview package, depending on it in any production-ready asset/plugin (such as the one my company is about to release) means transitively our asset is a preview "package," which gives the extended impression what we're delivering is something that is in alpha/beta and/or could potentially have major faults you would associate with said beta product. And all we're doing is using this one package so we can use svg icons, a super small, basic use case. As a result, we've basically had to batch convert all svgs to pngs and re-import icons across the project before we could release it.

So that's just a very small feedback. Super appreciative of the work over the years though, brilliant stuff. But I thought I would just mention just in case it's one of the types of user outcomes at the moment you're not aware of. Just because of the preview packages in use warning, it will potentially limit the amount of users you have testing and feeding back on this (despite just how stable this package appears to be in certain use cases).

Cheers,

 

Where do I post a bug for this package? It has a hidden dependency on "com.unity.modules.unitywebrequestwww". It trips up if you have that modules disabled in your project.

 

No problem, have done exactly that. I don't think it's an urgent issue, but it's nice to make sure our dependency tree's are accurate - especially in what I imagine will be quite a popular package.

 

Hello,

first thank you for this excellent package.

Is it possible to use imported svg as sprite with Sprite Shape Profile? When I tried, I got error...

Code (CSharp):

1. NullReferenceException: Object reference not set to an instance of an object
2. UnityEngine.U2D.SpriteShapeGenerator.TransferSprites (Unity.Collections.NativeArray`1[UnityEngine.U2D.SpriteShapeGenerator+JobSpriteInfo]& spriteInfos, UnityEngine.Sprite[] sprites, System.Int32 maxCount) (at Library/PackageCache/com.unity.2d.spriteshape@5.1.1/Runtime/SpriteShapeGenerator.cs:580)
3. UnityEngine.U2D.SpriteShapeGenerator.PrepareSprites (UnityEngine.Sprite[] edgeSprites, UnityEngine.Sprite[] cornerSprites) (at Library/PackageCache/com.unity.2d.spriteshape@5.1.1/Runtime/SpriteShapeGenerator.cs:599)
4. UnityEngine.U2D.SpriteShapeGenerator.Prepare (UnityEngine.U2D.SpriteShapeController controller, UnityEngine.U2D.SpriteShapeParameters shapeParams, System.Int32 maxArrayCount, Unity.Collections.NativeArray`1[T] shapePoints, Unity.Collections.NativeArray`1[T] metaData, UnityEngine.U2D.AngleRangeInfo[] angleRanges, UnityEngine.Sprite[] segmentSprites, UnityEngine.Sprite[] cornerSprites, System.Boolean UseUTess) (at Library/PackageCache/com.unity.2d.spriteshape@5.1.1/Runtime/SpriteShapeGenerator.cs:2484)
5. UnityEngine.U2D.SpriteShapeController.ScheduleBake () (at Library/PackageCache/com.unity.2d.spriteshape@5.1.1/Runtime/SpriteShapeController.cs:709)
6. UnityEngine.U2D.SpriteShapeController.BakeMesh () (at Library/PackageCache/com.unity.2d.spriteshape@5.1.1/Runtime/SpriteShapeController.cs:447)
7. UnityEngine.U2D.SpriteShapeController.OnWillRenderObject () (at Library/PackageCache/com.unity.2d.spriteshape@5.1.1/Runtime/SpriteShapeController.cs:416)
8. UnityEngine.Rendering.RenderPipelineManager:DoRenderLoop_Internal(RenderPipelineAsset, IntPtr, List`1, AtomicSafetyHandle)

 

Hi!

Quick question:

I have a diamond sprite that I need to scale to say 50 to cover the screen. Using a texture it looks blurry on the edges.

Spoiler

I decided to try and fix this with an svg. However, I am sure I am doing something wrong. It looks even worst.

Spoiler

The only thing that makes it look better is making the texture size to around 2000.

Spoiler

Spoiler

Is setting the texture size to 2000 the way to go? I feel like this would be bad for performance? Is there a setting I am missing so that no matter the scale, the svg will look good?

Or am I completely off base and that isn't how svgs work?

Thanks!

 

That make sense, thanks!

 

How can I load svg into il2cpp runtime?
when called, it throws an error VectorUtils.BuildSprite due to reflection

Code (CSharp):

1.    // The Sprite.Create(Rect, Vector2, float, Texture2D) method is internal. Using reflection
2.             // until it becomes public.
3.             var spriteCreateMethod = typeof(Sprite).GetMethod("Create", BindingFlags.Static | BindingFlags.NonPublic, Type.DefaultBinder, new Type[] { typeof(Rect), typeof(Vector2), typeof(float), typeof(Texture2D) }, null);
4.             var sprite = spriteCreateMethod.Invoke(null, new object[] { rect, pivot, svgPixelsPerUnit, texture }) as Sprite;

 

I haven't had time to read all these pages yet, however, I loaded up unity 2020.3 and I can not long see the Vector Graphics preview package, even after I tick the box to display previews.
The manual also shows it is not anywhere to be found in Unity 2020
https://docs.unity3d.com/2020.1/Documentation/Manual/pack-preview.html

I did have a 2019 project which I updated to 2020 and it took the package with it, but it's nowhere to be found if I start a new 2020 project.

Any ideas?

Thanks

 

This Package Isn't Supported In Unity 2020.1.x And Above! Will We See Support In The Future (Because I Have A Game That Uses SVG File's & Once 2019.4 LTS End's, I'm Probably Gonna Have To Convert Them All To PNG's And It Won't Look Good!)

 

Thanks very much for the info, it worked great.

 

Hi guys!
@mcoted3d

Ellipse (only) contour does transforming.
Why?



Code:

Code (CSharp):

1.  
2. foreach (Shape s in pNode.Shapes)
3. {
4.     Scene scene = new Scene() {Root = pNode};
5.     // mesh
6.     List<VectorUtils.Geometry> gms = VectorUtils.TessellateScene(scene, tessOptions);
7.     // outline
8.     List<Vector2> contour = new List<Vector2>();
9.     if (s.Contours != null && s.Contours.Length > 0)
10.     {
11.         BezierContour bezierContour = s.Contours[0];
12.         IEnumerable<BezierSegment> segments =
13.             VectorUtils.SegmentsInPath(bezierContour.Segments, bezierContour.Closed);
14.    
15.         foreach (BezierSegment pathSeg in segments)
16.         {
17.             int kSegmentSubdivisions = 8;
18.             for (int i = 0; i < kSegmentSubdivisions; ++i)
19.             {
20.                 float t = (float) i / kSegmentSubdivisions;
21.                 var p = VectorUtils.Eval(pathSeg, t);
22.                 contour.Add(new Vector2(p.x, p.y));
23.             }
24.         }
25.     }
26. }
27.  

SVG:

Code (Boo):

1. <?xml version="1.0" encoding="utf-8"?>
2. <!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
3. <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
4. <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
5.      viewBox="0 0 1024 768" enable-background="new 0 0 1024 768" xml:space="preserve">
6.     <g>
7.  
8.         <ellipse transform="matrix(-0.985 -0.1725 0.1725 -0.985 851.6964 1205.0658)" fill="#3B1682" cx="478.2" cy="565.5" rx="10.6" ry="37.3"/>
9.     </g>
10. </svg>
11.  

Spoiler: full version

Code (c#):

1.  
2. using System;
3. using System.Collections.Generic;
4. using UnityEngine;
5. using System.IO;
6. using Unity.VectorGraphics;
7.  
8. public  class SVGImport : MonoBehaviour
9. {
10.     [SerializeField]
11.     private TextAsset test;
12.  
13.     private void Start()
14.     {
15.         Load(test.text);
16.     }
17.  
18.     void Load(string pData)
19.     {
20.         VectorUtils.TessellationOptions tessOptions = new VectorUtils.TessellationOptions()
21.         {
22.             StepDistance = 100f,
23.             MaxCordDeviation = 0.5f,
24.             MaxTanAngleDeviation = 0.15f,
25.             SamplingStepSize = 0.15f
26.         };
27.  
28.         // Dynamically import the SVG data, and tessellate the resulting vector scene.
29.         SVGParser.SceneInfo sceneInfo = SVGParser.ImportSVG(new StringReader(pData));
30.  
31.         void FillFromGeometry(List<VectorUtils.Geometry> pGeometry, GameObject node, Rect bounds)
32.         {
33.             Mesh _mesh = new Mesh();
34.             VectorUtils.FillMesh(_mesh, pGeometry, 100, true);
35.  
36.             Mesh mesh =  new Mesh();
37.             mesh.vertices = _mesh.vertices;
38.             mesh.triangles = _mesh.triangles;
39.  
40.             node.GetComponent<MeshFilter>().mesh = mesh;
41.  
42.         }
43.  
44.         void FillContour(List<Vector2> contour)
45.         {
46.             LineRenderer ren = GetComponent<LineRenderer>();
47.             ren.positionCount = contour.Count;
48.             for (int i = contour.Count - 1; i >= 0; i--)
49.             {
50.                 ren.SetPosition(i, contour[i] / 100f);
51.             }
52.         }
53.  
54.         void AddMi(SceneNode pNode)
55.         {
56.             if (pNode.Children != null)
57.             {
58.                 foreach (SceneNode node in pNode.Children)
59.                 {
60.                     AddMi(node);
61.                 }
62.             }
63.  
64.             if (pNode.Shapes != null)
65.             {
66.                 foreach (Shape s in pNode.Shapes)
67.                 {
68.                     Scene scene = new Scene() {Root = pNode};
69.                     // mesh
70.                     List<VectorUtils.Geometry> gms = VectorUtils.TessellateScene(scene, tessOptions);
71.  
72.                     // outline
73.                     List<Vector2> contour = new List<Vector2>();
74.                     if (s.Contours != null && s.Contours.Length > 0)
75.                     {
76.                         BezierContour bezierContour = s.Contours[0];
77.                         IEnumerable<BezierSegment> segments =
78.                             VectorUtils.SegmentsInPath(bezierContour.Segments, bezierContour.Closed);
79.  
80.                         foreach (BezierSegment pathSeg in segments)
81.                         {
82.                             int kSegmentSubdivisions = 8;
83.                             for (int i = 0; i < kSegmentSubdivisions; ++i)
84.                             {
85.                                 float t = (float) i / kSegmentSubdivisions;
86.                                 var p = VectorUtils.Eval(pathSeg, t);
87.                                 contour.Add(new Vector2(p.x, p.y));
88.                             }
89.                         }
90.                     }
91.                
92.                     if (gms != null && gms.Count > 0 && contour.Count > 0)
93.                     {
94.                         Color color = Color.white;
95.                         Rect bounds = Rect.zero;
96.  
97.                         foreach (VectorUtils.Geometry g in gms)
98.                         {
99.                             if (g.Fill != null)
100.                             {
101.                                 color = g.Color;
102.                             }
103.  
104.                             bounds = g.UnclippedBounds;
105.                         }
106.  
107.                         FillFromGeometry(gms, gameObject, bounds);
108.                         FillContour(contour);
109.                     }
110.  
111.  
112.                 }
113.            
114.  
115.             }
116.         }
117.  
118.         AddMi(sceneInfo.Scene.Root);
119.     }
120. }
121.  

 

Hello @mcoted3d

I'm trying to load an SVG and then create a texture from it in order to create a jpg file. Load the svg seems to works and then I can create a Sprite using VectorUtils.BuildSprite like in the repo samples. With that sprite I noticed that:

• if I set that sprite to a SpriteRenderer then the "SVG content" will be displayed as expected
• if I sent that sprite to an Image sprite property, then nothing will be displayed
• if I try to access that sprite texture property, then an error occurred because it's null

Because I really need a texture in order to use "ImageConversion.EncodeToJPG" I decided to give "VectorUtils.GenerateAtlas" a try but the result it's null and I don't know why.

So my question is : is it possible to generate a texture from a loaded SVG, if yes how ? If not, is there a way to generate a jpg file from a loaded SVG ?

Thanks

 

Click on the svg image in the project folder
Go to the inspector
Click on Generated Asset Type
Change to Textured Sprite

 

Thanks @StephenW but I'm loading the SVF from a string and then tesselate it using

Code (CSharp):

1. VectorUtils.TessellateScene

so I don't think I can access those import settings at runtime.

 

Hello @mcoted3d

I have posted an issues over the GitHub, but I'm also posting over here. So, I'm using the sample code (SVGRuntimeLoad.cs), it works perfectly on Unity editor. But, if I build for iOS (did not tried Android) on 2020 or newer it crashes with the following result.

Code (CSharp):

1. NullReferenceException: Object reference not set to an instance of an object. at Unity.VectorGraphics.VectorUtils.BuildSprite (System.Collections.Generic.List1[T] geoms, UnityEngine.Rect rect, System.Single svgPixelsPerUnit, Unity.VectorGraphics.VectorUtils+Alignment alignment, UnityEngine.Vector2 customPivot, System.UInt16 gradientResolution, System.Boolean flipYAxis) [0x00000] in <00000000000000000000000000000000>:0
2. at DataManager.ProcessSVGImage (System.String svgData, EntityIcon entityIcon) [0x00000] in <00000000000000000000000000000000>:0
3. at System.Action1[T].Invoke (T obj) [0x00000] in <00000000000000000000000000000000>:0 at RestWebClient+<HttpGet>d__3.MoveNext () [0x00000] in <00000000000000000000000000000000>:0 at UnityEngine.SetupCoroutine.InvokeMoveNext (System.Collections.IEnumerator enumerator, System.IntPtr returnValueAddress) [0x00000] in <00000000000000000000000000000000>:0

I read Vector Graphics Package is a experimental package, but this is an essencial tool for many developers. It works on 2019 builds, but not with 2020 or newer. Is there an explication for this behaviour? Whats the roadmap on this feature? Please provide some feedback.

Thanks in advance,
Sebastião Rocha

 

Thanks @mcoted3d,
What I want is to convert the texture to a JPG file and then write that file into disk. So I won't directly use the generated texture to display something on screen.

 

Yes. But for that I need a texture to pass-in as argument. First time I thought the texture property of the sprite generated by VectorUtils.BuildSprite could do the job until I found it is always null. I'll try RenderSpriteToTexture2D and I hope I'll have more luck !

 

Hello @mcoted3d ,

First of all thank you, VectorUtils.RenderSpriteToTexture2D works as expected !
Now I would like to load, import and tesselate svg files from a Task but after some tests it seems neither "SVGParser.ImportSVG" or "VectorUtils.TessellateScene" work when called from something like Task.Run(...).

Is that normal ? Is there a way to thread that part ? I imagine that building the sprite and drawing the sprite to a texture won't work on a thread but I though parsing and tessellate should, right ?

Thanks

 

Ho ho, nice trick. Thank you.

 

Hi! Very like to use this cool package!
There is some small problem.
In Unity 2020 we can see number of vertices and size of tessellated sprite on svg-preview:

Spoiler: Old UI Example

E.g. this tessellated image contains 684 vertices.
New Unity versions (2021.1.4f1, 2021.1.5f1) do not display this information:

Spoiler: New UI Example

It's very important information to optimize performance. Where can I get that values without code? Now I'm using editor script and can only find out number of vertices though:

sprite.vertices.Length

Thanks.

 

I reported a bug (Case 1333565). Thanks!

 

Maybe I am doing something wrong, but from 2021 versions in URP projects I am getting some shader warnings and svg image is not rendering. Tested in 2021.1.2f1, 2021.1.3f1 and 2021.1.6f1.

 

I figured out I was missing canvas renderer. It is not added automatically like when you add standard image from context menu. Maybe it's a bug, I don't know, anyway, thanks for help.