Official Vector Graphics Preview Package

Hello, I'm using some SVG assets for UI icons in my project, and I noticed there are 2 ways to use them in the scene.
1. Add an SVG Image component to an object and select the desired sprite
or
2. Add a UI Image component, select the sprite and tick the "Use sprite mesh" box.

Is there a difference under the hood between 1 and 2?

 

Ok good to know, thanks!

 

How do i get the Vector Graphics package. I am using unity 2023.1.0b9 and it is not in the pack manager. Also there is no advanced button to view preview packages which is the most common response to not finding it.

 

Vector Graphics is a hidden package.
Go to the package manager and use "Add package by name" and fill in the package name. i.e.

com.unity.vectorgraphics

If you have a link to the documentation of a package you can always find their name in the URL.
https://docs.unity3d.com/Packages/com.unity.vectorgraphics@2.0/manual/index.html

 

What would be the recommended way to dynamically render vectors for use in UI Toolkit editor windows?


I'd like to use vector graphics as a way to visualize some data and I've been attempting to use BuildSprite as described in the documentation, but it only results in an error Not allowed to override geometry on sprite ''

Code (csharp):

1. var circle = new Shape();
2. VectorUtils.MakeEllipseShape(circle, Vector2.zero, 0.8f, 0.8f);
3. circle.Fill = new SolidFill() { Color = Color.yellow };
4.  
5. var scene = new Scene() { Root = new() { Shapes = new() { circle } } };
6.  
7. var opt = new VectorUtils.TessellationOptions()
8. {
9.     StepDistance = 10,
10.     SamplingStepSize = 100,
11.     MaxCordDeviation = 0.5f,
12.     MaxTanAngleDeviation = 0.1f
13. };
14. var ts = VectorUtils.TessellateScene(scene, opt);
15.  
16. var spr = VectorUtils.BuildSprite(ts, new Rect(0, 0, 128, 128), 128.0f, VectorUtils.Alignment.Center, Vector2.zero, 128);
17.  
18. visualElement.style.backgroundImage = new(spr);

 

Is there any chance to get this package working in build with -nographics flag? I know this is known limitation but I'm just thinking that maybe there is some workaround because it is a big problem when it comes to custom CI/CD

 

Hi, We are developing a framework that converts Figma designs into Unity automatically. Also we are updating our app user interface bu using this framework. In local mac computer, everything works fine. But in Unity Cloud Build, non-gradient sprites are not imported properly (Textured Sprite). Gradient textured sprites are fine. It happens only in Cloud build when building for iOS platform. We use package version 2.0.0-preview.21 and Unity version 2021.3.13f1.

Actual:



Expected:




Is it related to -batchmode? Is there any way to fix this?
Thanks!

 

Hello, I am using the vector graphics package to generate extruded meshes from 2d SVG floor plans.
I get everything right until I got to the texturing, and I have some questions:

1) Is it possible to use a Shader Graph to draw a generated Mesh with Gradient/Textures? Why do I need a specific shader "Unlit/VectorGradient"?

2) When I extrude the mesh I get successfully the vertex colors copied to the Cap mesh, but can't say the same for the UV channel. I think I am missing something here... How are the UV treated with SVG Meshes? Any docs I can read from?

Thank you!

 

I see that the Gradients are encoded into the texture atlas using the UV3 channel and thus it's required to have a custom shader. I solved my question #2 by copying the UV3 channel over the extruded mesh.

Unfortunately I need a Lit version of the VectorGradient shader. Is it possibile to use Shader Graph? Or how can we extend the VectorGradient shader to be a "Lit" version in URP?

Or even better, is it possible to avoid encoding the settings into a texture and render using a standard URP shader?

 

@mcoted3d Does the vector graphics package support the fully antialiased rendering that's in UItoolkit? i mean like if I use the VG API now, will the vector graphic shader render perfectly antialiased shapes, or is it still being worked on?

 

Well we have no answers, so we decided to import solid colors as gradient. It works most cases except if fill-rule is "evenodd".

Lets say if we have this type of svg:

Code (JavaScript):

