Official Vector Graphics Preview Package

Oh, weird. Are there any more thorough tutorials on how to draw with the shape class from scratch, procedurally? I remember seeing a little bit of it, but many of the examples for 2.0.0 still seem to use IDrawable. Overall, I want to make something similar to the AS3 / javascript canvas graphics class.

 

Cool, that helped. One thing I'm stuck on -- I see some circle and rectangle examples about how to add them to a scene, which works fine, but lines seem to work differently; MakeLine doesn't use a shape like the others. So I made Bezier contours out of what it returned, then added them to a new shape. But I see nothing, even when I add on:

Code (CSharp):

1. shape.PathProps = new PathProperties()
2.         {
3.             Stroke = new Stroke() { Color = m_LineColor }
4.         };

Do Bezier Contours not use the stroke property? m_LineColor is (0,1,0), so I should be seeing green....

EDIT: Okay, so using a fill instead of a stroke seems to draw the lines, oddly. Is that the way? </Mando>

 

Hi @mcoted3d , I'm trying to import an UI SVG with a linear gradient made in Inkscape, but it isn't displayed...
Is there some workaround? Thanks! (I'm using vector graphics 2.0.0-preview.18 )

 

Works perfectly, Thank you so much!

 

In my current project, I’m getting SVGs from the artists and importing them as textured sprites to provide more resolution flexibility inside unity. This works but the vector renderer has serious issues rendering semitransparent whites onto the sprites. For example, this SVG:

Code (CSharp):

1. <svg width="128" height="128" version="1.1" xmlns="http://www.w3.org/2000/svg">
2.   <defs>
3.       <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
4.         <stop offset="0%" stop-color="white"/>
5.         <stop offset="100%" stop-color="white" stop-opacity="0"/>
6.       </linearGradient>
7.   </defs>
8.   <rect x="0" y="0" width="128" height="128" fill="url(#Gradient2)"/>
9. </svg>

Produces the right side of this comparison:

Notice the dark area? That’s because the vector graphics shader’s alpha is premultiplied.

By no means do I really know what I’m doing, but I was able to 'fix' it by editing VectorSprite.cs:RenderSpriteToTexture2D(…) and correcting the alpha between

copy.ReadPixels

and

copy.Apply()

:

Code (CSharp):

1. var pixels = copy.GetPixels();
2. for (int i = 0; i<pixels.Length; i++) {
3.     var c = pixels[i];
4.     if (c.a == 0) {
5.         continue;
6.     }
7.     // if premultiplied colors (p) = c * a
8.     // then c = p / a
9.     c.r = c.r / c.a;
10.     c.g = c.g / c.a;
11.     c.b = c.b / c.a;
12.     pixels[i] = c;
13. }
14. copy.SetPixels(pixels);

After this, I needed to do a complete reimport of all my SVGs.

Hopefully, this issue can get some attention from the dev team, because in the future I’d rather not commit the entire vector graphics package to git for one small fix.


(Version 2.0.0-preview.18)

 

Bug report with repro project submitted. I wasn't aware I could submit package bugs through the standard 'report bug' menu, thanks for the tip!

It's a fresh project using the standard pipeline and I observed the same issues with gamma and linear color spaces.
'expects premultiplied alpha' This example used the default Unity UI shader, which does use premultiplied blending.

Code (CSharp):

1. Blend One OneMinusSrcAlpha
2. ...
3. fixed4 frag(v2f IN) : SV_Target {
4. ...
5.   color.rgb *= color.a;
6. }
7. ...

I suspect the issue is that when the SVG is converted into a Texture2D that

color.rgb *= color.a

step is also being done, causing it to be done a total of two times: Once in the VectorGradient shader (pre-build) and then once at runtime as part of the ui shader.

 

Hello! I very need an consultation.
Out team supports many android devices for out projects, and some of these are old and have problem: its doesn't display semipransparent vector sprites. I mean, when you change transparency in SpriteRenderer component.
In Editor (and new devices) its look like on gif.
On some old devices it look like static images with alpha=1.
Device is Samsung Galaxy Tab A8. (Also it was some iOS device some time ago; but may be we doesnt support it anemore, I will receive full info about it later).
Please, tell me why it works like this? Does shader can be fixed for such old devices? (we use Vector Unlit)

 

Hi there!
First of all, I'm really enjoying this package. It's been very useful for my workplace program as we use a lot of SVGs.
I had a question about recoloring aspects of the SVG. I know it's possible through getting the IDs of the SVG code, but is it possible to change SVG colors through css classes. As in, in our SVGs have styles in the code and the colors are tied to the classes. So is there a way to change colors through classes or is it only able to be done through

 

looking for a little help from the team - I am loading .svg files from the web, feeding those byte arrays at runtime through the importer to get a Sprite and then later convert the Sprite to a Texture2D.

This works in Editor but not WebGL or Standalone.

The culprit seems to be at the very end of the process. After the sprite is successfully generated (it has a texture and can be displayed on a SpriteRenderer), I try to use the RenderSpriteToTexture2D function but end up getting a null value. It is hard to trace the nature of the error in WebGL but maybe the team has an idea.

tex = VectorUtils.RenderSpriteToTexture2D(sprite, textureWidth, textureHeight, mat, SampleCount, expandEdges);

Any help is appreciated.

Unity 2021.1.21f1
VectorGraphics Version 2.0.0-preview.18

 

Hi there! I am failing to access to the pixel height (or unit height calculated with Pixels Per Unit) of my SVG asset, so I could calculate a custom pivot point to vertically set 60px above the bottom in my AssetPostprocessor.OnPreprocessTexture. Did anyone tried and succeed to do something
similar?

Code (CSharp):

1.  
2.         void OnPreprocessAsset()
3.         {
4.             if (assetImporter.importSettingsMissing)
5.             {
6.                 if (assetPath.EndsWith(".svg"))
7.                     OnPreprocessSprite_SVG();
8.             }
9.         }
10.  
11.         void OnPreprocessSprite_SVG()
12.         {
13.             SVGImporter importer = (SVGImporter)assetImporter;
14.  
15.             importer.SvgType = SVGType.VectorSprite;
16.             //...
17.             importer.Alignment = VectorUtils.Alignment.Custom;
18.             var image = AssetDatabase.LoadAssetAtPath<Texture>(assetPath);
19.             var height = image.height;
20.             importer.CustomPivot = new Vector2(0.5f, 60f / height);
21.             //...
22.         }

Any help is appreciated.

My Unity Version is 2020.3.17f1
Vector Graphics Version is 2.0.0-preview.18

 

Hm, I finally finded answer.
I through problem was with alpha, and searching gave me nothing.
But problem is in whole Color property in SpriteRenderer - coloring didn't work at all on this devices.
So in was answered before in this theme - it is GPU Instancing, which is not work on some old devices. It is not supported by hardware.

I tried to do shader, which multiply Vertex Color with custom Color. It works on old devices. I'm sure that I didn't consider all minuses of this (I am nubie in shaders), but it works.

May be someone find this info useful.

 

Are there clear examples of how to use BezierSegment anywhere? The Unity documentation lacks any examples of any kind, and all I can find are examples for BezierPathSegment. My issue is that Contours don't seem to accept BezierSegments....

 

Is this a mistake? I'm seeing this in the 2.0.0 documentation ('new GradientFillStop() when it should be new GradientStop()):

