Official Vector Graphics Preview Package

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!

 

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?

 

Cheers, will try this out!

 

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?

 

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.

 

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

 

Any news ?

 

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.  

 

Hey Patrick, how far is the production version? Thanks Marek.

 

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)

 

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!

 

Weird, can you send me the elephant.png you created using the above snippet? Thank you!!

 

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 , 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!

 

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).

 

Thank yoU!

Question,



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

 

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?

 

Thank you!!

 

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.

 

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???

 

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?

 

yes, thank you very much!!

 

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?

 

@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?

 

Hmm unfortunately this isn't really viable for ~100 individual objects. That's a shame.

 

Thanks, I will try it.

 

Hi, are there any plans to add Mesh as a Generated Asset Type? So the SVG can be used on MeshRenderers

 

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?

 

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

 

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?