1. <svg id="I5334:8621;2643:15356;2649:15086" width="362" height="255" viewBox="0 0 362 255" fill="none" xmlns="http://www.w3.org/2000/svg">
2. <path d="M357 2L5 2C3.34315 2 2 3.34315 2 5L2 250C2 251.657 3.34315 253 5.00001 253L357 253C358.657 253 360 251.657 360 250L360 5C360 3.34315 358.657 2 357 2ZM5 0C2.23858 0 0 2.23858 0 5L0 250C0 252.761 2.23859 255 5.00001 255L357 255C359.761 255 362 252.761 362 250L362 5C362 2.23858 359.761 0 357 0L5 0Z" fill-opacity="1" fill-rule="evenodd" clip-rule="evenodd" fill="url(#fill_0_solid_I5334-8621_2643-15356_2649-15086)" />
3. <defs>
4. <linearGradient id="fill_0_solid_I5334-8621_2643-15356_2649-15086" x1="0" y1="0" x2="362" y2="255" gradientUnits="userSpaceOnUse" >
5. <stop offset="0" stop-color="#424242" stop-opacity="1" />
6. <stop offset="1" stop-color="#424242" stop-opacity="1" />
7. </linearGradient>
8. </defs>
9. </svg>

Actual:


Expected:

 

Package imports gradient sprites properly, so I think cloud build initiated without `-nographics`.

 