Code (CSharp):

1. var fill = new GradientFill() {
2.     Type = GradientFillType.Linear,
3.     Stops = new GradientFillStop[] {
4.         new GradientFillStop() { Color = Color.blue, StopPercentage = 0.0f },
5.         new GradientFillStop() { Color = Color.red, StopPercentage = 0.5f },
6.         new GradientFillStop() { Color = Color.yellow, StopPercentage = 1.0f }
7.     }
8. };

Either way, my .4 unit sized stroke (roughly 40 pixels) is coming out solid white, no matter what fill gradient I apply to it (even if I change that to be all black) -- any reason? (the documentation *says* you can apply a fill to a stroke...)

EDIT: Linking back to earlier possible solution:
https://forum.unity.com/threads/vector-graphics-preview-package.529845/page-19#post-5738677

 

This one I'm less likely to self-solve and don't see anything in this thread quite like it, so: why is it that when I try to load a predefined png / texture for the material I use for my stroke, the stroke only shows one color at a time from the texture instead of the full pattern? I've got a fairly big stroke, between .4 and 2 units, so it should be able to encompass a simple 40px*40px four-color pattern with three shades of blue and one black line at the end...I'd think?

Is there a different way to do this? PatternFill has practically no documentation around it, and the properties don't seem to include a texture or material. The squares pattern in the example page with the "clipping" demonstration is just kind of there, with no specific code showing how it was made.

 

Is there currently/will there soon be a way to use this package with ShaderGraph (not counting using it to generate a TexturedSprite)?

There are 2 effects I'm trying to achieve:

1) Replacing a specific solid color with an object-space texture that can be changed at runtime. (For my sprite shader graph I'm using the ReplaceColor node)

2) A thick outline around the silhouette of the vector image. (For my sprite shader graph I'm doing the "make 8 duplicates and offset them" trick)

 

If anyone would require something similar, I guess I solved how to get the height and update the custom pivot during the import process in AssetPostprocessor.OnPreprocessAsset... My solution is a bit hacky but it is definitely working:

Code (CSharp):

1.     void OnPreprocessAsset()
2.     {
3.         if (assetPath.EndsWith(".svg"))
4.         {
5.             SVGImporter importer = (SVGImporter)assetImporter;
6.             if (importer != null && importer.importSettingsMissing)
7.             {
8.                 Debug.Log(string.Format("Importing SVG Asset '{0}'...", assetPath));
9.                 importer.SvgType = SVGType.VectorSprite;
10.                 importer.ViewportOptions = ViewportOptions.PreserveViewport;
11.                 //...
12.                 importer.Alignment = VectorUtils.Alignment.Custom;
13.  
14.                 var svgContext = System.IO.File.ReadAllText(assetPath);
15.                 var match = new System.Text.RegularExpressions.Regex(@"(?<=height="")\d{1,4}(?=px"")").Match(svgContext);
16.                 int height = 256;
17.                 if (match.Success)
18.                     int.TryParse(match.Value, out height);
19.                 importer.CustomPivot = new Vector2(0.5f, 60f / height);
20.                 Debug.Log(string.Format("...Height: {0}px...", height));
21.             }
22.         }
23.     }

 

Any chance of Vector Graphics being bumped up from "experimental"?

I've not had any issues with Vector Graphics since Unity 2018 and it was a real head scratcher to enable in Unity 2020.3 ... wild goose chase to find the package.

Thanks as always for the sterling work, I use SVGs in all kinds of projects now, from VR to Pixel art games and everything inbetween.

 

Hi there,

Lets suppose I have SVG assets and i want to change colors in those assets to white so they become tintable (currently they are in black)
so I was thinking there must be some api that let me process those svg files and save them back to white

please advise

 

Following up on this, can anyone on the team help explain why VectorUtils.RenderSpriteToTexture2D() returns null in Standalone and WebGL builds?

 

Hi every one.
First of all, thank you for all the good infos i got from here.

Is there a way to generate a "textured Sprite" via script? At runtime or in editor. I'd like to force the width of all the strokes to stay consistent regardless of the scale of the gameobject.
I managed to do it by generating a mesh only for the strokes but I wonder if i could do it another way.
Anyway, i'm still interested in generating a textured sprite by script...

 

I want to raycast a UI SVG image, but only the non-transparent parts. If it was a normally UI image I would set GetComponent<Image>().alphaHitTestMinimumThreshold = 0.1f;
How do I accomplish the same with UI SVG?

 

I seem to be having an issue with svg's that have "sub" svg's inside. They are valid and work fine in a browser. Does the vector package not support this? I've attached an example

 

Hi there.
Complete newbee question here:
How can I access the SceneInfo property of an instance of a SVG file that was drag-dropped to the scene ? (making it a prefab instance)

I need to read the Scene Node "Children" list of this object from a script.

I start with the usual GameObject variable definition :

Code (CSharp):

1. [SerializeField]
2. public GameObject mySVGGameObject;

I drag/drop the scene instance of my imported SVG file object in the inspector to set the mySVGGameObject ,
And then what ???... I'm lost.

I've been trying to define the object as an SVGImage or an SVGImporter, but can't drop my prefab on those fields.

I could import the svg file at runtime, but it is much more confortable for me to see it in the editor viewport.

Any help would be greatly appreciated.
C. MATIAS

 

What's the state of this anyways? Is there a team still working on this? Is anyone even looking at these forums? I heard there were a bunch of layoffs at Unity so it would be good to know if it has affected the development of some features

 

Thank you very much for the update. I personally think that this package is very important to our workflow, so will be heading straight to the roadmap to vote on the issue - but I have no idea how much value it has for others

 

Hi - I'd like to suggest a feature/bug fix for the package. I see above it's in theory not a priority, however checking the "needle-mirror" git mirror, I can see some updates recently (as recent as 3 days ago).

Basically, VectorSprite.RenderSprite looks to normalise all vertex coordinates - but if the destination aspect ratio is different than the scene - the output is stretched.

Is there a good place to make this request/recommendation, or to discuss other options @benoitd_unity ?


For reference, the fix for resizing and maintaining aspect ratio I have here -

https://github.com/needle-mirror/co...ter...kierenj:com.unity.vectorgraphics:master

 

(I also have an SVG with radial gradient which fails to render correctly - fine in browsers but not here)

 

@mcoted3d @benoitd_unity Thanks for the vector graphics package. I actually published an App using this framework, yay! I hope you can keep it around for bit, but totally understand if you need to retire it.

Facemakr, iOS

https://apps.apple.com/app/facemakr/id365878157

Features scaling, rotating etc, recoloring, and lots of other fancy rendering, I think I used near every part of the API Well, if you want to see your hard work in an app that is mostly about the Vector Graphics package, please take a look!

 

Found the fix for those that want to do SVG import at realtime in builds. Import the shader VectorExpandEdges.shader into your Resources folder and then load it into the Texture2D RenderSpriteToTexture2D() function.

Else this function will return null.

 

Hello.
Gradient meshes are not supported in the importer?
Inkscape:

Unity:

 

Hi,

I have been using the vector graphics package to programmatically draw a 2D map view as an svg based on terrain and biome vector data. I am looking to add a border around it, but am struggling to get the dash stroke working. The effect I am looking for is this, equal sized dark and light dashes in a line:

There is not much documentation around the stroke properties, when I try set a similar black and white dash pattern to 4px or 4 4, it comes out with a dash that varies in length like this:



Code to produce:
dashedLine.PathProps.Stroke.Pattern = new float[] { 4 };

Can I get a bit more info on how to use the dash properties correctly?

Cheers!

 

Hello guys! I love working with this package and am very sad it's no longer in active development.

I just thought I'd share a fix I made in the VectorUtils class in case anyone encounters the same problem as me.

Basically in trying to obtain the bounding box of a shape using the Bounds function (and consequently SceneNodeBounds function), the bounds of curved beziers are not properly considered.

This is because there is a typo in the SolveQuadratic function:

Code (CSharp):

1. static void SolveQuadratic(float a, float b, float c, out float s1, out float s2)
2. {
3.     float det = b * b - 4.0f * a * c;
4.     if (det < 0.0f)
5.     {
6.         s1 = s2 = float.NaN;
7.         return;
8.     }
9.  
10.     float detSqrt = Mathf.Sqrt(det);
11.     s1 = (-b + detSqrt) / 2.0f * a; // typo - denominator needs brackets
12.     if (Mathf.Abs(a) > float.Epsilon)
13.         s2 = (-b - detSqrt) / 2.0f * a; // typo - denominator needs brackets
14.     else s2 = float.NaN;
15. }

If you update the final section to add brackets as below, the bounds function will include bezier curves correctly:

Code (CSharp):

1.     float detSqrt = Mathf.Sqrt(det);
2.     s1 = (-b + detSqrt) / (2.0f * a);
3.     if (Mathf.Abs(a) > float.Epsilon)
4.         s2 = (-b - detSqrt) / (2.0f * a);
5.     else s2 = float.NaN;

Hope this helps someone

 

Anyone know why I'm having trouble changing some SVGImporter settings with an Editor script?

Code (CSharp):

1.         string filepath = OutputFolderPath + "/" + fileName + ".svg";
2.  
3.         System.IO.File.WriteAllText(filepath, text);
4.  
5.         AssetDatabase.Refresh();
6.  
7.         SVGImporter importer            = (SVGImporter)AssetImporter.GetAtPath(filepath);
8.  
9.         Debug.Log(importer);
10.  
11.         importer.ViewportOptions        = Unity.VectorGraphics.ViewportOptions.PreserveViewport;
12.         importer.GeneratePhysicsShape   = true;
13.         importer.AdvancedMode           = true;
14.         importer.StepDistance           = 1f;
15.  
16.         importer.SaveAndReimport();

It creates my SVG files and grabs the importer without issue, but when I set importer settings they aren't saved properly.

If I call importer.SaveAndReimport(); like I'm doing in the code above, it just resets the importer to the default options. If I don't call SaveAndReimport it will actually save the changes to the importer's inspector view, but they aren't actually applied when I add the svg to scenes.

Not sure if it's something up with the SVGImporter or if I'm just using it incorrectly. Can't seem to find much on changing AssetImporter settings in the general API Documentation, and definitely nothing in the Vector Graphics package documentation.

 

The .SetDirty call did the trick. Thank you!

 

Is there a setting on an SVGImage that mimics the normal Image's alphaHitTestMinimumThreshold property?

I just need to register clicks on vector graphics, and I am currently using PolygonCollider2Ds. It's a pain though because the physics shapes generated are.... bad for vector graphics so I"m spending a lot of time manually creating the colliders

I would love to just use UI elements and the "Maintain Viewport" option to accurately place elements on import, but I can't figure out a way to accurately get an "OnClick" on them as UI elements.

 

Is there any ETA on when text elements will be supported?

 

My whole project builds on the Vector Graphics Package. So far the package is doing a great job and I'm very glad it exists!
But now I encounter a big problem! I am creating procedurally generated (celestial) objects for a space exploration game. I have already been able to optimize the creation process very well. But now there is a fatal bottleneck that I don't know how to avoid. The TessellateScene() function!
My procedurally generated objects are just simple Shapes, each with a single triangle (BezierContour with 3 BezierPathSegments) and a Fill. From just a few hundred of these triangle shapes, the tessellation takes so long that significant frame drops (>100 ms) occur.
One possibility would be to outsource the tessellation to a job or a parallel async/await task. This works quite well, but unfortunately cannot be used in a WebGL application (which the project is designed for).
So my question: is there any other option to speed up the tessellation or some kind of workaround like maybe I can split the tessellation into multiple frames or something else? I would be VERY GRATEFUL for any help!