Is there a way to activate mipmapping in the "Generate Asset Type" = "Textured Sprite" Mode?`
I'm using the SVGs in a World Space UI with UGUI and without mip mapping, this looks really ugly

 

Hi @mcoted3d, I have an issue loading SVG dashed lines via script.

On the left the same SVG imported and rendered with a Sprite Renderer; on the right I create the Mesh by reading the SVG from file in the following manner:

Code (CSharp):

1. var sceneInfo = SVGParser.ImportSVG( new StringReader(svgFile.text) );
2.  
3.         VectorUtils.TessellationOptions tesselationOptions = new VectorUtils.TessellationOptions();
4.         tesselationOptions.StepDistance = 1;
5.         tesselationOptions.SamplingStepSize = 1000;
6.         tesselationOptions.MaxCordDeviation = 1;
7.         tesselationOptions.MaxTanAngleDeviation = 5;
8.  
9.         var geoms = VectorUtils.TessellateScene(sceneInfo.Scene, tesselationOptions);
10.  
11.         Mesh m = new Mesh();
12.         VectorUtils.FillMesh(m, geoms, 100);
13.  
14.         GetComponent<MeshFilter>().mesh = m;

For some reason the dash gets longer with the length of the line. Any hints?


When looking at the wireframe of a straight line it looks like this:



and for a filled rectangle without stroke

 

I opened a ticket with case #IN-48344, yet to be confirmed

 

This issue seems to be gone in Unity 2021.3.28f1

 

Hello!

I saw website said "The Vector Graphics package is considered experimental and is not recommended to be used in production."

Is this still the case right now? If so is there a timeline for a stable version for production?

 

Plus one to this question. Otherwise, what is the recommended (stable, production-ready) way to create or import vector graphics in Unity? (Newbie question)

 

This package does not support svg text.
Why don't you provide some guidance how to draw svg text in unity ? for example how to compile skiasharp with svg & lotties to use in unity ?

That may save us a of time to have production app

 

It seems like reflections using metallic/smoothness standard shaders and reflection probes, that work with 3D object and sprites do not work with this package. Is it something possible and on the roadmap for this?

 

After updating the com.unity.vectorgraphics package from 2.0.0-preview.19 to 2.0.0-preview.21, I am seeing strange edges as shown in the attached image.
(Naturally, they are identical svg files.)
I also sent a bug report with CASE IN-58639, but I thought I'd share it in case anyone else is having trouble.

 

I have used Skia sharp but not for SVG, it is a very capable drawing package. TBH Unity should just integrate that for many things including rendering SVG to bitmap. It will not convert SVG to polygon meshes though, it is bitmap-based drawing.
Looks like there is a GitHub project here GitHub - ammariqais/SkiaForUnity: Skia For Unity with skottie animations

 

Is this Vector Graphics still being actively developed on?
A small update on an experimental package once half a year is a bit ... slow.

I still have multiple issues and not sure if I should further invest time in this.

 

I know this framework has been put on the backbench for the time being but I'm having a strange issue whereby any color change in the sprite rendererer component for an svg works fine in the Editor preview, but not when building to mobile, it kinda ignores any color changes made and defaults back to standard white. Has anyone else had this issue?

 

It seems there has been a few more updates to the package lately...

That said, I've been having issues loading an SVG in runtime and to display it in WebGL. Works in the editor. Using Unity 2022.3.4f1, URP, VectorGaphics Preview 23.

Edit: Tried with 2022.3.17f1, all packages updated to latest - no luck either.

Here the error in the console.

Code (CSharp):

1. debug.framework.js:2744 ArgumentNullException: Value cannot be null.
2. Parameter name: mat
3.   at UnityEngine.Graphics.Internal_BlitMaterial5 (UnityEngine.Texture source, UnityEngine.RenderTexture dest, UnityEngine.Material mat, System.Int32 pass, System.Boolean setRT) [0x00000] in <00000000000000000000000000000000>:0
4.   at UnityEngine.Graphics.Blit (UnityEngine.Texture source, UnityEngine.RenderTexture dest, UnityEngine.Material mat, System.Int32 pass) [0x00000] in <00000000000000000000000000000000>:0
5.   at UnityEngine.Graphics.Blit (UnityEngine.Texture source, UnityEngine.RenderTexture dest, UnityEngine.Material mat) [0x00000] in <00000000000000000000000000000000>:0
6.   at Unity.VectorGraphics.VectorUtils.RenderSpriteToTexture2D (UnityEngine.Sprite sprite, System.Int32 width, System.Int32 height, UnityEngine.Material mat, System.Int32 antiAliasing, System.Boolean expandEdges) [0x00000] in <00000000000000000000000000000000>:0
7.   at GetSprite.Update () [0x00000] in <00000000000000000000000000000000>:0

I made sure to include all the shaders & materials from the runtime folder of the package in resources and I can display the sprite itself in the build without issues using a Sprite Renderer. But as soon as RenderSpriteToTexture2D is called, this error is thrown.

Code (CSharp):

1. GetComponent<SpriteRenderer>().sprite = Texture2DLoader.Sprite;
2.                 Material material = new Material(Shader.Find("Unlit/VectorGradientUI"));
3.                 Debug.Log(VectorUtils.RenderSpriteToTexture2D(Texture2DLoader.Sprite, 64, 64, material, 8, true));

Any idea?

 

Thank you for the quick reply. Unfortunately it is still not working with the shaders included in the project settings.

 

Found the solution.

com.unity.vectorgraphics@2.0.0-preview.23/Runtime/VectorSprite.cs, line 397 reads as;

Code (CSharp):

1. s_DemulMat = CreateMaterialForShaderName("Unlit/VectorDemultiply", "Packages/com.unity.vectorgraphics/Runtime/Shaders/VectorDemultiply.shader");

But "Unlit/VectorDemultiply" doesn't exist - it's "Hidden/VectorDemultiply".

In Editor it will work because it falls back to the package's shader file. In runtime it will never work and throw said error.

Solution (until fixed):
- Duplicate Runtime/Shaders/VectorDemultiply.shader to you project's /Resources Folder
- Open Shader, rename Shader "Hidden/VectorDemultiply" -> Shader "Unlit/VectorDemultiply"
- Add to your included shaders (just in case)

 

It seems in the current setup there is no option to export multiple types from a single SVG asset. Is there any way to use the same SVG file for both UITookit and in-game sprites?

We're migrating to UIToolkit from UGUI. Previously we were using the VectorSprite asset in both Sprite and SVGImage components. Now it seems we need to duplicate our entire library of SVGs just to change this import setting (and reassign every sprite twice to each SO that uses one).

 

Hey,

I am currently writing a custom SVG tool based on the SVG importer. Since you parse the SVG file and build SceneNode objects, would it be possible to add the node's ID and parent property directy into the object? That would make node hierarchy traversal so much easier, without the need to use the SceneInfo object.

For now I have written a class that derives from SceneNode and replace each node with the extended version.

Code (CSharp):

1.     public class SceneNodeEx : SceneNode
2.     {
3.         public string ID{ get; private set; }
4.         public int HierarchyLevel{ get; private set; }
5.         public SceneNodeEx Parent{ get; private set; }
6.  
7.         public SceneNodeEx( SceneNode node )
8.         {
9.             Children = node.Children;
10.             Shapes = node.Shapes;
11.             Transform = node.Transform;
12.             Clipper = node.Clipper;
13.  
14.             if( node is SceneNodeEx ex )
15.             {
16.                 ID = ex.ID;
17.                 HierarchyLevel = ex.HierarchyLevel;
18.                 Parent = ex.Parent;
19.             }
20.         }
21.  
22.         public SceneNodeEx( SceneNode node, string id, int hierarchyLevel, SceneNodeEx parent )
23.         {
24.             Children = node.Children;
25.             Shapes = node.Shapes;
26.             Transform = node.Transform;
27.             Clipper = node.Clipper;
28.             ID = id;
29.             HierarchyLevel = hierarchyLevel;
30.             Parent = parent;
31.         }
32.     }

 

All your utilities are internal so it was easier to just fork the library. It did work, however.

Hack fix: https://github.com/EffortStar/com.u...mmit/141338d5f599b7e52660db908dc4e9f20d6aac0b

This just a temporary solution since the SVGs are not anti-aliased (AFAICT), so we'll need to a raster format before launch.

 

EDIT: Found my answer over here https://forum.unity.com/threads/unity-ui-svg-support-script.551254/ . Since it was a gradient svg I needed to enable TextCoord2 in the "Additional Shader Channel" for the Canvas.

I have an SVG with Generated Asset Type = "UI SVGImage".

I'd like to use this in my UI on a Screen Space - Camera canvas.

The preview looks fine below but when I try to drag it into the canvas, or assign it to a SVG Image component I get a blank white square. What am I doing wrong here?

Here is the import and correct-looking preview:



Here is the SVG Image component in the scene that produces the plain white square:

 

I have a similar issue as @huwp. The following function is basically taken right from the website example (Rendering vector graphics). I get the error Not allowed to override geometry on sprite '' logged to the console from BuildSprite and the returned texture is simply empty.

Code (CSharp):

1. public static Texture2D RenderSVG(string svgDocument, int textureSize, int pixelsPerUnit = 1)
2. {
3.     // load
4.     var svg = SVGParser.ImportSVG(new StringReader(svgDocument));
5.  
6.     // render to texture
7.     var geom = VectorUtils.TessellateScene(svg.Scene, new()
8.     {
9.         StepDistance = 100.0f,
10.         SamplingStepSize = 0.01f,
11.         MaxCordDeviation = 0.5f,
12.         MaxTanAngleDeviation = 0.1f
13.     });
14.  
15.     var sprite = VectorUtils.BuildSprite(geom, pixelsPerUnit, VectorUtils.Alignment.TopLeft, Vector2.zero, 128, true);
16.  
17.     return VectorUtils.RenderSpriteToTexture2D(sprite, textureSize, textureSize, GetSVGRenderMaterial(), 1, true);
18. }
19.  

In some situations it works fine. Apparently, it works only if called from certain situtations such as from a Start method (see this post)? However, I also absolutely need to do this in a chain of Awake calls. What is this limitation, why is it not documented and how can I work around it?

 

Even though the wrong shader name is fixed, this is still necessary for the function to work in a build. This is also not documented, it should also probably happen automatically when the package is installed?

 

@mcoted3d I think SVGImage should have useLegacyMeshGeneration field set to false on the constructor, because it's set to true by default in Graphic (other UI components like Image, RawImage, Text etc set it to false). This means that it's taking a path where it builds the geometry to a mesh directly and passes that to the IMeshModifiers, but this is deprecated... Instead it should use the newer method which uses VertexHelper. This no zero downsize and would allow my Unity UI effects and filters to run on SVGImage with better performance and without calling the deprecrated method.

Thanks,